Category Fashion

  • I’ve searched all over for this and have not been able to find it, so here goes:

    I want it so that each header of a post has a background (dynamically created) image with the category name in it. I’ve created this by using php in my css and passing the category name to another php file, but I’m not sure how the CSS file would know which categories exist.

    Basically, I need the CSS file to dynamically create a class for each category before the page loads. If I can get this to work, I should have no problem with the rest.

    Any suggestions? Please let me know if you need me to clarify anything.

    Thank you in advance.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter lauch

    (@lauch)

    So, obviously this is a tricky one.

    Just to clarify – my goal is to make a dynamic theme that includes a background image for each post with the category name. I have:

    1. Figured out how to dynamically create the image as long as I have the category name passed along to the image creator. (i.e. – url(“categoryimage.php?value=Music”) )

    2. Figured out how to create the dynamic style sheet (style.php)

    3. Figured out how to assign the proper class to the post.

    What I haven’t figured out is:

    1. How to dynamically create the style sheet entry for every category. It’s easy to do manually, but I’d like for the theme to create this part by pulling from the database and there’s where my question lies.

    — How do you create the classes needed (say “Music”) for each Category using PHP and place it into the style sheet at load time? Would this need to be done inline or would I still be able to pull in an external style sheet?

    >>Figured out how to create the dynamic style sheet (style.php)<<

    Oooo..I wanna see this! Can I see? Can you provide a link with the style.css renamed to style.txt? I’d love to see this.

    Anyway, if you’ve got the stylesheet to be dynamic…this is off the top of my head, here, so it may not work…

    But have your category pages use some conditional tags to set the class of the page for each category. So, for example, if the category page you are on is “Music”, have the conditinal tag say something like this in the header:

    if is_category(‘Music’) {
    echo “<body class=\”music\”>”;
    }

    or something like that (there’s probably a simpler way to do it, but I digress). This way, when the category page for “Music” gets pulled up, the body tag will have that class assigned to it. I’m sure there’s a way to just put that code in so that the “echo <body class=\”$category name\”>” or something, so you don’t have to list every category, but I can’t think of the syntax right now.

    Then, in your stylesheet, have the class already there, so when the page is pulled up, the proper background for the page you’re on appears:

    body.music #header {
    background-image:url(“images/music.gif”);
    }

    Does that make sense to you? (Sometimes I’m not very good at explaining things, so let me know if I need to clarify!)

    Is something like this interesting to this thread? Not necessarily matching the discussion.. but conceptually, it seems like a possible.
    https://guff.szub.net/2005/07/21/post-templates-by-category/

    Thread Starter lauch

    (@lauch)

    doodlebee, the actual stylesheet isn’t online, only a test server locally, but here is the style sheet I have (it’s short since I’m only testing one scenario):

    style.php

    <?php
    header("Content-type: text/css");
    $white = '#ff6600';
    $dkgray = '#0099ff';
    $dkgreen = '#008400';
    ?>

    .funny{
    background: url("texting.php?value=Funny!") top right no-repeat <?php echo $white; ?>;
    display: block;
    width: 100%;
    height: 45px;
    }

    .notfunny{
    background: url("texting.php?value=Birthin the Baby!") top right no-repeat <?php echo $dkgray; ?>;
    display: block;
    width: 100%;
    height: 45px;
    }

    h1, h2, h3, h4 {
    color:<?=$dkgreen?>;
    }
    blockquote {
    color:<?=$dkgreen?>;
    }

    The last two entries are just to test the dynamic colors

    One thing to note, and this has been discussed on a few websites I’ve found, is that the style sheet is not cached, unless you add some caching headers. If you’re interested in that, I’d be happy to show you.

    Funny and notfunny are just two headers for posts I was messing with. I didn’t really construct the post loop yet, as I’ve been working on getting the images to align correctly.

    I’m not sure I’m being clear on this though. I want my front page, with multiple posts and multiple categories to have backgrounds in the heading area with the category in them. While this would probably also happen on the category page, it would kind of be like having a “music” icon next to a post in the “Music” category, only it would actually have the word “Music” in the background of the header of the post.

    And while I could go in and make a class for each category without a problem, I was hoping I could make it dynamic, so

    1. If I make a new category, I wouldn’t need to add a class, it would already be there and
    2. If I were to release this to the public, it would create the same backgrounds for each user’s categories.

    Here’s an example

    And while I could go in and make a class for each category without a problem, I was hoping I could make it dynamic, so

    1. If I make a new category, I wouldn’t need to add a class, it would already be there

    Then, mixing your stylesheet (which is cool!) with my suggestion *should* work for you.

    As I said, you could do (in the header) the conditional, so that whatever page the end user is on would display the proper class. Then make the stylesheet dynamic, as well, but you’d have to figure out a way (I guess) to get the stylesheet to pull the category name from the database and put it into the stylesheet. So your stylsheet would look something like so:

    body.<?php echo $catgrory_name; ?> {
    background-image:url(“images/<?php echo $category_name; ?>.gif”);
    }

    Then then end user would just have to create images to set as the background that are also named the category’s name. The only problem I forsee with that is if there are names with more than one word and spaces seperating them – that wouldn’t play well with things.

    But anyway, that would work for the category *pages* – but you might have to mess with the idea to get it to work for the different categories on one single page (like on the index page). I think you would have to edit your loop to change the div entry classes to show the category.

    Then, what happens when a post is placed in more than one category? That would be funky to see!

    Anyway, I hope I’m making sense to you.

    And thanks for the stylesheet thing – I’m gonna have to try that out!

    Thread Starter lauch

    (@lauch)

    I actually was thinking for multiple categories, to just display the first one, though that is just a concept at the moment. I’ll take your suggestions into account.

    I’m thinking that I’d have to put all the categories into an inline style sheet. That way, the php could pull all the category names dynamically from the database and create a stylesheet rule from that.

    Something like this:


    <style type="text/css">
    <?php
    while (*categories exist loop*){
    echo .*categoryname*;{
    *insert styling for header here*
    }
    *next category*
    }
    ?>
    </style>

    I obviously didn’t code the php right, but I think that would do it. I’ll work on testing it when I have more time (I’m on vacation for a week starting tomorrow)

    I think the actual category pages would be the easiest to code since the page itself is already passed the category name.

    I think if I really wanted it to work, I could probably place style tags inside the loop and define the CSS directly into the header, but I really hate the way that looks. I believe you agree with me when I like my CSS to be separate from my html separate from my javascript. Style and behavior and content all deserve to be on their own.

    Anyway, thanks for the suggestions. My goal is to have an extremely customizable theme!

    Thread Starter lauch

    (@lauch)

    I forgot one important thing on the stylesheet being in php. You need to alter your .htaccess to tell the server that it’s ok:


    AddType application/x-httpd-php .css
    AddType text/css .css

    The first line is what matters, because you’re telling the server that your php file is a style sheet.

    It seems everybody missed HS’s post about the plugin…

    Thread Starter lauch

    (@lauch)

    Can you link to it for me?

    Thanks!

    Der -yeah – I *did* miss that one! Wow. That makes it a whole bunch easier, doesn’t it?

    I guess I was caught up in the whole “dynamic stylesheet”t hing – I think that’s just awesome, and it could be very useful for some of my client’s sites (who don’t use WordPress).

    Sorry for looking you over, Han!

    Thread Starter lauch

    (@lauch)

    Oh, I’m sorry….I did see his post, but when I looked at the plugin, I didn’t think it was what I was looking for. Does anyone have an example of that plugin being used?

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Category Fashion’ is closed to new replies.

Tags