php - different colours for diffrent articles using a:hover in Wordpress -
i'm trying assign 3 different colours 3 diffrent articles on single page using a:hover in wordpress.
this site http://paragrams.wpshower.com/
at present articles turn pale yellow on a:hover, i'm trying create different colours each article (for example first article yellow, second article red, third blue , on).
below php & css a:hover @ present. assume need wrap each thumb id in different div , specify colour in css? . . . . i'm quite new php, , can't quite head round . thanks
php
<ul class="mcol"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <li class="article"> <?php if ( has_post_thumbnail() ) { ?> <?php $imgsrcparam = array( 'alt' => trim(strip_tags( $post- >post_excerpt )), 'title' => trim(strip_tags( $post- >post_title )), ); $thumbid = get_the_post_thumbnail( $post->id, 'background', $imgsrcparam ); ?> <div><a href="<?php the_permalink() ?>" class="preview"><?php echo "$thumbid"; ?></a></div> <?php } ?> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> and css
.li_container { background-attachment: scroll; background-image: url(images/main-bg.gif); background-repeat: repeat-y; background-position: left top; } .li_container .article:hover { background-color:#57bfeb; } this js
# * splits <ul>/<ol>-list equal-sized columns. # * # * requirements: # * <ul> # * <li>"ul" or "ol" element must styled margin</li> # * </ul> # * # * @see http://www.codeasily.com/jquery/multi-column-list-with-jquery # */ jquery.fn.makeacolumnlists = function(settings){ settings = jquery.extend({ cols: 3, // set number of columns colwidth: 0, // set width each column or leave 0 auto width equalheight: 'li', // can false, 'ul', 'ol', 'li' startn: 1 // first number on ordered list }, settings); if(jquery('> li', this)) { this.each(function(y) { var y=jquery('.li_container').size(), height = 0, maxheight = 0, t = jquery(this), classn = t.attr('class'), listsize = jquery('> li', this).size(), percol = math.ceil(listsize/settings.cols), contw = t.width(), bl = ( isnan(parseint(t.css('borderleftwidth'),10)) ? 0 : parseint(t.css('borderleftwidth'),10) ), br = ( isnan(parseint(t.css('borderrightwidth'),10)) ? 0 : parseint(t.css('borderrightwidth'),10) ), pl = parseint(t.css('paddingleft'),10), pr = parseint(t.css('paddingright'),10), ml = parseint(t.css('marginleft'),10), mr = parseint(t.css('marginright'),10), col_width = math.floor((contw - (settings.cols-1)*(bl+br+pl+pr+ml+mr))/settings.cols); if (settings.colwidth) { col_width = settings.colwidth; } var colnum=1, percol2=percol; jquery(this).addclass('li_cont1').wrap('<div id="li_container' + (++y) + '" class="li_container"></div>'); (var i=0; i<=listsize; i++) { if (colnum > settings.cols) colnum = 1; var eq = jquery('> li:eq('+i+')',this); eq.addclass('li_col'+colnum); colnum++; //if(i>=percol2) { percol2+=percol; colnum++; } //var eq = jquery('> li:eq('+i+')',this); //eq.addclass('li_col'+ colnum); //if(jquery(this).is('ol')){eq.attr('value', ''+(i+settings.startn))+'';} } jquery(this).css({cssfloat:'left', width:''+col_width+'px'}); (colnum=2; colnum<=settings.cols; colnum++) { if(jquery(this).is('ol')) { jquery('li.li_col'+ colnum, this).appendto('#li_container' + y).wrapall('<ol class="li_cont'+colnum +' ' + classn + '" style="float:left; width: '+col_width+'px;"></ol>'); } else { jquery('li.li_col'+ colnum, this).appendto('#li_container' + y).wrapall('<ul class="li_cont'+colnum +' ' + classn + '" style="float:left; width: '+col_width+'px;"></ul>'); } } if (settings.equalheight=='li') { (colnum=1; colnum<=settings.cols; colnum++) { jquery('#li_container'+ y +' li').each(function() { var e = jquery(this); var border_top = ( isnan(parseint(e.css('bordertopwidth'),10)) ? 0 : parseint(e.css('bordertopwidth'),10) ); var border_bottom = ( isnan(parseint(e.css('borderbottomwidth'),10)) ? 0 : parseint(e.css('borderbottomwidth'),10) ); height = e.height() + parseint(e.css('paddingtop'), 10) + parseint(e.css('paddingbottom'), 10) + border_top + border_bottom; maxheight = (height > maxheight) ? height : maxheight; }); } (colnum=1; colnum<=settings.cols; colnum++) { var eh = jquery('#li_container'+ y +' li'); var border_top = ( isnan(parseint(eh.css('bordertopwidth'),10)) ? 0 : parseint(eh.css('bordertopwidth'),10) ); var border_bottom = ( isnan(parseint(eh.css('borderbottomwidth'),10)) ? 0 : parseint(eh.css('borderbottomwidth'),10) ); mh = maxheight - (parseint(eh.css('paddingtop'), 10) + parseint(eh.css('paddingbottom'), 10) + border_top + border_bottom ); eh.height(mh); } } else if (settings.equalheight=='ul' || settings.equalheight=='ol') { (colnum=1; colnum<=settings.cols; colnum++) { jquery('#li_container'+ y +' .li_cont'+colnum).each(function() { var e = jquery(this); var border_top = ( isnan(parseint(e.css('bordertopwidth'),10)) ? 0 : parseint(e.css('bordertopwidth'),10) ); var border_bottom = ( isnan(parseint(e.css('borderbottomwidth'),10)) ? 0 : parseint(e.css('borderbottomwidth'),10) ); height = e.height() + parseint(e.css('paddingtop'), 10) + parseint(e.css('paddingbottom'), 10) + border_top + border_bottom; maxheight = (height > maxheight) ? height : maxheight; }); } (colnum=1; colnum<=settings.cols; colnum++) { var eh = jquery('#li_container'+ y +' .li_cont'+colnum); var border_top = ( isnan(parseint(eh.css('bordertopwidth'),10)) ? 0 : parseint(eh.css('bordertopwidth'),10) ); var border_bottom = ( isnan(parseint(eh.css('borderbottomwidth'),10)) ? 0 : parseint(eh.css('borderbottomwidth'),10) ); mh = maxheight - (parseint(eh.css('paddingtop'), 10) + parseint(eh.css('paddingbottom'), 10) + border_top + border_bottom ); /*eh.height(mh);*/ } } jquery('#li_container' + y).append('<div style="clear:both; overflow:hidden; height:0px;"></div>'); }); } } jquery.fn.uncolumnlists = function(){ jquery('.li_cont1').each(function(i) { var onecolsize = jquery('#li_container' + (++i) + ' .li_cont1 > li').size(); if(jquery('#li_container' + + ' .li_cont1').is('ul')) { jquery('#li_container' + + ' > ul > li').appendto('#li_container' + + ' ul:first'); (var j=1; j<=onecolsize; j++) { jquery('#li_container' + + ' ul:first li').removeattr('class').removeattr('style'); } jquery('#li_container' + + ' ul:first').removeattr('style').removeclass('li_cont1').insertbefore('#li_container' + i); } else { jquery('#li_container' + + ' > ol > li').appendto('#li_container' + + ' ol:first'); (var j=1; j<=onecolsize; j++) { jquery('#li_container' + + ' ol:first li').removeattr('class').removeattr('style'); } jquery('#li_container' + + ' ol:first').removeattr('style').removeclass('li_cont1').insertbefore('#li_container' + i); } jquery('#li_container' + i).remove(); }); }
you wouldn't need fancy divs; give each li tag unique class, , specify class colors in css.
from code, change line
<li class="article"> to
<?php switch($post->id) { case 1: $class = 'yellow'; break; case 2: $class = 'blue'; break; case 3: $class = 'green'; break; } ?> <li class="article <?php echo $class; ?>"> this output class='article yellow' first article, class='article blue' second, etc. can make work changing css follows:
.li_container .article.yellow:hover { background-color:#57bfeb; } .li_container .article.green:hover { background-color:green; } .li_container .article.blue:hover { background-color:blue; } if want fancy, change switch($post->id) switch(mod($post->id,3)) lots of color changing.
Comments
Post a Comment