[cXF] Icons in Visitor menu

[cXF] Icons in Visitor menu

How can I add a break-line in between the sections as shown in the image below? Id like a line between "Your Content" & "Account details" and the bottom just before the log out.
 

Attachments

  • Screenshot 2023-03-07 at 2.01.33 PM.webp
    Screenshot 2023-03-07 at 2.01.33 PM.webp
    28.7 KB · Views: 16
  • Screenshot 2023-03-07 at 2.32.19 PM.webp
    Screenshot 2023-03-07 at 2.32.19 PM.webp
    30.4 KB · Views: 15
If you take a closer look you can see you already have lines. I guess you're using a 3rd-party style.

Try to change the colour by adding this code to your extra.less template:
Less:
.menu-separator {
    border-top: 1px solid #dfdfdf;
}

If nothing is changed, try adding !important after the colour code.
 
If you take a closer look you can see you already have lines. I guess you're using a 3rd-party style.

Try to change the colour by adding this code to your extra.less template:
Less:
.menu-separator {
    border-top: 1px solid #dfdfdf;
}

If nothing is changed, try adding !important after the colour code.
Lmao I didn't even notice that until I zoomed in. Thank you. Works perfect.
 
Last edited:
One more thing, which line do you edit to increase the spacing between the dots and selections?
 
If you mean to add padding between icons and titles, uncomment this part in the code: /*padding-right: 5px;*/. To have it just like that: padding-right: 5px;.
 
If you mean to add padding between icons and titles, uncomment this part in the code: /*padding-right: 5px;*/. To have it just like that: padding-right: 5px;.
Thanks, but this is not what I meant. I'm talking about under the mailing or alerts section, the text and icons are separated by dots. I would like to space them a little more. Is it separator class? See attached image.
 

Attachments

  • Screenshot 2023-03-08 at 3.53.49 AM.webp
    Screenshot 2023-03-08 at 3.53.49 AM.webp
    3.1 KB · Views: 10
Try with this:
Less:
.menu-footer-main {
    .listInline > li, .listInline.listInline--bullet > li:before {
    padding-right: 5px;
    }
}
 
Last edited:
Try with this:
Less:
.menu-footer-main {
    .listInline > li, .listInline.listInline--bullet > li:before {
    padding-right: 5px;
}
Thanks but this didn't really do anything besides remove my icons. I must be missing something.

[edit] I am a dummy. There was a missing semi-colon. Works perfect. Thanks.
 
Last edited:
I use th uix 2. I see in desktop bu ı cant see in mobile
View attachment 292302
For UI.X 2 use this code:
Less:
/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody .menu-linkRow,
.uix_canvasPanelBody .menu-linkRow {
    padding: 6px 5px 6px 12px;
}
.menu-content.js-visitorMenuBody a.menu-linkRow,
.uix_canvasPanelBody 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);
    }
    &[href*="account/reactions"]:before {
        .m-faContent(@fa-var-thumbs-up);
    }
    &[href*="account/alerts"]:before {
        .m-faContent(@fa-var-bell);
    }
    &[href*="account/account-details"]:before {
        .m-faContent(@fa-var-user-cog);
    }
    &[href*="account/security"]:before {
        .m-faContent(@fa-var-shield-alt);
    }
    &[href*="account/privacy"]:before {
        .m-faContent(@fa-var-lock);
    }
    &[href*="account/preferences"]:before {
        .m-faContent(@fa-var-cogs);
    }
    &[href*="account/signature"]:before {
        .m-faContent(@fa-var-signature);
    }
    &[href*="account/upgrades"]:before {
        .m-faBase('Brands');
        .m-faContent(@fa-var-paypal);
    }
    &[href*="account/connected-accounts"]:before {
        .m-faContent(@fa-var-users-class);
    }
    &[href*="account/following"]:before {
        .m-faContent(@fa-var-user-plus);
    }
    &[href*="account/ignored"]:before {
        .m-faContent(@fa-var-user-minus);
    }
    &[href*="logout"]:before {
        .m-faContent(@fa-var-sign-out);
    }
}
/*****/
 
UI.X 2 için şu kodu kullanın:
Less:
/* Ziyaretçi menüsündeki simgeler */
.menu-content.js-visitorMenuBody .menu-linkRow,
.uix_canvasPanelBody .menu-linkRow {
    dolgu: 6 piksel 5 piksel 6 piksel 12 piksel;
}
.menu-content.js-visitorMenuBody a.menu-linkRow,
.uix_canvasPanelBody a.menu-linkRow {
    &:önce {
        .m-faBase();
        sağ dolgu: 5px;
    }
    &[href*="whats-new/news-feed"]:önce {
        .m-faContent(@fa-var-rss);
    }
    &[href*="arama/üye"]:önce {
        .m-faContent(@fa-var-comments);
    }
    &[href*="account/reactions"]:önce {
        .m-faContent(@fa-var-thumbs-up);
    }
    &[href*="hesap/uyarılar"]:önce {
        .m-faContent(@fa-var-bell);
    }
    &[href*="account/account-details"]:önce {
        .m-faContent(@fa-var-user-cog);
    }
    &[href*="hesap/güvenlik"]:önce {
        .m-faContent(@fa-var-shield-alt);
    }
    &[href*="hesap/gizlilik"]:önce {
        .m-faContent(@fa-var-lock);
    }
    &[href*="account/preferences"]:önce {
        .m-faContent(@fa-var-cogs);
    }
    &[href*="hesap/imza"]:{'den önce
        .m-faContent(@fa-var-signature);
    }
    &[href*="hesap/yükseltmeler"]:önce {
        .m-faBase('Markalar');
        .m-faContent(@fa-var-paypal);
    }
    &[href*="account/connected-accounts"]:önce {
        .m-faContent(@fa-var-users-class);
    }
    &[href*="hesap/takip ediliyor"]:önce {
        .m-faContent(@fa-var-user-plus);
    }
    &[href*="account/ignored"]:önce {
        .m-faContent(@fa-var-user-minus);
    }
    &[href*="çıkış"]:önce {
        .m-faContent(@fa-var-sign-out);
    }
}
/*****/[/KOD]
[/QUOTE]
 Materyal tasarım ikonlarını kullanabilir miyiz?

https://pictogrammers.com/library/mdi/
 
Not visitor menu ı am sorry.

İts account page sidenav
Oh, then we need to go here:
 
Top Bottom