WordPress.org

1. davy_yg
   Member
   Posted 4 months 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 4 months ago #

   You forgot an "r":
   color: ed;

3. davy_yg
   Member
   Posted 4 months 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 4 months 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.

Reply

You must log in to post.