More_Information Page text/background

[danielosko]

Hello Everyone!

ZEN Rules! Much better than CGI carts!

OK, I am attempting to change the font-weight to bold in the "more_information" and "ezpages" side boxes only. I want to leave the rest of the side boxes as they are.

Additionally, I'd like to place a repeating background image to the "more_information" and "ezpages" sideboxes so that the bold font has a background to "rest" upon. I already have changed all of the "header" images for ALL side boxes.

Any help would be appreciated!

Thanks all,
Danny

[charmedbytina2]

Danny,

Welcome to Zen Cart!

Will you post a link to your site so we can take a look at it?
Seeing the site makes it easier to offer solutions to the issue.

Thanks,
Tina

[Webskipper]

CSS is alot of fun and if you know exactly what you are looking for, using the right tools can transform your pages into something unique.

Go to your page and find the text you are looking for. View the source and do a find for that text.

<div id="ezpagesContent" class="sideBoxContent">

Do you see class="sideBoxContent"?

Go find "sideBoxContent" on the catalog/includes/templates/YOUR-TEMPLATE/css/stylesheet.css

.sideBoxContent
{
color: #FFF;
font-weight: bold;
text-decoration: none;
font-family: zen font;
font-size: 14;
}

If .sideBoxContent is listed inline with other items, you can move it to a new line and create the information above that will just control .sideBoxContent.

Always force a blank line under the final line in a style sheet.

[Webskipper]

Forgot the background.

TEXTAREA
{

background-image: url(/images/background_image.gif);
background-color: #000;
}

Now you can have it repeat, repeat only on the X axis or Y axis. Let me know how fancy you want.

Background Color will load first and show only if the image does not. Get it?

[danielosko]

Thanks for the welcome Tina! But I only have this running on my home server at this time.

Hi WebSkipper! Thanks for the quick reply. I did what you said, but the font and the background image appear in ALL side boxes. I only want the bold text in the "more_information" and the "page_1, page_2, page_3, page_4, and page_5 areas".

In my "tpl_ezpages.php" I added <div id="myezpagesContent"'
So Ican now Call Out #myezpagesContent in my "stylesheet.css".
here is the code in the stylesheet.css;

#myezpagesContent {
background-image: url("../images/b1.gif");
background-position: repeat;
padding-top: .0em;
padding-left: 0.5em;
padding-right: 0.0em;
padding-bottom: 0.0em;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;

Although I can now control the font attributes for the ezpages sidebox..., the link image background does not align to the text.
Example:
Page_1 text link should have an image behind it and
Page_2 text link should have an image behind it and
Page_3 text link should have an image behind it..., etc.

Do I make any sense?

Thanks SOOO much!

Danny

[danielosko]

Hello Everybody!

I figured it out! It may not be the "nicest" coding in the "stylesheet.css" file...., but it works GREAT. Regardless of the browsers font size. Everything stays aligned. I cannot take full credit for this, it is a compilation of MANY suggestions and a lot of "head knocking"! Here is the code if anyone is interested.

/* POSITIONS ENTIRE BLOCK CONTENT WITHIN THE SIDE BOX */
#myezpagesContent {
display: block;
padding-top: 0.0em;
padding-left: 0.0em;
padding-right: 0.0em;
padding-bottom: 0.0em;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

/* POSITIONS BACKGROUND IMAGE FOR EACH REPEATING LINK AREA */
div#myezpagesContent li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin-top: 0px;
z-index: 20;
height: 23px;
width: 150px;
}

div#myezpagesContent li li {
margin: 0px;
/* this overrides the margin-top in the declaration above */
}

/* POSITIONS THE TEXT LINKS OVER THEIR BACKGROUND IMAGE */
div#myezpagesContent li a {
padding-top: 0.0em;
padding-left: 0.5em;
padding-right: 0.0em;
padding-bottom: 0.0em;
font-weight: bold;
font-size: .95em;
text-decoration: none;
width: 150px;
}

Happy Holidays!

Danny