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
<div id="middle" class="clearfloat">
down to
<?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)
-
<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?!)
-
#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..
