Forums

Help with basics of styling PHP + CSS... (4 posts)

  1. ChrisWeiser
    Member
    Posted 2 years ago #

    I am relatively new to WordPress and am probably missing the basics of styling with CSS under a PHP framework, so I'm asking for some clarification on why my CSS code isn't working. What I want is to style each post to look like it's contained within a box with a drop shadow. I'm trying to do it the tried-and-true CSS way of styling the ".post" class to have a background image slice with repeat-y turned on, and then a top div and a bottom div, each with a "beginning" and "ending" background image to complete the look of the box. However, at best I can sometimes get the ".post" repeat-y section to work, but my other two divs won't show. I've run into this problem before with the Header, but this time I don't know what PHP to add to make WordPress "see" it.

    This is my HTML section of "page.php":

    <?php get_header(); ?>

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

    <!-- This is where I'm having trouble... -->

    <div class="post" id="post-<?php the_ID(); ?>">
    <div class="post-top" id="post-<?php the_ID(); ?>"></div>

    <h2><?php the_title(); ?></h2>
    <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
    <?php wp_link_pages(array('before' => '<p>Pages: ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

    <div class="post-bottom" id="post-<?php the_ID(); ?>"></div>
    </div>
    <?php endwhile; endif; ?>
    <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

    <!-- End trouble -->

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    So as you can see, I have three divs: post, post-top, and post-bottom, the latter two within post. They also all have their own classes (.post-top, etc), styled like so in CSS:

    .post {background-image: url(img/post.png)}
    .post-top { background-image: url(img/post-top.png);}
    .post-bottom { background-image: url(img/post-bottom.png);}

    I had CSS code to repeat-y on the .post background, but have since removed it all since little seems to be working. What I'm most concerned about is getting the top and bottom divs to show. I know there must be something I am fundamentally missing about coding for WordPress and PHP, so if someone could clue me in, that would be great.

    Thanks...

  2. EMG
    Member
    Posted 2 years ago #

    Provide a link to your site please?

    Also, what theme are you working off of?

    As far as I know, I have done what you have done and didn't have to bother with any particular WP-specific PHP hooks to make them appear so I am curious as to why yours aren't appearing.

    Additionally, you don't need the id="post-<?php the_ID(); ?> on your post-top and post-bottom divs.

  3. ChrisWeiser
    Member
    Posted 2 years ago #

    http://www.weiserdesign.com/blog <-- using this as a development area currently.

    I am working off of the "Starkers" theme, which reduces everything down to the basics. I am working from a tutorial on Chris Coyier's website: http://css-tricks.com/video-screencasts/26-designing-for-wordpress-part-two/

  4. ChrisWeiser
    Member
    Posted 2 years ago #

    Bump? Really could use some help with this.

Topic Closed

This topic has been closed to new replies.

About this Topic