WordPress.org

1. xionkid
   Member
   Posted 1 year 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
   Theme Diva & Forum Moderator
   Posted 1 year ago #

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

3. xionkid
   Member
   Posted 1 year 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 1 year ago #

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

5. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

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

6. xionkid
   Member
   Posted 1 year ago #

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

7. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   Try adding:

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

   to the bottom of your stylesheet.

8. xionkid
   Member
   Posted 1 year 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
   Theme Diva & Forum Moderator
   Posted 1 year 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 1 year 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
    Theme Diva & Forum Moderator
    Posted 1 year 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 1 year 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
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Try:

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

14. xionkid
    Member
    Posted 1 year ago #

    no, that did not work :-\

15. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

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

16. xionkid
    Member
    Posted 1 year ago #

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

17. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Glad I could help. :-)

18. xionkid
    Member
    Posted 1 year ago #

    angel i mean!

19. xionkid
    Member
    Posted 1 year 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 1 year ago #

    Can i make the button align rigt in any way?

Topic Closed

This topic has been closed to new replies.