Sidebox Footer

[adhd05]

Hi, I'm kind a newb at all this so please be gentle on me.
I'm running 1.3.0.2 and am trying to get and footer image for my sideboxes. I'm using the overides etc.. thats all sweet.
I want to put background images in my sideboxes much like futre zen template and can do the header and middlie images sweet. But if a put the bottom image in the BoxContent the text from the sidebox goes over the image.
So i want to create a footer part to the sideboxes to contain my image.
I found a closed thread that had some instructions and have tried those to no avail, the instruction were from dr byte.
Here what I've done.
My tpl_box_default_left.php now looks like this.

if ($title_link) {

$title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';

}

//

?>

<!--// bof: <?php echo $box_id; ?> //-->

<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">

<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>

<?php echo $content; ?>

<div class="leftBoxFooter" id="<?php echo str_replace('_', '-', $box_id) . '-footer'; ?>"></div>


</div>

<!--// eof: <?php echo $box_id; ?> //-->

And put this in my css
.leftBoxFooter {

background-image : URL('../images/sidebox_bottom.gif');

background-repeat: no-repeat;

}

But as yet nothing has changed on the site, help??

[onisama]

Do you have a URL?

[adhd05]

www.beadnz.com/store

The footer is actually there but my image is not showing. How can I set it to be a specific height also the same witht the header?

[TinaS]

<div class="leftBoxFooter" id="<?php echo str_replace('_', '-', $box_id) . '-footer'; ?>"></div>

And put this in my css
.leftBoxFooter {

background-image : URL('../images/sidebox_bottom.gif');

background-repeat: no-repeat;

}

But as yet nothing has changed on the site, help??

Change the '-footer' to 'Footer'

the image isn't showing because your class id's aren't matching

The height - add the height you want to the stylesheet defines
example :
.leftBoxFooter {

height:25px;
background-image : URL('../images/sidebox_bottom.gif');

background-repeat: no-repeat;

}


Hope that helps!

[adhd05]

Yeah that does, although I didn't need to change the footer, but still might do that just to tidy it up.

I have another problem. I can't seem to get the boxheader text to vertically sit right. I have put an indent in to get it horizontally but vertically I'm stumped. You can obviously see if you visit my site.
Thanks

[kuroi]

You can position the text within your header by using padding. For example, you can amend the following style by deleting the things I've marked in red, adding the padding marked in green (to give 10px at the top and 20 to the left) and deducting the padding top that you have added from the fuigure marked in magenta.

h3.leftBoxHeading, h3.leftBoxHeading a, h3.rightBoxHeading, h3.rightBoxHeading a{

font-size: 1em;
height: 35px;
background-image : URL('../images/sidebox_top.gif');
background-repeat: no-repeat;
margin: 0px;
margin-top: 0.7em;
color: #ffffff;
text-indent: 1.5em;
top: 0.3em;
padding: 10px 0 0 20px;

}border: 0px;

Also the text marked in orange is a syntactic error, this should be inside the curly brackets of the style to which it is supposed to apply, otherwise its effects may vary from browser to browser. In FF for instance, it overrides the border statement in the style that follows it i.e.

.leftBoxContainer {

border: 3px solid #ffffff;
margin-top: 0.3em;

}

[adhd05]

You're a legend!!
Brilliant, I'm totally new to this stuff, and didn't understand how that worked. The syntax error you mentioned was me putting stuff out the during brackets during experimentation to see what did what.
Thanks

[kuroi]

Ah shucks. Now you made me blush

I'm actually rather surprised that the style outside the curly brackets wasn't ignored, so I learnt something here too.

Have you tried using I find Chris Pederick's Web Developer Toolkit for Firefox. This has a CSS section that allows you to edit your CSS on the fly and immediately see what the impact will be. There is a simiar tool for Internet Explorer, which in some ways is more powerful, but less intuitive and more long-winded for these types of test.