WordPress.org

Ready to get started?Download WordPress

Forums

CSS + New Blog Design = Very, Very Cool (24 posts)

  1. Andrew
    Member
    Posted 9 years ago #

    http://www.developericons.com/myblog/index.php

    I just launched a new site today, and I've fit the design into my blog template. Check it out!

  2. Jinsan
    Member
    Posted 9 years ago #

    Nice, I like it. Not sure about those crosshairs in the corners, seem a bit redundant. But it's very easy on the eyes, and not too busy with text. Me likes.

    Mind sharing your secret of how you get the menu to highlight? Link? Guide :P

    Btw, nice spaceship ;)

  3. Andrew
    Member
    Posted 9 years ago #

    Thanks!

    The crop marks in the corners are just a little bit of extrat design to liven the page up. Afterall, what other blog/website has crop marks? (Of course, it's just a matter of personal preference).

    I like the horizontal menu style because it makes the page layout simpler and more elegant, and it doesn't take space away fromt the actual blog.

    I'm not sure what you mean about getting the menu to highlight. Do you mean a link hover?

  4. Jinsan
    Member
    Posted 9 years ago #

    Well, I think it's link hover - no I can get THAT working, what I can't do is have the menu link highlighted. So if you click About, About is highlihted and everything else isn't.

    I was going to say the corner marks are different, and if you feel it makes your site stand out (which it does in some repsects) then I guess it's a good thing, and an individual thing. As I said, I like it anyway :)

  5. Andrew
    Member
    Posted 9 years ago #

    Ah, I see�so you're talking about the tabs on the navigation up on the top? Check out this:

    http://css.maxdesign.com.au/listamatic/horizontal05.htm

    Which tells you how to make a horizontal list like that�also, it tells you how to make the current link a different style than the rest of them (hence making a "tabbed" look).

  6. serif
    Member
    Posted 9 years ago #

    OK, the CSS to get a tab to look highlighted is no problem - but how did you put in the smarts with WordPress so that each page highlights the right tab? I have managed to do this using Pages and the wp_list_pages tag, but can't seem to get it working once you get down into individual entries (e.g. I have a tab called 'Archives', which links to a main archives Page that I set up using the Archives template, but once I click on a month or category archive link then the tab highlighting gets lost)

  7. serif
    Member
    Posted 9 years ago #

    UPDATE: Found this post on the Binary Bonsai group helpful, and now have it sorted (although very manual in it's application). I am using an ID applied to the body tag and have set up templates for each section. Had to modify the header.php file though and shift the <body> tag into the top of my new templates (and all the other pagtes that include the header.php file).

  8. Andrew
    Member
    Posted 9 years ago #

    I actually didn't give WP the smarts to highlight each page. The menu tabs up by the header were added by me and are not apart of WordPress, or the WordPress menu.

  9. thegreatnorth
    Member
    Posted 9 years ago #

    Very nice! and very easy on the eyes!

  10. Andrew
    Member
    Posted 9 years ago #

    Thanks!

  11. Lorelle
    Member
    Posted 9 years ago #

    Can you post the specifics on the horizontal menu tab-stay-lit thing. It's awesome. I have it on my old static site but hadn't figure out how to do it with the PHP code and tags in WordPress. So the specifics would be awesome. We can figure out how to do the horizontal menu, it's the "active category" aspect that is fascinating!

    Great job!

  12. Roar
    Member
    Posted 9 years ago #

    I like the design, but not so much the tomato color links.

  13. Andrew
    Member
    Posted 9 years ago #

    Lorelle -
    Check out the source code of the site, and you should be able to figure it out. For the tabbed-navbar on the site, I just slapped a few links together and formatted them with CSS�so "Home", "About", etc. is just something I added to my index.php, and isn't a part of wordpress. For the horizontal links and categories menu, I made a separate class dropped in the PHP code that called the links and categories and in the CSS I made the list style inline. Check out the source code and the css file, and you should be able to figure it out!

    Rori - Aww c'mon, everyone likes the color orange! ;)

  14. thinsoldier
    Member
    Posted 9 years ago #

    your footer doesnt line up on the portfolio page.
    Nice site tho.

  15. Andrew
    Member
    Posted 9 years ago #

    Thanks for spotting that out, it's now fixed.

  16. theboywonder
    Member
    Posted 9 years ago #

    slick design! *thumbs up*

  17. serif
    Member
    Posted 9 years ago #

    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!

  18. Lorelle
    Member
    Posted 9 years ago #

    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!

  19. Andrew
    Member
    Posted 9 years ago #

    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:
    http://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.

  20. Lorelle
    Member
    Posted 9 years ago #

    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.

  21. Andrew
    Member
    Posted 9 years ago #

    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?

  22. Lorelle
    Member
    Posted 9 years ago #

    dreaming....

  23. Marianne
    Member
    Posted 9 years ago #

    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.

  24. serif
    Member
    Posted 9 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.