...

View Full Version : 6 Headlines in a PHP list, each with their own shade of color?



perfectheat
05-31-2010, 05:42 PM
Hi. I have a list of 6 headlines on home.php that links to another page on my site. Is there anyway I could display the 6 headlines is different shades of gray? Meaning the newest headline on top in almost pure white, the second newest in a light gray, and so on to a dark gray on the last headline? Would be great if I could just pick 6 shades of gray and assign them to their own line.



<div class="content-headlines">
<?php query_posts('showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a><br />
<?php endwhile;?>
</div>


Thank you for your help! Have a nice day.

abduraooft
06-01-2010, 08:55 AM
s there anyway I could display the 6 headlines is different shades of gray? Could you please show us the generated html of the above code or a link to your page?

perfectheat
06-01-2010, 02:28 PM
Sure! Here you have the generated HTML.



<div class="content-headlines">
<a href="http://xxxxxx/blog/?p=11" rel="bookmark" title="Permanent Link to Tropical Gangsta @ This is a Test">Tropical Gangsta @ This is a Test</a><br />
<a href="http://xxxxxx/blog/?p=9" rel="bookmark" title="Permanent Link to Master Collection 2010">Master Collection 2010</a><br />
<a href="http://xxxxxx/blog/?p=7" rel="bookmark" title="Permanent Link to Who let the dogz out?">Who let the dogz out?</a><br />
<a href="http://xxxxxx/blog/?p=6" rel="bookmark" title="Permanent Link to Amazonian Dreams New this Week!">Amazonian Dreams New this Week!</a><br />
<a href="http://xxxxxx/blog/?p=5" rel="bookmark" title="Permanent Link to Thunder Storm Whoop Whoop">Thunder Storm Whoop Whoop</a><br />
<a href="http://xxxxxx/blog/?p=3" rel="bookmark" title="Permanent Link to Another Headline Test Hello Hello">Another Headline Test Hello Hello</a><br />
</div>


Thank you for taking your time!

I also had another question related to where the headlines link to over in PHP: http://www.codingforums.com/showthread.php?p=960293#post960293 If you have a cluel. Thanks again.

abduraooft
06-01-2010, 04:06 PM
For modern browsers, you could use something like

div.content-headlines :nth-child(1){
color:#888;
}
div.content-headlines :nth-child(3){
color:#777;
}
div.content-headlines :nth-child(5){
color:#666;
}
div.content-headlines :nth-child(7){
color:#555;
}
div.content-headlines :nth-child(9){
color:#444;
}
div.content-headlines :nth-child(11){
color:#333;
}
(See http://reference.sitepoint.com/css/pseudoclass-nthchild)
Or try to add a sequence of class attributes in loop, like title1,title2,...title6 and then use simple class selectors of CSS.

perfectheat
06-01-2010, 08:48 PM
That seems to work! Thank you so much for this. Have a nice day.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum