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

S

Shivan

Member
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.

Screenshot_20220420-185727_Chrome.jpg

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!
 
Sort by date Sort by votes
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.
 
Upvote 1 Downvote
Russ said:
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.
Click to expand...

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:

CSS: 
<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:

Screenshot 2022-04-20 at 20.18.41.webp

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.
 
Upvote 1 Downvote
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.
Less: 
.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.
 
Upvote 1 Downvote
Brogan said:
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.
Less: 
.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.
Click to expand...

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:

Screenshot 2022-04-20 at 22.09.38.png

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.

Screenshot 2022-04-20 at 22.16.26.webp

CSS: 
                            <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>
 
Last edited:
Upvote 1 Downvote
Tulpa said:
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

CSS: 
                            <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>
Click to expand...
You will find an answer here:
xenforo.com

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 xenforo.com
 
Upvote 1 Downvote
You must log in or register to reply here.
Back
Top Bottom