This is my third wordpress blog … I am trying to style my own theme using the Starkers Theme for Wordpress 3.0. My first blog was adapting another free theme, my second one was building a theme from scratch using a tutorial. This is my first attempt at using Starkers Theme.
I have a background for the sidebar that has a border (see image below), so I sliced the image into a top image, a repeating middle image and a bottom image. I have done this before with static websites, but it doesn’t seem to be working here. The repeating middle is fine, but I can’t get the top and bottom images to show up. I am so frustrated that I am starting to maybe add too many divs, and place them and the images randomly just in the hopes that something will work. I need a calm mind to guide me in the right direction, please.
Here is my code (stripped down to just the relevant parts to keep it as small as possible). Thank you.
index.php …
<?php get_header(); ?>
<div id = "content">
<?php
get_template_part( 'loop', 'index' );
?>
</div><!-- end of content div -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
sidebar.php ...
```php
<div id = "sidebarContainer">
<div id = "sidebarTop'"><!-- used to contain the top border image-->
<img src = "images/sidebarTop.png" width = "300" height = "10" alt = "">
</div><!-- end of sidebarTop div -->
<div id = "sidebar">
<ul class="xoxo">
<?php
if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
<li>
<?php get_search_form(); ?>
</li>
<li>
<h3><?php _e( 'Archives', 'twentyten' ); ?></h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
<li>
<h3><?php _e( 'Meta', 'twentyten' ); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; // end primary widget area ?>
</ul>
<?php
// A second sidebar for widgets
if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>
<ul class="xoxo">
<?php dynamic_sidebar( 'secondary-widget-area' ); ?>
</ul>
<?php endif; ?>
</div> <!-- end of sidebar div -->
<div id = "sidebarBottom"><!-- used to contain the bottom border image-->
<img src = "images/sidebarBottom.png" width = "300" height = "10" alt = "">
</div><!-- end of sidebarBottom div -->
</div><!-- end of sidebarContainer div -->
I should have mentioned this sooner but you can do that with two images instead of three.
That helps reduce the amount of handshakes between the browser and server.
The trick is to merge your top and bottom cap images into one image, that will give you one image that is 20px tall.
Rather than double nesting the inner divs now you can just nest two divs in the sidebar div. The outer (sidebar) div will get the cap image set as no-repeat bottom and 10px bottom padding will show the bottom portion of the cap.
The first nested div will be an empty sandbag set at 10px tall, then set the cap BG image there as no-repeat. That takes care of the top cap.
The second nested div gets the repeat-y image and the sidebar content.
It leaves you with this simple code below that takes care of the barebones setup.
@rayzur - Thanks, but I ended up using a combination of padding and margins, and was able to get it to work. ‘haslayout’ and ‘overflow:hidden’ to uncollapse margins is a bit beyond my experience right now. I still have to learn about those.
When I finish the backgrounds of my blog, before I do the graphics for it, I will upload it for people to have a look, because I may have other questions.
@c2uk - Thanks, but I did already know that. I’m probably edging towards intermediate in my css and html, but sometimes I get into a situation where elements just don’t seem to behave the way I expect them too - especially with forms and nested divs, so I end up fiddling with the padding and margins (with too much reliance on negative margins) and losing track of what’s going on. It seems that sometimes the element just doesn’t react at all to any changes I make to the css.
Actually position:static; is the default but you are right in saying position;relative; is not needed.
It would only be needed if you had to establish a containing block for any AP children or to create a new stacking level so that element would layer on top of another one.
A lot of people get carried away with position:relative; and they use it when they don’t understand what it is or isn’t doing.
it’s long, so I’m trying to summarise the main point in terms of margins and padding, hope I’m not telling you something you didn’t already know:
margins define the space between elements. if you add a border to this element, then the margin is beyond that border, thus it follows if you add a background to the element, then the margin won’t be filled with the background.
paddings define the space within elements, i.e. from its border to its child elements. it follows that the background will fill this space between the parent and the child.
but that’s all very simplified, read through the stuff above and it should be clearer, if not open a new thread and I’m sure one of the CSS gurus around here will be glad to explain it better.
Thanks so much for your help … you pointed me in the right direction. I finally got the effect I wanted, although I still feel that towards the end it was also the result of trial and error, which is not great in terms of my learning curve. My goal is to be able to know exactly how the divs, margins (positive and negative) and padding will affect an element before hand.
The repeating middle is fine, but I can’t get the top and bottom images to show up. I am so frustrated that I am starting to maybe add too many divs, and place them and the images randomly just in the hopes that something will work. I need a calm mind to guide me in the right direction, please.
Well it looks like you need to use paddings instead of margins on those divs.
Is the page live anywhere so you could post a link?
width and floats are only necessary for sidebarTop
position:relative is default, so not needed.
I don’t understand your use of margins, imho that would mess up everything, only the parent div, sidebarTop, would need margins.
sidebarTop < sidebar < sidebarBottom, that’s also the order of the backgrounds placed, meaning the background of sidebar is on top of the background sidebarTop - sorry, that was actually an error from my side. you either put a padding in sidebarTop to move the nested divs a little down and be able to see the top background, or switch sidebar with sidebarTop (then sidebar would be the one that carries float and width.
Here’s what there is of my theme so far. Thanks for offering to look at it. i really want to learn as much as I can about working with Wordpress, so any advice or information you can offer me is appreciated.
I finally got the bottom image placed properly, but for some reason the top image is still not showing up. I used the following nesting of divs, with 10px top/bottom margins on the sidebarbottom image div and the sidebar div to allow the 10px high images to show up (Thanks to your suggestion )
<div id = "sidebarTop'"><!-- used to contain the top border image-->
<div id = "sidebarBottom"><!-- used to contain the bottom border image-->
<div id = "sidebar">
.
.
.
</div> <!-- end of sidebar div -->
</div> <!-- end of sidebarBottom div -->
</div> <!-- end of sidebarTop div -->
Thanks for your reply. As far as I know, white space is not an issue in html. id = “content” is the same as id=“content”. I have always used spaces to make it more readable, and have not had any problems with it.
I did originally have the images as background images, because you are right about their purpose. That did not solve the problem, however, and what I posted here is the last of quite a few different attempts at placing divs and images to see what would work.
I am developping this theme on my machine because I don’t want it to go live until I have it finished, so i don’t know how I can show you the html.
I was wondering if maybe the sidebar div was stretching to fill the entire containers that had my top and bottom background images. I will try playing with margins and see if that will fix things.
Thanks again for the feedback. You gave me a few ideas to try.
any chance you can pack that whole theme and attach it here? it’s time I try Wordpress 3, though I can’t promise I’ll have the time in the next few days.
I think I have a problem with where i place my divs in relation to the different php files. Another issue I have is that the wrapper div which I opened at the beginning of header.php and closed at the end of footer.php works for my home page, but not for any other page. Are you sure this isn’t a Wordpress question?
Okay. I thought my problem had to do with the placement of the divs with respect to the sidebar.php and index.php templates in wordpress
even if, that still wouldn’t make this a Wordpress issue, rather an html issue.
Could you please at least tell me if I put them in the right spot in the wordpress files?
Looks like, but to be absolutely certain we’d need to see the html that’s actually produced.
there are a few things that puzzle me here:
since when can you write id = “content”, forgive my ignorance, I haven’t seen anyone writing it like this, to me the correct (and only) way is id=“content”.
I wouldn’t use img at all in this scenario, it’s a layout element and not part of the content and thus should be a background. I’d have enclosed the whole sidebar in a total of three divs:
and then applied the backgrounds to those divs. Mind you, that doesn’t stretch the sidebar down if the main content is longer and there isn’t enough content in the sidebar, but I’m uncertain as to whether you wanted that.
Okay. I thought my problem had to do with the placement of the divs with respect to the sidebar.php and index.php templates in wordpress. Could you please at least tell me if I put them in the right spot in the wordpress files?
)