Re: custom rollover on category bar. Image instead of colour block. :: Reply by Joern

I explain now how to display an image on roll over with the mouse in Arthemia’s category bar.

BACKUP index.php and style.css FIRST !!
I modified the category query in div id="middle" in some places, so you have to replace the full code from

Code:

<div id="middle" class="clearfloat">

down to

Code:

<?php $i++; ?>

Code will follow later, going to tell you what it does:

In $display_categories = array(… you have to put your categories as before, 5 or a multiple of 5, you have 25 categories listed.

The line with $theCatSlug = get_term_by gets the slug of your categories to link each one with an image. These 25 images should be named with the slug of the category plus .jpg extension, ie: dietfitness.jpg for Diet & Fitness category or mens.jpg for your Male Grooming category. You can find the slug in edit categories or in the link to your Archive of that category, like …hk.com/category/mens/
now – that’s your job to create 25 images in the size of 184pxx80px. These images have to be in a new folder (cats) behind themes folder in images/cats/ (content/themes/arthemia/images/cats)
No image for a category means that place becomes blank on hover as in demo link in previous post.
Back to index.php, I don not use

div id="cat-<?php echo $i; ..

but

div id="cat-<?php if( $odd = $i%2 ) ..

this will just show div id="cat-odd" or div id="cat-even" and makes your style.css easier, no list of all categories with different styling anymore.
The background (category) images are loaded straight but with a ;background-position: -200px, thus invisible. The entry in style.css .category:hover {background-position: 0 0 !important; makes them visible on hover.
I used Chantel’s stylesheet and changed not much, she just has to replace all from

#middle {

down to

#front-list {
now the replacement code for index.php (BACKUP FIRST)

–

Code:

<div id="middle" class="clearfloat">

   <img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/category.png" class="clearfloat" alt="" />
   <?php $display_categories = array(3,4,5,8,10,11,16,20,22,32); $i = 1;  //please put here your own category IDs !!!
   foreach ($display_categories as $dcategory) { ?>

      <?php $theCatSlug = get_term_by( 'ID', $dcategory, 'category' );
         $theCatSlug = $theCatSlug->slug; ?>

<div id="cat-<?php if( $odd = $i%2 ) { echo 'odd'; } else { echo 'even'; } ?>" class="category" style="background-image: url(<?php echo bloginfo('template_url'); ?>/images/cats/<?php echo $theCatSlug; ?>.jpg); background-repeat: no-repeat;background-position: -200px 0;z-index:0;cursor:pointer;" onclick="window.location.href='<?php echo get_category_link($dcategory);?>'" title="Go to <?php echo get_cat_name( $dcategory ); ?>" >

      <a class="overlay" href="<?php echo get_category_link($dcategory);?>">
         <span class="cat_title"><?php echo get_cat_name( $dcategory ); ?></span>
            <?php echo category_description($dcategory); ?>
            </a>

</div>
   <?php $i++; ?>

–

and the modified part to replace in style.css (BACKUP?!)

–

Code:

#middle {
   width: 920px;
   background:#fff;
   float:right;
   padding:10px;
   margin:10px 0;
   }

.category {
   width:164px;
   height:70px;  /* new */
   float:left;
   border-top:8px solid #333;
   margin:0px;
   padding:5px 10px 10px 10px;
   }
.category:hover {
   background-position: 0 0 !important;
   font-size:0.001em;
   }

.category p {
   margin:0;
   }

#cat-odd{border-top:8px solid #333333;}
#cat-even{border-top:8px solid #FF0033;}

/* not needed, replaced by #cat-odd and #cat-even just below !!
#cat-1, #cat-3, #cat-5, #cat-7, #cat-9, #cat-11, #cat-13, #cat-15, #cat-17, #cat-19, #cat-21, #cat-23, #cat-25{border-top:8px solid #333333;}
#cat-2, #cat-4, #cat-6, #cat-8, #cat-10, #cat-12, #cat-14, #cat-16, #cat-18, #cat-20, #cat-22, #cat-24{border-top:8px solid #FF0033;}
*/

#cat-odd{
   border-top:8px solid #333333;
   }
#cat-even{
   border-top:8px solid #FF0033;
   }

.category span.cat_title, #front-popular h3, #front-list .cat_title, #archive .cat_title {
   text-transform:lowercase;
   margin:0;
   font-weight:bold;
   font-size:1.5em District;
   letter-spacing:-0.05em;
   }

#front-popular h3 {
   color:#fff;
   }

.category a {
   color:#333;
   display:block;
   background:none;
   }

a.overlay:hover {
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}
/* commented out, not needed because .category:hover makes background image visible
#cat-1:hover, #cat-3:hover, #cat-5:hover, #cat-7:hover, #cat-9:hover, #cat-11:hover, #cat-13:hover, #cat-15:hover, #cat-17:hover, #cat-19:hover, #cat-21:hover, #cat-23:hover {background:#333333; color:#fff; }
#cat-2:hover, #cat-4:hover, #cat-6:hover, #cat-8:hover, #cat-10:hover, #cat-12:hover, #cat-14:hover, #cat-16:hover, #cat-18:hover, #cat-20:hover, #cat-22:hover, #cat-24:hover {background:#FF0033; color:#fff; }
#cat-1:hover a, #cat-3:hover a, #cat-5:hover a,  #cat-7:hover a, #cat-9:hover a, #cat-11:hover a, #cat-13:hover a, #cat-15:hover a, #cat-17:hover a, #cat-19:hover a, #cat-21:hover a, #cat-23:hover a {background:#333333; color:#fff; }
#cat-2:hover a, #cat-4:hover a, #cat-6:hover a, #cat-8:hover a, #cat-10:hover a, #cat-12:hover a, #cat-14:hover a, #cat-16:hover a, #cat-18:hover a, #cat-20:hover a, #cat-22:hover a, #cat-24:hover a {background:#FF0033; color:#fff; }
*/
#bottom {
   width: 940px;
   }

#front-list {
   width:590px;
   background:#fff;
   padding:10px;
   font-size:1.5em District;
   line-height:1.75em;
   float:left;
   }

–

If something is not working, come back ’n ask, happy day..
____________________
you find me on Google+, Twitter and Facebook

(von: Joern)

Autor: Joern

Du findest mich auch auf Twitter und Facebook!

go41