CSS for Blank Side Box - inserting image

[shags38]

hi all - I have added Blank Side Box mod and have it working but I cannot find where to alter the CSS. I want to position text, i.e. alter padding etc to move text right up under the title bar and I want to insert an image. I have managed to get text into the box however it is not centered and has too much padding both top and bottom essentially making the box far too large for the text. (see main page of my site in my signature below to see what I mean). I did insert html for an image to show in the box in includes/languages/english/extra_definitions/blank_sidebox_defines.php where text can be inserted but that didn't work, i.e. just blank background with text - used <imagecode><url link text> and only text showed, no image. Inserting javascript for popup window instead of html for "target=blank" resulted in wiping out the home page, total blank. The unmodified file mentioned above states you can insert everything including the kitchen sink but only text is working for me.

I have tried the following, from /content.php?244-how-do-i-add-an-image-to-the-bottom-of-my-sideboxes-or-center-boxes, with no success;

Then add the following CSS to the appropriate block
/* create free space at the bottom of the box in which to display the image */
padding-bottom: 20px;
/* add the image to the boxes background */
background-image: url(../images/box_bg.jpg);
/* position the image at the bottom and center of the box */
background-position: bottom center;
/* EITHER set the image to not repeat */
background-repeat: no-repeat;
/* OR set it to repeat horizonatally */
background-repeat: repeat-x;

actual code in my CSS - I left the green instruction lines in (is that an issue?)

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #9a9a9a;
margin-top: 0em;
padding-bottom: 0px;
/* add the image to the boxes background */
background-image: url(../images/siteseal_logo.gif);
/* position the image at the bottom and center of the box */
background-position: top center;
/* EITHER set the image to not repeat */
background-repeat: repeat;
}

.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

The image file is in the images folder, the root of the folder not a sub folder. You can see I have set top and bottom margins and bottom padding to zero but as can be seen on my site there is significant padding top and bottom of the text.

The only thing I got to work was INCREASING bottom padding of 20px in example code to larger number actually worked but reducing it didn't. I suspect that the code written for this mod has padding hardcoded ?? Why would this specific sidebox not show up in CSS Stylesheet as a specific item, *blank_sidebox_wrapper, content, header etc etc? Is there indeed a specific CSS file for this sidebox or have I just not inserted code correctly.

Looking forward to your assistance.

cheers,
Mike

[stevesh]

Assuming you inserted your content in the template file, you can get rid of that space on the top and bottom by removing the <p> tags here:

$content .= '<p>' . TEXT_BLANK_SIDEBOX . '</p>';
$content .= '<p>You can include text, links, images, HTML markup and even PHP code</p>';

The Blank Sidebox has its own id's, including #blanksidebox, #blanksideboxHeading and #blanksideboxContent you can use for styling.

[shags38]

Thanks Stevesh - I actually figured it out through trial and error and now have it the way I want it.

Many thanks for your reply - much appreciated.

cheers,
Mike

[gjh42]

Why would this specific sidebox not show up in CSS Stylesheet as a specific item, *blank_sidebox_wrapper, content, header etc etc? Is there indeed a specific CSS file for this sidebox or have I just not inserted code correctly.

This mod, like many elements in stock Zen Cart, has ids, classes, etc. provided in the page source, but not mentioned in the stylesheet. They are available for you to add stylesheet rules if you need them, without having to alter PHP files.