WordPress.org

Forums

SuperSlick
Can't add a header, background, and footer to a column (3 posts)

  1. oxoxTali
    Member
    Posted 2 years ago #

    So here is a link to my blog: http://oxoxtali.com

    What I'm trying to do is add background, header, and footer images to my blog column (the left one).

    I'm working in a child theme. Here is the coding I've got to try and accomplish this in my style.css file:

    #content {
        margin-top: 60px;
        width: 580px;
        padding: 20px;
    }
    
    .posts_top {
        background-image: url('http://i1096.photobucket.com/albums/g335/oxoxtali/backgroundforblogcolumn_zpsa0462ad1.png');
    }
    
    .posts_middle {
        background-image: url('http://i1096.photobucket.com/albums/g335/oxoxtali/bgfinal_zps79803259.png');
    }
    
    .posts_end {
        background-image: url('http://i1096.photobucket.com/albums/g335/oxoxtali/bottomcolumn_zps6191770b.png');

    }
    Then I've got this coding on my .php pages:

    <?php get_header(); ?>
    
    <div id="insidewrapper">
    
    <?php get_sidebar(); ?>
    
    	<div id="content">
    
            <div id="posts_top"></div>
    
            <div id="posts_middle">
    
    	<?php if (have_posts()) : ?>
    
    	<?php while (have_posts()) : the_post(); ?>
    
    	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    
    <!-- title side section -->
    
    		<div id="metarea">
    
    		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Link to <?php the_title_attribute(); ?>"><?php if(the_title( '', '', false ) !='') the_title_attribute(); else echo 'Untitled';?></a></h2>
    
    			<div class="bypostauthor postauth">By <?php the_author_posts_link(); ?>
    			</div>
    
    			<div class="date"><?php the_time('F jS, Y') ?>
    			</div> 
    
    		</div>
    
    		<div id="contentholder">
    
    		<?php the_post_thumbnail(); ?>
    
    			<div class="entry">
    
    			<?php the_content('Continue reading &raquo;'); ?>
    
    			</div>
    
    				<div class="pagelink"><?php wp_link_pages( 'before=<p class="link-pages">Page: ' ); ?>
    				</div>
    
    			<p class="info"><?php comments_popup_link('No comments yet', '1 comment', '% comments', 'comments-link', '<div class="commentoff">no comments</div>'); ?> </p>
    
    			</div>
    
    		</div>
    
    		<?php comments_template(); ?>
    
    		<?php endwhile; ?>
    
    		<div class="navigation"><?php if(function_exists('wp_paginate')) {} ?>
    
    		<?php next_posts_link('&laquo; Previous Entries') ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php previous_posts_link('Next Entries &raquo;') ?>
    
    		</div>
    
    		<?php else : ?>
    
    		<h2>Not Found</h2>
    
    		<p>Sorry, but you are looking for something that isn't here.</p>
    
    		<?php endif; ?>
    
    		</div>
    	</div>
    
            </div>
    
            <div id="posts_end"></div>
    </div>
    
    <?php get_footer(); ?>
    
    </div>
    
    <?php wp_footer(); ?>
    
    </body>
    
    </html>
  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    It may not be the only problem, but your CSS code is using class and the HTML is using ID -- i.e.

    <div id="posts_top">
    
    .posts_top {
  3. oxoxTali
    Member
    Posted 2 years ago #

    Thanks so much for the advice. I changed it to class in the HTML and now the background is working (although I have to play around with the size a bit), but the header and footer still are not. I think I'm probably not positioning them correctly or something. Sigh.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.