Image above ‘content’

  • Hello,
    I am trying to put an image above the content and below the header in my theme but am having trouble doing so. The image can sit within the content div but needs to appear at the top of it, I need the image to be either the wide version or not depending on whether the sidebar is there or not. In header.php it defines either the wide bg or not so I think the image I want to put in should go here as well but Im not sure of the syntax.

    So basically, I want to add and image above the content background as defined below which will only repeat once in Y to nicely round off the current hard edge of the background.

    <?php
// Checks to see whether it needs a sidebar or not
if ( empty($withcomments) && !is_single() ) {
?>

	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/byelliotowen-bg-ltr.png") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/byelliotowen-bg-wide.png") repeat-y top; border: none; }
<?php } ?>
Viewing 8 replies - 1 through 8 (of 8 total)

  • A link to your site might help.

    Thread Starter elliotowen

    (@elliotowen)

    https://byelliotowen.com
    – in dev obviously. You can see it says ‘columntop’ which is the alt attribute of the img tag I put in the index and where the image shoudl be.

    You could so this via the classes added to the <body> tag using pure CSS. Something like:

    .contenttop {
width:570px;
height:30px;
background:url(images/byelliotowen-columntop.png) repeat-x;
}
.single .contenttop {
width: 450px;
}

    added to style.css

    Thread Starter elliotowen

    (@elliotowen)

    cool, I think that got it. I will add some padding to the content background so that the top image sits above it then its perfect.

    Thanks a lot esmi.

    Glad I could help. ??

    Thread Starter elliotowen

    (@elliotowen)

    Actually, Im not getting the top image in the ‘single’ view. View with the sidebar is fine(narrowcolumn?) Did I understand you correctly with the below.

    FYI – Im modifying the default WP theme.

    index.php

    <div class="contenttop"></div>
<div id="content" class="narrowcolumn" role="main">

    style.css

    .contenttop {
	width:860px;
	height:32px;
	background:url(https://byelliotowen.com/wp-content/themes/byelliotowen/images/byelliotowen-contenttop.png) repeat-x;
}
.single .contenttop {
	width:860px;
	height:32px;
	background:url(https://byelliotowen.com/wp-content/themes/byelliotowen/images/byelliotowen-contenttop-wide.png) repeat-x;
}

    You need to add:

    <div class="contenttop"></div>
<div id="content" class="widecolumn" role="main">

    to your single.php template. Check through the other templates as well – archive.php, archives.php, image.php, links.php, page.php and search.php.

    Thread Starter elliotowen

    (@elliotowen)

    Ok, that worked a treat. Thanks again.

    What do i need to do to get a similar result with the footer? At the moment I dont think the footer ‘knows’ whether the content is using a narrow or a wide column. I have tried putting a div in footer to be added after the WP footer content but the one is displayed all the time. See below.

    in style.css

    #footer {
	background: #efefef url('images/byelliotowen-bg-ltr.png');
	background-repeat: repeat-y;
	border: none;
	}
.contentbottom {
	width:860px;
	height:20px;
	background:url(https://byelliotowen.com/wp-content/themes/byelliotowen/images/byelliotowen-contentbottom.png) repeat-x;
}

.single .contentbottom {
	width:860px;
	height:20px;
	background:url(https://byelliotowen.com/wp-content/themes/byelliotowen/images/byelliotowen-contentbottom-wide.png) repeat-x;
}

    footer.php

    <div id="footer" role="contentinfo">
<!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
	<p>
		<?php bloginfo('name'); ?> is proudly powered by
		<a href="https://www.ads-software.com/">WordPress</a>
		<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
		and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
	</p>
</div>

<div class="contentbottom"></div>

</div>

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Image above ‘content’’ is closed to new replies.