Side Box Header Images

[KADesign]

What is the best way to add an image to the left of the side box header. I want to an image next to Categories, New Products, etc. Also how would I use an image as a link seperator in the ez-Pages nav bar?

Thanks in advance for any help.

Kelly

[gjh42]

Do you want the same image in each, or individual images? Do you want the image within the heading, or off to the left of the sidebox?

[KADesign]

Hi,

I want a small heart off to the left of each sidebox name in the heading. So a heart on the left side of the word Search, Categories, Links etc. and in the middle to the left of Featured Products and New Products. That one I can probably do with css and a background image. I am just unsure of the best way to do it.
The other place I want a smaller heart is between the links on the ez-page bar instead of the dots that are there now as a separator.
BTW I really like your categories Dressing mod but I can't seem to get it right...
I would like to separate the Lingerie and Games with a divider and have a non link heading but I need to play with it more.

Thanks,
Kelly

[gjh42]

Add to your stylesheet

.leftBoxHeading, .rightBoxHeading {
    background: #112233 url(../images/heart.gif) left center no-repeat;
    padding-left: 23px;
    }

Change color, filename & padding to suit.

[KADesign]

Hi Glenn,

Thank you for your help. That worked great!

Thanks again!
Kelly

[clydejones]

Also how would I use an image as a link seperator in the ez-Pages nav bar?

Thanks in advance for any help.

Kelly

open admin -> configuration -> EZ-Pages Settings ->
EZ-Pages Header Link Separator

click the edit button and add the following in the input box

 ♥ 

click the update button and you're all set.

[dynamicduo]

I added header images to my sideboxes and my centerbox in order to give it a a rounded look. check out www.kekescookies.com/cookiestore.

The problem is that the header images only show up in ie, but not in firefox.

What do I do?

[gjh42]

IE has a tendency to try to cover for users' mistakes and show what it thinks they probably want. Firefox more often shows exactly what you tell it to, and if you make a mistake in that, it won't work.

You have an extra comma in several stylesheet rules, which is a CSS error:

.leftBoxHeading, {
        margin: 0em;
        background: url(../images/sidebox_header.gif) #FFffff;
        padding: 0.5em 0.2em;
        }

.rightBoxHeading, {
        margin: 0em;
        background: url(../images/sidebox_header.gif);
        padding: 0.5em 0.2em;
        } 

.centerBoxHeading, {
	margin: 0em;
	background-color: #ffffff;
	background-image: url(../images/centerbox_header.gif);
	padding: 0.5em 0.2em;
	}

.leftBoxContainer, { 
	margin: 0em;
	border: 0px solid #9a9a9a;
	border-bottom: 0px solid #336633;
	margin-top: 0em;
        padding-bottom: 20px;
        background-image: url(../images/sidebox_footer.gif);
        background-position: bottom center;
        background-repeat: no-repeat;
	}

.rightBoxContainer {
        margin: 0em;
	border: 0px solid #9a9a9a;
	border-bottom: 0px solid #336633;
	margin-top: 0em;
        padding-bottom: 20px;
        background-image: url(../images/sidebox_footer.gif);
        background-position: bottom center;
        background-repeat: no-repeat;
	}

The rules with this error are being completely ignored, per CSS standards.

.leftBoxHeading, {

should be

.leftBoxHeading {


I notice that most of your sidebox titles are displaying a "no break space" instead of a title. Is this intentional?

[dynamicduo]

Thanks so much!

[dynamicduo]

and the &nbsp is just to make my sidebox images fit well. it is intentional, although maybe not the best code...