[cXF] Icons in Visitor menu

[BassMan]

BassMan submitted a new resource:

[cXF] Icons in Visitor menu - DIY guide for icons in Visitor menu.

Would you like to have icons in Visitor menu like this?

View attachment 196355


Add this to your extra.less template:

/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody a.menu-linkRow {
    &:before {
        .m-faBase();
        padding-right: 5px;
    }
    &[href*="/whats-new/news-feed"]:before {
        .m-faContent(@fa-var-rss);
    }
    &[href*="/search/member"]:before {
        .m-faContent(@fa-var-comments);
    }...

Read more about this resource...

 

[Emre]

I couldn't add a key icon.
Css add Code;

        &[href*="/account/xenforo-license"]:before {
            .m-faContent(@fa-var-key);
        }

Screenshot;

 

[BassMan]

I don't use that. Try only with &[href*="/xenforo-license"]:before.

 

[Emre]

I put the code in the wrong place. I fixed it, thank you.

 

[dethfire]

just an fyi, this only works if using full friendly URLs

 

[Neutral Singh]

Super neat!

 

[BassMan]

BassMan updated [cXF] Icons in Visitor menu with a new update entry:

Now it works also with non full friendly URL

• updated the code to work also with non full friendly URL

Read the rest of this update entry...

 

[BassMan]

BassMan updated [cXF] Icons in Visitor menu with a new update entry:

Updated for XF 2.2

• minor tweaks for XF 2.2

Read the rest of this update entry...

 

[gogo]

Using the latest code, the space between the icons and text seems to be missing.

 

[BassMan]

Interesting, I've updated the code. Check for the padding-right. Just uncomment it and adjust the value if needed.

I don't need this code inside to work as it should.

 

[JasonBrody]

Using the latest code, the space between the icons and text seems to be missing.

View attachment 236819

Working fine on mine:

 

[zoldos]

This doesn't work at all on ThemeHouse UIX. I'm assuming because TH customizes a lot of stuff. Is there any other solution? I had a similar mod on XF 1.5 and it was really cool.

 

[BassMan]

This doesn't work at all on ThemeHouse UIX. I'm assuming because TH customizes a lot of stuff. Is there any other solution? I had a similar mod on XF 1.5 and it was really cool.

I've just tested and it works on UI.X. Make sure you've pasted the code to the right style.

 

[El Porcharo]

It works perfectly.


Here is my iO and iO Dark

​

Just make sure to insert the code correctly and that all the rules are open/closed in the right way

 

[zoldos]

K, working. There is no space between icons and the menu items and text tho. hehe And the icons are the exact same color as text lol

 

[zoldos]

Interesting, I've updated the code. Check for the padding-right. Just uncomment it and adjust the value if needed.

I don't need this code inside to work as it should.

Ah yes. I will try that, thanks!

 

[zoldos]

Oh nice. Everything works and I changed the color and added some custom icons. Thanks much!!!

 

[El Porcharo]

@BassMan is there an easy way to apply this to the Conversations and Alerts menus?

Some time ago I've done it by adding a Template Modification, along with the related CSS rules in extra.less.

But then I've updated to XF 2.2.12, and today I'm checking if I have to edit those templates that are changed. I've noticed that there are some differences on the new PAGE_CONTAINER (I have quite a few Template Modifications on this one) so I've been adding my edits to match the new template.

The problem is that with the old modifications from the previous XF version I still see all icons in XF 2.2.12, while if I put the new code bunches in FIND and in REPLACE fields, the TEST button shows the differences while the icons in the front end are not shown.

So I was wondering if this can be done from within extra.less only, just like yours.

 

[BassMan]

@BassMan is there an easy way to apply this to the Conversations and Alerts menus?

Some time ago I've done it by adding a Template Modification, along with the related CSS rules in extra.less.

But then I've updated to XF 2.2.12, and today I'm checking if I have to edit those templates that are changed. I've noticed that there are some differences on the new PAGE_CONTAINER (I have quite a few Template Modifications on this one) so I've been adding my edits to match the new template.

The problem is that with the old modifications from the previous XF version I still see all icons in XF 2.2.12, while if I put the new code bunches in FIND and in REPLACE fields, the TEST button shows the differences while the icons in the front end are not shown.

So I was wondering if this can be done from within extra.less only, just like yours.

Not sure where exactly you want it, by in Conversation menu you can add it here:

.menu-footer.menu-footer--split a {
    &:before {
        .m-faBase();
        /*padding-right: 5px;*/
    }
    &[href*="conversations"]:before {
        .m-faContent(@fa-var-envelope);
    }
    &[href*="conversations/add"]:before {
        .m-faContent(@fa-var-edit);
    }
}

... to have it like this:

 

[El Porcharo]

Yep!
That's exactly what I want!

This is advanced coding that I still don't know

So, to extend this to the alert menu as well, I assume that I only have to add the related href within the same rule, since I see the footer block class is the same "menu-footer.menu-footer--split", right?

​

Thanks a lot buddy!