Full-page backgrounds for posts with different categories

  • Resolved thesimling

    (@thesimling)


    14 years, 4 months ago

    PRECURSOR: I am not experienced with wordpress. So in your answer, I would beg of you to tell me exactly which files to edit in the Twenty Ten Theme and WHERE to put the code you’ve suggested (which is what has stopped me finding a solution so far!)

    Hi, and thanks for reading my thread.

    I have been trying to do something on my blog but I don’t know how – I have previously searched but all of the answers have been far to complicated for me. I have bought for “Dummies” books but who knows what dummies they’re on about because I’m no idiot and I didn’t get what they were saying at all!

    I’ll use an example to explain my problem first: I have two categories, apples and lemons. When I have a post in the apples category and I click it, so it goes onto its own page, I want the background to be of apples (a picture on my computer, not uploaded yet because I don’t know where to put it). I also want the Apples category page to have an apples background. I also want this to happen with my lemons category.
    I don’t want it to be the background of where the text goes, I mean the full-page background. I am working with the Twenty Ten theme.

    I will only be able to follow your instructions if you explain very clearly (as I said above) this means: The FILE NAME/S which I should edit, the EXACT code I should put in and EXACTLY WHERE (as in below what, how much of a gap, etc) in the files I should put it.

    Thanks for your help, Kieran.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael

    (@alchymyth)

    14 years, 4 months ago

    use the existing body_class() http://codex.wordpress.org/Function_Reference/body_class output to style the backgrounds;

    for instancde, a category archive of the category ‘apples’ will have a css class of .category-apples

    therefore you would need to add something like this to style.css:

    body.category-apples { background........ }

    http://codex.wordpress.org/Editing_Files

    http://www.w3schools.com/css/css_background.asp

    btw:
    please consider to create a child theme http://codex.wordpress.org/Child_Themes to work with, instead of editing Twenty Ten directly. this will help to keep any customisations during the next upgrade.

    Thread Starter thesimling

    (@thesimling)

    14 years, 4 months ago

    I don’t get any of that. Where in style.css do I add that piece of code?

    And doesn’t that only change the Category Archive? I also want every post under that category too? :S

    ALSO, where do I put this image?

    Michael

    (@alchymyth)

    14 years, 4 months ago

    Where in style.css do I add that piece of code?

    anywhere within the syntax rules for css.

    ALSO, where do I put this image?

    images for css backgrounds would generally be saved in the /images folder of the theme.

    I also want every post under that category too?

    single posts don’t have a category related css class in the body_class; in this case you will need to expand the body_class, for instance by editing this line in header.php:

    <body <?php body_class(); ?>>

    into:

    <body <?php if(is_single()) { $post_cats = get_the_category($post->ID); foreach($post_cats as $cat) { $cat_class[] = 'category-'.$cat->slug; };}; body_class($cat_class); ?>>

    this should give you the needed css classes for your background styling.

    to catch up with css, check http://www.w3schools.com/css/

    Thread Starter thesimling

    (@thesimling)

    14 years, 4 months ago

    OK… I’ve done the bottom bit you described.

    I don’t know syntax rules for CSS, as I said… I really don’t know this other language, I need SIMPLE instructions. I know it’s hard dealing with someone like me who doesn’t really understand but it’s impossible for me to comprehend where to put this, I just need “below” something.

    Also, you said ‘{ background……..’

    What exactly do I put after background? Space then colon then space, or what?

    Thanks for trying to help me!

    Michael

    (@alchymyth)

    14 years, 4 months ago

    What exactly do I put after background?

    I already gave you a link to the css tutorial for background css – you need to do the application and learning 😉

    I don’t know syntax rules for CSS

    this forum is not for teaching basics in css; work through a tutorial…

    Thread Starter thesimling

    (@thesimling)

    14 years, 4 months ago

    I don’t really want to know basics for CSS though, I just want to know where to put this piece of code? :S

    I just want to know if it’s background.trhoiego.jpg or background:ehioehg.jpg ??

    Thread Starter thesimling

    (@thesimling)

    14 years, 4 months ago

    Well, my close friend (also an experienced web designer) decided that he would spare me the gruesome tutorials and just tell me where the code needed to go. I worked the rest out from then on.

    Thanks for the codes.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Full-page backgrounds for posts with different categories’ is closed to new replies.