Viewing 8 replies - 16 through 23 (of 23 total)
  • If it helps anyone, the way I have done highlighting for my tabbed navigation (similar to what is used on Binary Bonsai – not that you can see it yet, because the site isn’t live) is to break up the header.php into two files. The first contains everything down to the <body> tag, and the second contains the header html, in my case including the navigation, that comes after the <body> tag (I called this second file ‘header_block.php’). Then in each page that is used as a template or that makes a call to get_header(); I just replaced it with:


    <?php get_header(); ?>
    <body id="archives">
    <?php get_headerblock(); ?>

    Of course, the navigation could be put anywhere in the page – it doesn’t have to be part of the header – that’s just where my navigation happens to sit. You would obviously set the ID on the <body> tag here to be the ID of the navigation item you want highlighted when that page, or pages using that template, are viewed. So each navigation item also needs to have an ID assigned to it, e.g:


    <ul>
    <li id="home">Home</li>
    <li id="archives">Archives</li>
    <li id="about">About</li>
    </ul>

    And in the CSS you can then set the specific styles for these IDs by using something like body #archives {};.
    I hope this maybe helps anyone trying to do this – I hunted for a while until I could piece a few articles together to work it out. Sorry I haven’t got a live version up yet – will post a link once it is!

    Andrew and all, what I was asking specifically for is to post the process (java, css, php?) code that kept the “active category” highlighted so everyone can learn. Sure, I can snatch code off your site, but this way it is “eternal” and everyone can learn from the process.

    So I assume you put an IF/ELSE PHP statement in your header that says “If category = X, then highlight category X title” or something like that. That’s the specific people are looking for. It’s really lovely, and we’re all here to learn from you!

    Thread Starter Andrew

    (@andrew)

    So you want to know why the “blog” tab looks different than the other tabs (i.e., home, about, etc.)? Actually, it’s just basic HTMl, and I got it from:
    https://css.maxdesign.com.au/listamatic/horizontal05.htm
    I just assigned an “active” li id to the tab on the current page. So on my blog, the blog tab has the active id, and on the home page, the home tab has the active id. There’s no php involved, and the navigation doesn’t tie into wordpress whatsoever.
    Thanks for the compliment, and hope this helps.

    OH, so it’s nothing as fun as I made it out to be. It’s changed on the specific “page” so to speak. And here I was thinking you were a brillant php miracle worker ??

    If anyone has a php thing that creates the “active” id tag on the LI of the CATEGORY the visitor is in, so that that category is highlighted when the user is looking at anything in that category….please post it here or somewhere with a big obvious title that says “HIGHTLIGHT ACTIVE CATEGORY” or something like that.

    That would be way cool.

    Great tip anyway, Andrew.

    Thread Starter Andrew

    (@andrew)

    No, PHP isn’t exactly my thing, so I’m not the person to ask ??

    I wish there was something you could do in the css that would say “if a link points to the page that’s already loaded, format it like this…”

    Maybe that’ll show up in CSS3, eh?

    dreaming….

    Just wanted to mention a nasty work-around: it also works if you put <body id=”whatever”> in the page content area… you don’t have to have the two (or more) header files.

    But wouldn’t that result in multiple <body> tags in your page? (I guess that’s the ‘nasty’ part… ??

    Sorry for my confusion over what type of highlighting you were after Lorelle. I suspect that what you want might be acheived by somehow combining the list_cats() and in_category() functions. I’ll take a look when I get a moment and see if I can throw something together.

Viewing 8 replies - 16 through 23 (of 23 total)
  • The topic ‘CSS New Blog Design = Very, Very Cool’ is closed to new replies.