Style modifications

[michalcabala]

Hi,
i would like kindly ask how to:

1. Style switcher link (icon only) in header navigation beside variations? Like link in footer, open modal with styles. I saw it in demos on this site.
2. NEW indicator badge for thread list in forum, like in forums list.

Many thanks

 

[Russ]

So right now, the only link in the header is from the variations (assuming you have them enabled. Our demo sites are on 2.2.X, not 2.3. If you're not seeing the variation icon in the header, make sure it's enabled: Style properties -> Header and navigation- > Style variation dropdown in header
Let me know if I'm understanding correctly here.

As for new indicator, Style properties -> Node/forum list -> New node title indicator

 

[michalcabala]

Thanks, but...

1. I mean Style chooser (like in footer), not variants. I would like to have style chooser link also in header nav.

2. "NEW" badge is showing only in forums list. I would like it also in threads list

Many thanks

 

[Russ]

1.) Inside PAGE_CONTAINER, you can click into the code area and hit Ctrl-F to search, look for:

<xf:if is="$xf.visitor.canChangeStyleVariation($xf.style) AND property('xbStyleVariationHeaderLink')">

Right above that, add this:

                                <xf:if is="$xf.visitor.canChangeStyle()">
                                    <a href="{{ link('misc/style') }}" data-xf-click="overlay"
                                       class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--styleChooser"
                                       data-xf-init="tooltip" title="{{ phrase('style')|for_attr }}: {$xf.style.title}" rel="nofollow">
                                        <xf:fa icon="fa-paint-brush" />
                                    </a>
                                </xf:if>

Should add the style chooser as the overlay then.




2.)

This into your extra.less should work:

.structItem.is-unread .structItem-title a[data-xf-init="preview-tooltip"]:after
{
    content: "{{ phrase('new') }}";
    display: inline-block;
    margin-left: 5px;
    line-height: 1;
    position: relative;
    top: -3px;
    .xf-xbNewIndicatorStyle();
}