CSS for blog posts not working.

  • Hi there. So i have almost finished design of my new homepage and i am down to editing the wordpress blog posts. I have changed the appearance of the date with ease, however when trying to use the same technique to change the homepage blog posts, the post stays the same, only the text on the page for the blog post does the text change.

    The website in question is https://tebbott.co.uk

    The part of the index.php file that controls my blog posts is:

    <div id="main-col">

     <h1>Welcome..</h1>
     <h2>..to the online presence of <span class="med-highlight">Andrew Tebbott</span>. Creator of websites,  designer of layouts, and lover of well approached typography.  Enjoy your ride through my portfolio and I hope you'll find a reason to <span class="med-highlight">get in touch</span> with me.</h2>

	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>

        <div class="post" id="post-<?php the_ID(); ?>">
				<div class="datebox">
           <p class="day"><?php the_time('dS') ?>

           <p class="month"><?php the_time('M') ?>

           <p class="year"><?php the_time('Y') ?>

        </div>
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<p class="post-text"><?php the_content('Read the rest of this entry &raquo;'); ?>

				<?php the_tags('Tags: ', ', ', ''); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

			</div>

		<?php endwhile; ?>

    The CSS that controls the appearance of the date stamp and the blog post itself is:

    #main-col h1    { font: 24px Georgia, Serif; color: #afafaf; margin: 40px 0px 5px 0px; }
#main-col h2    { font: 16px Georgia, Serif; color: black; margin: 10px 0px 30px 0px; text-align: justify;}
.datebox        { width: 70px; height: 70px; float: left; margin: 10px 30px 10px 0px; background: #09a4de url(/images/latest_background.jpg) repeat; border: 1px solid #0283bc;
                  -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
p.day           { font: Georgia, Serif; font-size: 18px; font-weight: bold; color: white; margin: 2px 0px 0px 15px; }
p.month           { font: Georgia, Serif; text-transform: uppercase; font-size: 18px; font-weight: bold; color: white; margin: 0px 0px 0px 15px; }
p.year          { font: Georgia, Serif; font-size: 18px; font-weight: bold; color: white; margin: 0px 0px 0px 15px; }
.post h2        { font: 24px Georgia, Serif; color: #09a4de; text-decoration: none; font-weight: bold; }
p.post-text     { font: 12px Georgia, Serif; font-weight: bold; color: white; }

Viewing 2 replies - 1 through 2 (of 2 total)

  • What exactly is it that you’re trying to change on the front page?

    Do you use Firefox with the Web Developer’s toolbar? It not, you might want to consider it. You could then edit your CSS in real-time, side-by-side with your index page, and understand which CSS code is controlling which areas of your site.

    The CSS for your body div seems to control the index page post content. If I adjust the body div’s font characteristics, I see your index page’s post content change.

    I don’t see a p.post-text.

    Your .post h2 a seems to control the post title text. I believe this is overriding your .post h2. Actually, wait, I don’t even see a .post h2.

    You may want to spend some time just reworking your style.css so you know what’s controlling what.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS for blog posts not working.’ is closed to new replies.