WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] changing appearance of a navigation bar (13 posts)

  1. mzimmers
    Member
    Posted 6 years ago #

    Hi -

    I have used wp_list_pages to put some links in my header. I now want to play with its appearance in a few ways:

    - horizontal vs. vertical menu
    - eliminate the bullets
    - change the font and font sizes
    - highlight on rollover
    - etc.

    Can someone point me to the right documentation that talks about this? I've read about the NAVT tool, which might be an option, but I'd like to hear what other people would suggest for this. Thanks...

  2. moshu
    Member
    Posted 6 years ago #

    If you did play with it then you probably noticed (by watching your own source code) and reading the Codex that the tag adds a class to every list item + another class to the list item of the Page you are on.
    This would solve/eliminate the highlighting issue.
    It should solve, at least partially, the styling question, too - you have the classes to define in the stylsheet.

    Additionally, you can Google for "styling nested lists"...

    Also, from the Codex:
    http://codex.wordpress.org/Creating_Horizontal_Menus
    http://codex.wordpress.org/Dynamic_Menu_Highlighting

  3. mzimmers
    Member
    Posted 6 years ago #

    Thanks, Moshu. I'm studying CSS right now, since it looks like I'll need to use it for this. Can you tell me what the "#" and "." characters mean in this context:

    #content {
    	font-size: 1.2em
    	}
    
    .clear { clear:both; }

    I looked in the CSS2 reference but couldn't find them. They're in my theme's style page, though.

  4. moshu
    Member
    Posted 6 years ago #

    # - id
    . - class

    Which means in your html you can see code like this:

    <div id="content">....
    or
    <div class="clearer">....

    The main difference is: you can have an ID only once in a page/file and classes can be used multiple times.

  5. mzimmers
    Member
    Posted 6 years ago #

    I'm still studying the links you provided above, Moshu. In the meantime, how does one go about altering the powers-that-be of documentation errors? The page:

    http://codex.wordpress.org/Creating_Horizontal_Menus

    features some apparently-deprecated code, and a typo or two.

  6. moshu
    Member
    Posted 6 years ago #

    You create an account-register on the Codex... and go ahead!

  7. mzimmers
    Member
    Posted 6 years ago #

    Hey, what do you know...it works! For the first time since I began with WP, I can now see the value of its approach.

    My style sheet makes interesting use of both hex values and color names to designate colors. It also (in some places) defines a color with only three digits (eg. #ddd). I realize that this isn't exactly a WP question, but...is #ddd shorthand for #000ddd, #ddd000, #0d0d0d, or something else?

    Thanks.

  8. mzimmers
    Member
    Posted 6 years ago #

    Another question about colors: why is it that if I use DigitalColorMeter to determine what color something on my page is, and I code something else to match that color, it doesn't come out the same? I double-checked my decimal to hex and it's good. Is there some kind of opacity or something going on? I'm specifically referring to why my navigation items don't match the "Hello World" background.

    The rollover isn't working either, but I'll play with that for a little more.

    EDIT:

    Never mind...I triple-checked and my math was indeed off. Rollover wasn't working because I'd dropped a "#". Time for this newbie to quit fooling around and go to bed.

  9. Hafiz Rahman
    Member
    Posted 6 years ago #

    Hi mzimmers,

    three digit hex colors is a shorthand with it's own rule. It's hard to explain it in words, so in example:

    #6a9 = #66aa99

    #123 = #112233

    Can you understand that? each digit replicates once and is placed to its right, moving the rest of the digits to the right as well, and so on.

  10. mzimmers
    Member
    Posted 6 years ago #

    Hi, Hafiz. Thanks for the good explanation; I understand it now.

  11. mzimmers
    Member
    Posted 6 years ago #

    I lifted this bit of code from the Creating Horizontal Menus codex:

    #navmenu ul {margin: 0; padding: 0;
    	list-style-type: none; list-style-image: none; }
    #navmenu li {display: inline; padding: 5px 20px 5px 20px}
    #navmenu a {text-decoration:none; color: blue; }

    1. is the "navmenu a" in fact referring to an anchor?
    2. Is there an option for putting a border around each list element? If so, where does it go?

    Thanks...

  12. moshu
    Member
    Posted 6 years ago #

    a - yes, it's anchor
    li - would be the list item; the border should go probably for those

    (Styling lists is many times a trial and error process...especially, that in a usual WP sidebar you have nested lists. You could even google for "styling nested lists)

  13. mzimmers
    Member
    Posted 6 years ago #

    Thanks, Moshu. So, do I understand this to mean that I should be adding some border information to the #navmenu li line above?

    By the way, I think I understand the #navmenu u line and the #navmenu li line, but what does the #navmenu ul li a line do?

    Edit:

    PS: I'm not ignoring your suggestion for googling; I'm just holding off until I get a few issues resolved with the scalar aspects of lists, then I'll turn my attention to the nuances of a nested list.

Topic Closed

This topic has been closed to new replies.

About this Topic