WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Specific background for posts in specific category! (16 posts)

  1. Florian_discus
    Member
    Posted 1 year ago #

    Hello WordPress Community,

    I need YOUR help. ;)
    I've set up 4 different categories and I do have 4 different backgrounds/headers. With the "style-custom.css" I was able to preselct the background image when one would select a certain category.

    BUT now the tricky part, if a post has a certain category it does not work :(
    throwholics(dot)com <-- can you please check. We are publishing in 4 different categories and would like the article which we post in a certain category to have the corresponding background.

    Do you know the code, if so please let me know how to do that. I could not find a plugin who does that...
    And i assume that it would be the easiest to just do it via a small css code as i did for the categories itself.

    THank you in advance.

    body
    {	background-color:#000;
    	background-image:url(img/3.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;}
    body.category-hammer
    {	background-color:#000;
    	background-image:url(img/4.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;}
    body.category-javelin
    {	background-color:#000;
    	background-image:url(img/2.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;}
    body.category-shot-put
    {	background-color:#000;
    	background-image:url(img/1.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;}
  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If you look at the article tags for the posts, you'll see the specific class you need to use in the CSS - for example:

    <article id="entry-7706" class="post-7706 post type-post status-publish format-standard hentry category-hammer tag-doping tag-hammer tag-kibwe-johnson entry">

    The category-hammer CSS:

    article.category-hammer {
      background-color: red;
    }

    You'll have to add other CSS to fine tune spacing etc.

  3. Florian_discus
    Member
    Posted 1 year ago #

    That was a very fast response! THanks for that.

    Yeah i noticed that as well.

    body.article.category-hammer
    {
    background-color:#000;
    background-image:url(img/4.png);
    background-position:center top;
    background-repeat:no-repeat;
    color:#555;
    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:14px;
    }

    so this i just added to that custom style.css but this does not work...
    I only want if I open an article which is related to that i.e. hammer category the background image of that category should be shown as well. and not only when i select the complete category.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'm not sure I understand what you want, but your CSS is not the same as what I suggested and yours is invalid. article is a tag, not a class on the body tag (which is what your CSS is trying to do). Remove the body tag from your CSS - see if that's what you want.

  5. Florian_discus
    Member
    Posted 1 year ago #

    Maybe it is just hard to explain:
    Ok i gonna try it again ;)

    Did you visit the website i posted in the first post?

    There you can see the default image with discus throwers.
    If one would now click in the menu on a category, for example the hammer.
    Then the background images (Header) changes to hammer throwers.
    Same will happen when one would select shot put or javelin.
    Therefore we do have 4 different categories with 4 different background images(headers).

    What we are still not able to do the following:
    The change in background according to the category works if one selects the specific category. BUT!
    It does not work when one would select and try to read an article.
    Then only the default background with the discus throwers is shown.
    But the background image (header) should change, as it does if one clicks on the certain category, to the according background image.

    MEANING: If one selects a posts which is related to the HAMMER category, than the hammer background image should be shown and not the default one with the discus throwers.

    if i would only put article.categor-hammer and than background image than it would mean that the background of the article will have the background image(header) but the background image of the whole website should change not the one in the back of the article.

    Hope this explanation is clear ;) if not, maybe i can give it a try via skype? or teamviwer ?

    thanks in advance

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I don't think that's possible unless you do further customization and I'm not sure how you would do that - maybe making a custom template for each of those single post categories?

  7. Florian_discus
    Member
    Posted 1 year ago #

    Yeah that's why i came to the forum and hope somebody would be able to help me with that. I just dont understand why it would not be able to work with css.
    When posting as you have seen the category is in the css tags.
    By this it should be possible to generate the specific background...

    custom template for each post category? mhh have to check how to do that..

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  9. Florian_discus
    Member
    Posted 1 year ago #

    I've found this in the forum here:

    <?php if (have_posts()) : ?>
    
    <?php $cat_obj = $wp_query->get_queried_object(); $cat_id = $cat_obj->cat_ID; ?>   
    
    <?php if (in_category('1001') ):
    	  // category 1001 ?>
    	<style type="text/css">
    	body {background-color:#000;background-image:url(/images/background.jpg);background-repeat:repeat;}
    	</style>
    
    <?php elseif (in_category('1002') ):
    	  // category 1002 ?>
    	<style type="text/css">
    	body {background-color:#000;background-image:url(/images/background2.jpg);background-repeat:repeat;}
    	</style>
    
    <?php endif; // end the if, no images for other other categories ?>

    And changed it to:

    <?php if (have_posts()) : ?>
    
    <?php $cat_obj = $wp_query->get_queried_object(); $cat_id = $cat_obj->cat_ID; ?>   
    
    <?php if (in_category('discus') ):
    	  // category discus ?>
    	<style type="text/css">
    body {
    	background-color:#000;
    	background-image:url(img/3.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;
    }
    	</style>
    <?php elseif (in_category('hammer') ):
    	  // category hammer ?>
    	<style type="text/css">
    body {
    	background-color:#000;
    	background-image:url(img/4.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;
    }
    	</style>
    <?php elseif (in_category('javelin') ):
    	  // category javelin ?>
    	<style type="text/css">
    body {
    	background-color:#000;
    	background-image:url(img/2.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;
    }
    	</style>
    <?php elseif (in_category('shot-put') ):
    	  // category shot-put ?>
    	<style type="text/css">
    body {
    	background-color:#000;
    	background-image:url(img/1.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;
    }
    	</style>
    
    <?php endif; // end the if, no images for other other categories ?>

    But unfortunately it does not work so far :P

    Do you think it can be changed that it will work?
    I do have this code in styleshee-custom

    maybe i have to put it some place else??

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I've never known php code to work in a CSS file :). Typically calls to stylesheets go in the header.php file.

  11. Florian_discus
    Member
    Posted 1 year ago #

    Yeah youre right ;)
    does it matter at which position in the header.php i would place this code?

    Have you seen that code before? do you think it will work?

  12. Florian_discus
    Member
    Posted 1 year ago #

    Just put it in the end of the header.php and received this error:

    Parse error: syntax error, unexpected $end in /var/www/web102/html/wp-content/themes/sprout11/header.php on line 111

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I really don't know. I'd actually suggest that you contact the theme developers for help - http://themeforest.net/item/sprout-magazine-blog-wordpress-theme/1779701

    These forums don't support commercial themes - partly because we do not have access to them for testing or use.

  14. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    would like the article which we post in a certain category to have the corresponding background.

    simple, because the 'post_class()' outputs the .category-{whatever} already into the article tag.
    the formatting:
    article.category-hammer { background-image: url(img/4.png); }
    should do it.

    If one selects a posts which is related to the HAMMER category, than the hammer background image should be shown and not the default one with the discus throwers.

    if you need to have a category specific css class (for example something like .category-{whatever}) in the body_class() output in single posts of a category, you could try to add a filter functions to functions.php of your theme;

    http://codex.wordpress.org/Function_Reference/body_class

    example:

    add_filter( 'body_class', 'single_post_category_body_class' );
    
    function single_post_category_body_class( $classes ) {
      if( is_single() ) {
        foreach( get_the_category( $post->ID ) as $cat ) $classes[] = 'category-' . $cat->slug;
      }
    return $classes;
    }

    the corresponding formatting:
    body.category-hammer { background-image: url(img/4.png); }
    should do it (check the exact image names if you want different background images for haeder and article).

    caveat:
    the result will be random because some single posts seem to be using more than one of those specific categories.

    Yeah that's why i came to the forum and hope somebody would be able to help me with that.

    as you are working with a commercial theme, it would be the best if you contact the theme's developer for support (via themeforest ?)

  15. Florian_discus
    Member
    Posted 1 year ago #

    alchymyth thank you for your input:

    simple, because the 'post_class()' outputs the .category-{whatever} already into the article tag.
    the formatting:
    article.category-hammer { background-image: url(img/4.png); }
    should do it.

    This would not do it because it will create a background image in the article not from the whole page.
    I tried that already ;)
    But the background image of the body should change according to the related category.

    Thanks for your caveat ;), I knew there was something random comming if one would tag more than one category.
    The one with your functions filter thing i need to try that.

    add_filter( 'body_class', 'single_post_category_body_class' );
    
    function single_post_category_body_class( $classes ) {
      if( is_single() ) {
        foreach( get_the_category( $post->ID ) as $cat ) $classes[] = 'category-' . $cat->slug;
      }
    return $classes;
    }

    So i would put this into the functions.php and in the stylesheet-custom.css I would need to add the different background according to the filtered categories?
    Did i understand it correct?

  16. Florian_discus
    Member
    Posted 12 months ago #

    Thank you so much!!!
    The combination of the following code into the style-custom.css

    body
    {	background-color:#000;
    	background-image:url(img/3.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;}
    body.category-hammer
    {	background-color:#000;
    	background-image:url(img/4.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;}
    body.category-javelin
    {	background-color:#000;
    	background-image:url(img/2.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;}
    body.category-shot-put
    {	background-color:#000;
    	background-image:url(img/1.png);
    	background-position:center top;
    	background-repeat:no-repeat;
    	color:#555;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	font-size:14px;}

    With your filter code into the functions.php

    add_filter( 'body_class', 'single_post_category_body_class' );
    
    function single_post_category_body_class( $classes ) {
      if( is_single() ) {
        foreach( get_the_category( $post->ID ) as $cat ) $classes[] = 'category-' . $cat->slug;
      }
    return $classes;
    }

    Did exactly what it should have done. Also its not working random as you thought, it always takes alphabetically the last category if there are more than 1 categories.
    But i dont mind that. At least the posts are working as they should do!!!

Topic Closed

This topic has been closed to new replies.

About this Topic