Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    6 Headlines in a PHP list, each with their own shade of color?

    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.

    Code:
    <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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    perfectheat (06-01-2010)

  • #3
    New Coder
    Join Date
    Apr 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Sure! Here you have the generated HTML.

    Code:
    <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/showthre...293#post960293 If you have a cluel. Thanks again.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    For modern browsers, you could use something like
    Code:
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    perfectheat (06-01-2010)

  • #5
    New Coder
    Join Date
    Apr 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    That seems to work! Thank you so much for this. Have a nice day.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •