XF 2.2 Where to find customization options for the following navigation icons

[Shivan]

Apologies for not knowing what they're called.

On mobile, the following four menu icons are available. I'd like to add a fifth so users don't have to click through the hamburger icon to reach the forum list. It seems to have collapsed "what's new" but I can't figure out the code or style property that makes this decision.

I've spent the week going through each style property and template trying to find it. I presumed it would be under Header & Navigation.



So my basic question is on how to add/remove/customize navigation icons in the top right corner of the site (particularly when navigation is collapsed).

Thanks!

 

[Russ]

Those are all controlled inside the PAGE_CONTAINER template.

Click inside the editor, hit ctrl-f and look for p-nav-opposite

Style properties are used more for controlling the appearance of certain things. Think font size, background colors and other things like that. Sometimes style properties are used to enable/disable certain things, but when you want to add custom links, that usually needs to be done inside the templates.

 

[Shivan]

Those are all controlled inside the PAGE_CONTAINER template.

Click inside the editor, hit ctrl-f and look for p-nav-opposite

Style properties are used more for controlling the appearance of certain things. Think font size, background colors and other things like that. Sometimes style properties are used to enable/disable certain things, but when you want to add custom links, that usually needs to be done inside the templates.

Thanks! Out of my utter ignorance in coding, I thought it would be clever to just copy/paste the code for "What's New" and replace it with values for Forums, like so:

<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
                    <a href="{{ link('whats-new') }}"
                        class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
                        aria-label="{{ phrase('whats_new')|for_attr }}"
                        title="{{ phrase('whats_new')|for_attr }}">
                        <i aria-hidden="true"></i>
                        <span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
                    <a href="{{ link('forums') }}"
                        class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--forumlist"
                        aria-label="{{ phrase('forum_list')|for_attr }}"
                        title="{{ phrase('forum_list')|for_attr }}">
                        <i aria-hidden="true"></i>
                        <span class="p-navgroup-linkText">{{ phrase('forum_list') }}</span>

To my utter astonishment, the website/server didn't collapse into a supermassive black hole. It's actually working as a link:



But I have no idea how to get the icon view to to match other buttons, nor how to detach it from search and reunite it with alerts.

 

[Paul B]

You have added your code inside the closing </a> tag for the other tab/link.

Move it out of the <a ...> ... </a>.

For the icon, use the extra.less template.

.p-navgroup-link.p-navgroup-link--forumlist i:after {
    content: "\f002";
    width: 1.28571429em;
    display: inline-block;
    text-align: center;
}

Change the icon (content) to suit.

 

[Shivan]

You have added your code inside the closing </a> tag for the other tab/link.

Move it out of the <a ...> ... </a>.

For the icon, use the extra.less template.

.p-navgroup-link.p-navgroup-link--forumlist i:after {
    content: "\f002";
    width: 1.28571429em;
    display: inline-block;
    text-align: center;
}

Change the icon (content) to suit.

I've got it the way I want but I just can't seem to put the right icon in to the corresponding line. When I type in the icon value for conversations, alerts, or what's new, it shows up. Below I've made it take the conversations logo:



No idea why some are dimmer than others but that's a minor quibble.

Thanks!

edit: I tried "p-navgroup-link--sidebar" and this worked. I can live with this in place of the regular forum icon but any advice on getting them to look consistent in terms of dimming/color would be greatly appreciated.

                            <a href="{{ link('forums') }}"
                               [B] class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations[/B]
                                title="{{ phrase('forum list')|for_attr }}"
                                aria-label="{{ phrase('forum list')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                            </a>
                            <a href="{{ link('conversations') }}"
                                class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
                                data-badge="{$xf.visitor.conversations_unread|number}"
                                data-xf-click="menu"
                                data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}"
                                data-menu-pos-ref="< .p-navgroup"
                                title="{{ phrase('conversations')|for_attr }}"
                                aria-label="{{ phrase('conversations')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                                <span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
                            </a>

 

[ge66]

I've got it the way I want but I just can't seem to put the right icon in to the corresponding line. When I type in the icon value for conversations, alerts, or what's new, it shows up. Below I've made it take the conversations logo:

View attachment 267377

No idea why some are dimmer than others but that's a minor quibble.

Thanks!

edit: I tried "p-navgroup-link--sidebar" and this worked. I can live with this in place of the regular forum icon but any advice on getting them to look consistent in terms of dimming/color would be greatly appreciated.

View attachment 267378

                            <a href="{{ link('forums') }}"
                               [B] class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations[/B]
                                title="{{ phrase('forum list')|for_attr }}"
                                aria-label="{{ phrase('forum list')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                            </a>
                            <a href="{{ link('conversations') }}"
                                class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
                                data-badge="{$xf.visitor.conversations_unread|number}"
                                data-xf-click="menu"
                                data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}"
                                data-menu-pos-ref="< .p-navgroup"
                                title="{{ phrase('conversations')|for_attr }}"
                                aria-label="{{ phrase('conversations')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                                <span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
                            </a>

You will find an answer here:

XF 2.2 - how to get this icon cooler to be white all the time?

trying to get this to stay white all the time --> can't figure it out and giving up. I know it fades with inactivity, but I already have a activity count flag above it so I don't need it to be faded, I just need it to remain white. Thanks!

xenforo.com

 

[Shivan]

You will find an answer here:

XF 2.2 - how to get this icon cooler to be white all the time?

trying to get this to stay white all the time --> can't figure it out and giving up. I know it fades with inactivity, but I already have a activity count flag above it so I don't need it to be faded, I just need it to remain white. Thanks!

xenforo.com

Thank you!