Grow your CSS skills. Land your dream job.

Sharing Stylesheets & Current Navigational Highlighting

  • # March 6, 2013 at 6:39 pm

    @TheDoc, I figured out what this means:

    @chriscoyier actually. In his tutorial here. Basically, it allows current navigational highlighting. Is there any way to keep this feature while still using:

    >

    Again, I am not very experienced with PHP, so I do not know how to combine the two.

    # March 6, 2013 at 6:39 pm

    You can use body_class() to accomplish the same thing.

    # March 6, 2013 at 6:40 pm

    Oh, how so?

    # March 6, 2013 at 6:54 pm

    Let me explain myself a little better. So, I checked the body tag on home. It looks a little something like this:

    How do I take that, make it more manageable, and apply CSS to it? Because before, when I was echoing the page, I could just use #home. I hope that was a better explanation than my previous message.

    # March 6, 2013 at 7:11 pm

    Now you’d use `.home`.

    # March 6, 2013 at 7:22 pm

    Here is what I currently have:

    body#header-feelgoodcandy ul#main-navigation li.header-projects li.header-leaflet a:hover,
    body#header-leaflet ul#main-navigation li.header-projects li.header-feelgoodcandy a:hover {
    color: #00AEEF;
    }

    ul#main-navigation li a:hover,
    body#header-home ul#main-navigation li.header-home a,
    body#header-projects ul#main-navigation li.header-projects a,
    body#header-blog ul#main-navigation li.header-blog a,
    body#header-forums ul#main-navigation li.header-forums a,
    body#header-contact ul#main-navigation li.header-contact a,
    body#header-shop ul#main-navigation li.header-shop a,
    body#header-support ul#main-navigation li.header-support a,
    body#default ul#main-navigation li.header-home a,
    body#header-feelgoodcandy ul#main-navigation li.header-projects a,
    body#header-leaflet ul#main-navigation li.header-projects a,
    body#header-feelgoodcandy ul#main-navigation li.header-feelgoodcandy a,
    body#header-gloom ul#main-navigation li.header-gloom a {
    color: #00AEEF;
    }

    So, do I change:

    body#header-home ul#main-navigation li.header-home a

    To:

    body.header-home ul#main-navigation li.header-home a

    I am confused on what should be a period and what should be a hashtag.

    # March 6, 2013 at 7:34 pm

    HTML:

    CSS:

    #hash-tag { }
    .period { }

    Hash tag == ID
    Period == class

    This is *really* basic stuff, though. Might be worth going back and doing some CSS-basics tutorials.

    # March 6, 2013 at 8:41 pm

    I just realized what I said. I actually knew that. I guess what I meant was, the names, essentially. The menu currently works for only half of the items. And I can not figure out why they are not working for the other half. Also, when I select an li from the ul, it highlights everything in the ul. Hrm. Here is the site. And here is the CSS code running everything for the menu:

    /*
    MENU STYLES
    */

    .header-home a,
    .page .header-home a,
    .header-projects a,
    .page .header-projects a,
    .header-blog a,
    .page .header-blog a,
    .header-forums a,
    .page .header-forums a,
    .header-contact a,
    .page .header-contact a,
    .header-shop a,
    .page .header-shop a,
    .header-support a,
    .page .header-support a {
    color: #7B0046;
    }

    .header-home a:hover,
    .page .header-home a:hover,
    .header-projects a:hover,
    .page .header-projects a:hover,
    .header-blog a:hover,
    .page .header-blog a:hover,
    .header-forums a:hover,
    .page .header-forums a:hover,
    .header-contact a:hover,
    .page .header-contact a:hover,
    .header-shop a:hover,
    .page .header-shop a:hover,
    .header-support a:hover,
    .page .header-support a:hover {
    color: #FFFEF2;
    }

    body.page-feelgoodcandy ul#main-navigation li.header-projects li.header-leaflet a:hover,
    body.page-leaflet ul#main-navigation li.header-projects li.header-feelgoodcandy a:hover {
    color: #00AEEF;
    }

    ul#main-navigation li a:hover,
    body.page-home ul#main-navigation li.header-home a,
    body.parent-slug-projects ul#main-navigation li.header-projects a,
    body.page-blog ul#main-navigation li.header-blog a,
    body.page-forums ul#main-navigation li.header-forums a,
    body.page-contact ul#main-navigation li.header-contact a,
    body.page-shop ul#main-navigation li.header-shop a,
    body.page-support ul#main-navigation li.header-support a,
    body.default ul#main-navigation li.header-home a,
    body.page-feelgoodcandy ul#main-navigation li.header-projects a,
    body.page-leaflet ul#main-navigation li.header-projects a,
    body.page-feelgoodcandy ul#main-navigation li.header-feelgoodcandy a,
    body.page-gloom ul#main-navigation li.header-gloom a {
    color: #FFFEF2;
    }

    Help is always appreciated.

Viewing 8 posts - 16 through 23 (of 23 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".