WordPress.org

1. goshko
   Member
   Posted 1 year ago #

   hey there guys,

   i'm working on my new website, and was wondering if it is possible to have different background images for the footer on different category pages? the content of the footer will remain unchanged, just the background should be different. any ideas on how to accomplish that?

2. David Gwyer
   Member
   Posted 1 year ago #

   You could try editing the footer.php theme file and change the footer CSS depending on the page category being viewed using the is_category function.

   See here for more details:

   http://codex.wordpress.org/Conditional_Tags#A_Category_Page

3. alchymyth
   The Sweeper
   Posted 1 year ago #

   you could use 'body_class()'
   http://codex.wordpress.org/Template_Tags/body_class
   to generate extra classes, which you might be able to use in the styles of the footer;

   or:

   you could use conditional statements to create embedded styles in hedader.php.

   http://codex.wordpress.org/Conditional_Tags

   is_category()
   in_category()

   just as an example for a possible structure - added to header.php, before </head> :

   <style type="text/css" media="screen">
   
   <?php if ( is_category('cat-name1') ) { ?>
   #footer { background: #111111 url("<?php bloginfo('stylesheet_directory'); ?>/images/cat1_img.jpg") center top no-repeat; }
   <?php } elseif( is_category('cat-name2') ) { ?>
   #footer { background: #222222 url("<?php bloginfo('stylesheet_directory'); ?>/images/cat2_img.jpg") center top no-repeat; }
   <?php else { ?>
   #footer { background: #333333 url("<?php bloginfo('stylesheet_directory'); ?>/images/default_img.jpg") center top no-repeat; }
   <?php } ?>
   </style>

   all depending on the html structure of your theme, and the css id or classes of your footer.

   if you use 'is_category()' it will only have effect in the category archives;
   if you use 'in_category()' it will have effect in most templates, but you need to consider the if/elseif/else more carefully.

4. goshko
   Member
   Posted 1 year ago #

   i see, i think i'll be able to figure it from here, thanks a lot guys :)

5. goshko
   Member
   Posted 1 year ago #

   here is a working variant of the code:
   

   <style type="text/css" media="screen">
   <?php if ( in_category('cat1') ) { ?>
   #footer { background: #fff url("<?php bloginfo('stylesheet_directory'); ?>/images/cat1_img.jpg") center top no-repeat; }
   <?php } elseif( in_category('cat2') ) { ?>
   #footer { background: #ccc url("<?php bloginfo('stylesheet_directory'); ?>/images/cat2_img.jpg") center top no-repeat; }
   <?php } else { ?>
   #footer { background: #ddd url("<?php bloginfo('stylesheet_directory'); ?>/images/cat3_img.jpg") center top no-repeat; }
   <?php } ?>
   </style>

Topic Closed

This topic has been closed to new replies.