whats happening with my index page?

Question

I'm working on my first wordpress blog site and I think I'm doing pretty good. This is my site so far but I need some help with a couple things as I'm not sure why this is happening. I've styled my blog the way I want to (with the clickable title and the dark red background for the "POSTED ON:" date stamp, however when I styled that, ALL my pages got that styling too (I only want that styling on the blog not).I want my pages to just look like regular pages. I understand CSS & HTML, and a SMALL bit of PHP but I'm not understanding why my index is picking up that styling. I do understand, through using firebug, that the styling class is the same as the blog posts but I don't want that. How do I change it is the only code on my index page is this...

<div id="main">
        <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'page' ); ?>
        <?php endwhile; // end of the loop. ?>
</div><!-- #main -->

I don't understand where it's picking the styling up and which php page to change it on. If anyone can help me I'd appreciate it.

@Brad Farleigh (or really anyone who can help me):

I made a copy of the index.php page and called is page.php

PAGE.PHP

<div id="main">

        <h1 class="entry-title"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>


    <?php if (have_posts()) : ?>
               <?php while (have_posts()) : the_post(); ?>    
               <?php the_content(); ?>
               <?php endwhile; ?>
     <?php endif; ?>

</div>

A referenced page in the index page like this.

<div id="main">


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

                <?php get_template_part( 'page' ); ?>


                <?php endwhile; // end of the loop. ?>


        </div><!-- #main -->

So my pages seem to be working the way I want them to. Calling the content and titles, however now when I got to my blog it's all messed up. Understandably content-page.php has to be called from somewhere but where?

I very much appreciate the help.

Answer 1

I think you just need to add your body "blog" class before your own css style like below:

.blog .entry-subtitle {
width: 100%;
height: 36px;
line-height: 36px;
letter-spacing: 1px;
color: white;
font-weight: normal;
font-size: 1em;
text-indent: 15px;
margin-top: -10px;
background-color: #761616;
text-transform: uppercase;
}

It should works.

Answer 2

By default wordpress will display posts and pages based on the layout defined in index.php but you can override these using the template heirarchy.

The wordpress template heirarchy is best explained here. Also, This is a great diagram which shows you what templates control website components.

You can check what page template can have control over a page by using firebug to inspect the class on your tag. For example your "wine law" page body tag currently has the class of "page page-id-67 page-template-default single-author" which shows that you could customise the layout using the page.php file (which would effect all 'pages'), or even create a page-67.php file which would control that page only, as "67" is the page ID.

To answer your question - you could duplicate the index.php file (it'll depend on your template though) and rename it 'page.php' then remove the part of the code that displays the section which is showing the date.

I hope that helps!

-Brad