Change some navigation bar links colors Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    Change some navigation bar links colors

    -MiSHmaSH-
    -MiSHmaSH-
    Forumember


    Male Posts : 267
    Reputation : 12
    Language : Latvian

    Solved Change some navigation bar links colors

    Post by -MiSHmaSH- March 5th 2014, 11:13 pm

    Hello!
    I have navigation bar with no pictures. How can I change color of ''register'' and ''You have X new messages''

    And is it possible to change link name? I want to change ''Saturs'' (Home) name.

    Thanks!
    vaccam
    vaccam
    Forumember


    Posts : 371
    Reputation : 14
    Language : Norwegian
    Location : Norway

    Solved Re: Change some navigation bar links colors

    Post by vaccam March 6th 2014, 12:48 am

    You cannot change the color as far as i know, but you can just make an image and copy it in and it will replace the name of the navigation botton. I did so with my forum.

    Guide to change it

    ACP - > DISPLAY - > HEADERS AND NAVIGATION - > CLICK ON THIS BOTTON Change some navigation bar links colors Ok17 - > PLACE IN THE URL OF YOUR PICTURE WHERE IT SAYS : PICTURE


    SOMETIMES THE MESSAGES AND NEW MESSAGES WILL NOT CHANGE, IF SO DO THIS

    ACP - > DISPLAY - > PICS MANAGEMENT - > ADVANCED MODE - > GENERAL/EXPLORE - > SCROLL DOWN AND ADD THE URL


    Hope this helped

    Vaccam
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Change some navigation bar links colors

    Post by Ange Tuteur March 6th 2014, 12:51 am

    Hello -MiSHmaSH-,

    You should be able to change the new message link with this CSS :
    Code:
    .new-message { color:red !important; }

    To change a specific link you can use its pathname :
    Code:
    a[href="/register"] { color:yellow !important; }

    To change the name of a navlink you can do something like this :
    First set the default font-size to 0, then on our next selector we add text after using the ::after selector
    Code:
    a[href="/forum"] { font-size:0 !important; }
    a[href="/forum"]:after {
        font-size:11px;
        content:"Navlink Name";
    }
    -MiSHmaSH-
    -MiSHmaSH-
    Forumember


    Male Posts : 267
    Reputation : 12
    Language : Latvian

    Solved Re: Change some navigation bar links colors

    Post by -MiSHmaSH- March 6th 2014, 5:33 pm

    All work, but there is error:
    Change some navigation bar links colors Ylt55epdllqqfa7k3rrj
    I want to remove that link what is somehow shown there...  Change some navigation bar links colors Mouais
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Change some navigation bar links colors

    Post by Ange Tuteur March 6th 2014, 5:33 pm

    Please provide a link to your forum.

    Thank you Smile
    -MiSHmaSH-
    -MiSHmaSH-
    Forumember


    Male Posts : 267
    Reputation : 12
    Language : Latvian

    Solved Re: Change some navigation bar links colors

    Post by -MiSHmaSH- March 6th 2014, 5:35 pm

    Only in PM
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Change some navigation bar links colors

    Post by Ange Tuteur March 6th 2014, 5:55 pm

    Oooh I made a mistake. I forgot to put the mainmenu class name.

    Just add it after 'a' here :
    Code:
    a.mainmenu[href="/"] { font-size:0 !important; }
    a.mainmenu[href="/"]:after {
        font-size:11px;
        content:"Navlink Name";
    }

    That should edit 'forums'

    Since we put the font-size to 0 we need to fix some things.

    Try this :
    it is the same as above, so add it instead since it has properties to fix the design.
    Code:
    a.mainmenu[href="/"] {
        font-size:0 !important;
        padding:12px 4px !important;
        position:relative;
        bottom:4px;
    }
    a.mainmenu[href="/"]:after {
        font-size:11px;
        content:"Navlink Name";
        position:relative;
        top:4px;
    }
    -MiSHmaSH-
    -MiSHmaSH-
    Forumember


    Male Posts : 267
    Reputation : 12
    Language : Latvian

    Solved Thanks!

    Post by -MiSHmaSH- March 6th 2014, 5:59 pm

    Works!  :wouhou:
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Change some navigation bar links colors

    Post by Ange Tuteur March 6th 2014, 6:01 pm

    Welcome Smile

    Topic solved and archived