WordPress.org

Support

Support » How-To and Troubleshooting » Custom color on navbar button?

Custom color on navbar button?

Viewing 15 replies - 1 through 15 (of 19 total)
  • esmi
    Forum Moderator

    @esmi

    Add a new page and then style the new button using that page’s unique class – eg .page-start

    okey.. thats a start 😀 hot do i go about doing that?.. the styling i mean.. i am not a php & css hacker ^^’

    but i’m not a total noob, so if i get some guidance, i’ll make it.

    esmi
    Forum Moderator

    @esmi

    Set the new page & tab up first. Then we might be able to give you some CSS to try.

    there, now you see a “test” button in the navbar

    esmi
    Forum Moderator

    @esmi

    Try adding:

    .navigation .page-test a {background:yellow;}

    to the bottom of your stylesheet.

    that worked! 🙂 have a look.

    What if i would like a picture as a background? am i just adding {background:”http://www.URLHERE.com/test.png”;} ?

    and what about when I’m hovering?

    esmi
    Forum Moderator

    @esmi

    am i just adding {background:”http://www.URLHERE.com/test.png”;} ?

    Yes

    and what about when I’m hovering?

    .navigation .page-test a:hover {background:red;}

    wow, big thanks! 😀
    Maybe i’m asking for to much now.. but can i make the button run all the way to the end of the bar?

    esmi
    Forum Moderator

    @esmi

    That could be tricky is you ever add any more Pages/menu tabs but you could try increasing the right padding using something like:

    .navigation .page-test a {padding-right:100px;}

    Then ajust the value to suit.

    wow, even that worked out perfect! 😀
    I’m trying to change the font golor on that button, but it won’t change.

    im adding

    .navigation .page-test li {text-shadow:#fff 1px 1px 1px;text-align:center;color:#000000;}

    esmi
    Forum Moderator

    @esmi

    Try:

    .navigation .page-test li a {text-shadow:#fff 1px 1px 1px;text-align:center;color:#000;}

    no, that did not work :-\

    esmi
    Forum Moderator

    @esmi

    Sorry – my bad. Try:
    .navigation .page-test a {text-shadow:#fff 1px 1px 1px;text-align:center;color:#000;}

    U are amazing! I’m talking to an angle tonight.
    Thanks so much! its prefect 😀

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Custom color on navbar button?’ is closed to new replies.