WordPress.org

Ready to get started?Download WordPress

Forums

Custom color on navbar button? (20 posts)

  1. xionkid
    Member
    Posted 3 years ago #

    Hi! this is my website: http://www.boraskungfu.com

    I would like to add one more button in the navigation-bar, but i want it to have another color, like yellow. How can i do this? :-\

  2. esmi
    Forum Moderator
    Posted 3 years ago #

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

  3. xionkid
    Member
    Posted 3 years ago #

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

  4. xionkid
    Member
    Posted 3 years ago #

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

  5. esmi
    Forum Moderator
    Posted 3 years ago #

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

  6. xionkid
    Member
    Posted 3 years ago #

    there, now you see a "test" button in the navbar

  7. esmi
    Forum Moderator
    Posted 3 years ago #

    Try adding:

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

    to the bottom of your stylesheet.

  8. xionkid
    Member
    Posted 3 years ago #

    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?

  9. esmi
    Forum Moderator
    Posted 3 years ago #

    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;}

  10. xionkid
    Member
    Posted 3 years ago #

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

  11. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  12. xionkid
    Member
    Posted 3 years ago #

    wow, even that worked out perfect! :D
    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;}

  13. esmi
    Forum Moderator
    Posted 3 years ago #

    Try:

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

  14. xionkid
    Member
    Posted 3 years ago #

    no, that did not work :-\

  15. esmi
    Forum Moderator
    Posted 3 years ago #

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

  16. xionkid
    Member
    Posted 3 years ago #

    U are amazing! I'm talking to an angle tonight.
    Thanks so much! its prefect :D

  17. esmi
    Forum Moderator
    Posted 3 years ago #

    Glad I could help. :-)

  18. xionkid
    Member
    Posted 3 years ago #

    angel i mean!

  19. xionkid
    Member
    Posted 3 years ago #

    well this is a long shot but.. when i klick on a post-link, the navbar changes it self to have dividers..? how can i fix this?

  20. xionkid
    Member
    Posted 3 years ago #

    Can i make the button align rigt in any way?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags