WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] link does not change color (4 posts)

  1. davy_yg
    Member
    Posted 2 years ago #

    index.php

    <div id="content">
        <div id="main">
    	<h4>Latest News</h4>
    		<p style="border-bottom: 2px dotted #FF0000; width: 620px;"></p><br />
    		<div class="post">
    
    	<?php if (have_posts()) : ?>
    		<?php while (have_posts()) : the_post(); ?>
    
                <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/pic1.png" ALT="picture1" ALIGN=LEFT><div id="ptitle"><?php the_title(); ?><font color="black"> - <?php the_time('d'); ?>&nbsp<?php the_time('M'); ?>&nbsp<?php the_time('Y'); ?></font></div>
    
                <p><?php the_content(''); ?>... <a href="#">read more ></a></p>
    <p style="border-bottom: 2px dotted #FF0000; width: 700px;"></p><br />

    style.css

    #content #main {
    	width: 620px; float: left;
    	}
    
    #content #main .post {
    	position: relative; margin: 0 0 60px 40px; padding: 0 0 0 0; overflow: hidden;
    	}
    #content #main h4 {
    	margin: 0 0 0px 40px;
    	font: 14px Lucida Grande, Lucida Sans Unicode, Helvetica, Sans-Serif; letter-spacing: normal;
    	}
    #content #main .post p {
    	font:Arial, Helvetica, sans-serif; font-size: 12px;
    	}
    
    #content #main .post #ptitle {
    	font:Arial, Helvetica, sans-serif; font-size: 14px; color:red;
    	}
    
    #content #main .post #pdate {
    	font:Arial, Helvetica, sans-serif; font-size: 14px;
    	}
    
    #content #main .post image {
    	margin: 0 10px 0 0;
    	}
    #main .post p a:link{
    	font:Arial, Helvetica, sans-serif; font-size: 12px; color: ed;
    	text-decoration: none;
    	}

    I wonder why the read more > which suppose to be red color with no underline still remain blue color with underline ?

  2. Thomas Clausen
    Member
    Posted 2 years ago #

    You forgot an "r":
    color: ed;

  3. davy_yg
    Member
    Posted 2 years ago #

    Well,

    I actually already have color: red; I think I copas incorrecly.

    This is what I already have:

    #main .post p a:link{
    font:Arial, Helvetica, sans-serif; font-size: 12px; color: red;
    text-decoration: none;
    }
  4. Thomas Clausen
    Member
    Posted 2 years ago #

    Instead of a:link I would just use a, because a:link only targets unvisited links.

    For example:

    #main .post p a {
    font:Arial, Helvetica, sans-serif; font-size: 12px; color: red;
    text-decoration: none;
    }
    #main .post p a:hover {
    text-decoration: underline;
    }

    See http://www.w3schools.com/css/css_pseudo_classes.asp for more information.

    I also noticed in your index.php file you have the following inline styles applied:

    <h4>Latest News</h4>
    <p style="border-bottom: 2px dotted #FF0000; width: 620px;"></p><br />

    I would just change the HTML to:
    `<h4>Latest News</h4>'
    And then change the appereance in the stylesheet with:
    #content #main h4 { width: 620px; border-bottom: 2px dotted #FF0000; }
    and control the placement of the dotted line with padding and margin.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags