Colour coded elements based on Category ID

  • Herculez

    (@herculez)


    14 years, 3 months ago

    Hi All,

    I’m customising a theme for my wife who has requested I colour-code certain elements based on the ‘category’.

    Not being a PHP dev, I’m turning to you all for help.

    Can someone please share some code that shows me how to:

    1. Change the underscore in the main nav to be specific colours (default and onMouseOver) based on Category.

    2. Display different colour circle images behind the date stamp based on Category.

    The website is: http://www.innerstarjourney.com/ (Work in progress)

    Please let me know if you’d like me to paste any code as a reference?

    Based on your feedback, hopefully I’ll get the idea of how it’s done and be able to update other components by following the same concept.

    Hope you can help. Thanks.

    Chris.

Viewing 9 replies - 1 through 9 (of 9 total)
  • vtxyzzy

    (@vtxyzzy)

    14 years, 3 months ago

    I’ll start with #2, the date stamp. Warning – it isn’t simple!

    1. Copy wp-content/themes/bueno/styles/default/date.png to your pc and create different colored ones, one for each category. Name them like date-power.png, date-love.png, etc. Upload them to your site.
    2. Change line 14 of index.php (and similar lines in other files where the date is displayed) from:
      <p class="date">;

      to: 

      <?php $categories = get_the_category();
       $cat_slug = $categories[0]->slug;
       echo "<p class='date $cat_slug'>";
     ?>
    3. Create css entries for each cat_slug in custom.css like this: 
      .post  .power{
   background: transparent
   url(../../uploads/2010/01/date-power.png)
   no-repeat scroll left top;
   }

      Replace the ‘2010/10’ part of the path with the directory to your uploaded files (if in the uploads directory).

    I’m not going to attempt #1, but I think you would need to replace line 84 in header.php:

    <?php wp_list_pages('sort_column=menu_order&depth=3&title_li=&exclude='.get_option('woo_nav_exclude')); ?>

    with a function of your own.

    Michael

    (@alchymyth)

    14 years, 3 months ago

    no 1 is easy, as the navi already gives special classes to each category:
    add to custom.css:

    #pagenav li.cat-item-1 a:link {border-bottom:4px solid #666666;}
#pagenav li.cat-item-1 a:hover {border-bottom:4px solid #aaaaaa;}

#pagenav li.cat-item-4 a:link {border-bottom:4px solid #555000;}
#pagenav li.cat-item-4 a:hover {border-bottom:4px solid #ff0000;}

    you get the idea 😉

    vtxyzzy

    (@vtxyzzy)

    14 years, 3 months ago

    Sorry, I was looking at the wrong menu.

    Thread Starter Herculez

    (@herculez)

    14 years, 3 months ago

    That’s awesome, thanks!
    I’ll give it a go tonight and let you know how I get on.

    Cheers,
    Chris.

    Thread Starter Herculez

    (@herculez)

    14 years, 3 months ago

    Hey alchymyth,

    I had some time this morning before work so gave your suggestion a go.

    I added styles for the first two nav items with mixed results.

    It appears to work perfectly in Safari (OSX) but Firefox only show the hover state, not the default link state. Haven’t tested IE yet.

    I added these styles to style.css. Do they instead belong in the ‘styles/grey.css’ which pertains to this themes colour scheme? Something else?

    I suspect there’s a conflict somewhere, do I need to disable an existing style for these new ones to work without issue?

    Michael

    (@alchymyth)

    14 years, 3 months ago

    i could see the dark blue underline under ‘communication’ , that was gone after i clicked the link and went back – looks like you have a a:visited style as well – so add:

    #pagenav li.cat-item-4 a:link {border-bottom:4px solid #555000;}
#pagenav li.cat-item-4 a:hover {border-bottom:4px solid #ff0000;}
#pagenav li.cat-item-4 a:visited {border-bottom:4px solid #ffff00;}

    the style should be best in custom.css – first because the author suggest so, and then also because the style is called last, and will overwrite the other styles.

    Thread Starter Herculez

    (@herculez)

    14 years, 3 months ago

    Hey all, I’ve implemented the changes as suggested and it’s all gone really well.

    @vtxyzzy, thanks. Your code worked perfectly.

    @alchymyth, I added the a:visited style for each category (which I’ve set to the same colour as the a:link) and now it shows the correct colour in Firefox OSX, but all browsers appear to no longer display the a:hover after you’ve visited the page.

    So to reiterate, the first time you come to the page and mouseOver the main nav, the link show the correct hover colour. But after you start to click on those links, it doesn’t show the hover colour anymore.

    Finally, I have one last request. Can someone please show me how to make the box surrounding each post be coloured based on the category. So the date and box colour are the same.

    Thank you.
    Chris.

    Michael

    (@alchymyth)

    14 years, 3 months ago

    (http://www.w3schools.com/CSS/css_pseudo_classes.asp)
    i posted it in the wrong sequence, because i only thought of the :visited later: anyway, it should be:

    /*Body - Red*/
#pagenav li.cat-item-1 a:link {border-bottom:4px solid #e3140e;}
#pagenav li.cat-item-1 a:visited {border-bottom:4px solid #e3140e;}
#pagenav li.cat-item-1 a:hover {border-bottom:4px solid #f4a19f;}

    for the frame, you probably best follow @vtxyzzy:

    Change line 10 of index.php (and similar lines in other files where the date is displayed) from:
    <div class=”post”>

    to: 

    <?php $categories = get_the_category();
       $cat_slug = $categories[0]->slug;
       echo "<div class='post $cat_slug'>";   ?>

    i would then change the css a bit to distinguish between the post frame and the date disc:

    .date.power  {background: transparent
   url(../../themes/bueno/styles/grey/date-power.png)
   no-repeat scroll left top;} 

.post.power {
border:5px solid green; /* insert power colour */
   }

    instead of:

    .post  .power{
   background: transparent
   url(../../themes/bueno/styles/grey/date-power.png)
   no-repeat scroll left top;
   }

    good luck 😉

    Thread Starter Herculez

    (@herculez)

    14 years, 3 months ago

    Thanks alchymyth, I changed the order and it worked exactly as prescribed. I can’t believe it was that simple 🙂

    I’ll go ahead with your instructions for Part B tomorrow after a good nights sleep. Been on this for about 16 hours. Its come a long way!

    Thanks to all for your help 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Colour coded elements based on Category ID’ is closed to new replies.