Trying to use an image background on .leftBoxHeading to no avail

I'm using the following code in my main stylesheet.css:

.rightBoxHeading, .leftBoxHeading {
background:transparent url(../images/button-bg.gif) repeat-x;
}

h3.rightBoxHeading, h3.leftBoxHeading {
background:transparent url(../images/button-bg.gif) repeat-x;

However, the button background just simply will not load! Where am I going wrong?? :frusty:

Have also tried:

.rightBoxHeading, .leftBoxHeading {
background-image url(../images/button-bg.gif) repeat-x;
}

h3.rightBoxHeading, h3.leftBoxHeading {
background-image url(../images/button-bg.gif) repeat-x;

NOTHING!?!??!

Try

.rightBoxHeading, .leftBoxHeading {
background-color: transparent; 
background-image: url(../images/button-bg.gif);
background-repeat: repeat-x;
}

http://www.w3schools.com/Css/default.asp

Hey, thanks for the reply Kobra, I've edited my stylesheet as suggested:

.rightBoxHeading, .leftBoxHeading {
background-color: transparent;
background-image: url(../images/button-bg.gif);
background-repeat: repeat-x;
}

h3.rightBoxHeading, h3.leftBoxHeading {
background-color: transparent;
background-image: url(../images/button-bg.gif);
background-repeat: repeat-x;

However, still nothing see:

http://www.dystynction.com/index.php?main_page=product_info&cPath=1_4&products_id=182

What do you think could be wrong?

You need to check the w3schools link I posted for proper syntax and notice also that you have this declared TWICE and the latter is the one being rendered
You can only declare one tag - one time for the same item:

h3.rightBoxHeading, h3.leftBoxHeading  {
background-color: transparent; 
background-image: url(../images/button-bg.gif);
background-repeat: repeat-x;
}

margin:0;
}

h3 label {
font-size:1.0em;
}

h3.rightBoxHeading, h3.leftBoxHeading  {
color: #fff;
font: 13px tahoma, arial, sans-serif;
font-weight: bold;
padding-left: 33px;
padding-top: 4px;
padding-bottom: 4px;
background-image: url(../images/heading-bg.gif);
background-position: 7px 3px;
background-repeat: no-repeat;
text-align:left;
}

Where margin:0 is hanging out by itself after you have already closed the statement before it

Thank you Kobra, you're a genius as I'm sure you've been told before.

I don't know how I didn't see the double entry, thank you!!

Now I just need to find how to stretch the new background image to the full width of the left boxes :-)

A follow on from this topic:

Now that I have the background image instead of the background colour, it's taken away the little .gif that used to occupy the left side just before the heading?

This was the old code:

h3.rightBoxHeading, h3.leftBoxHeading {
color: #fff;
font: 13px tahoma, arial, sans-serif;
font-weight: bold;
padding-left: 33px;
padding-top: 4px;
padding-bottom: 4px;
background-image: url(../images/heading-bg.gif);
background-position: 7px 3px;
background-repeat: no-repeat;
text-align:left;
}

Which as you know I replaced with:

h3.rightBoxHeading, h3.leftBoxHeading {
color: #fff;
font: 13px tahoma, arial, sans-serif;
font-weight: bold;
padding-left: 33px;
padding-top: 4px;
padding-bottom: 4px;
background-image: url(../images/heading-bg.gif);
background-position: 7px 3px;
background-repeat: no-repeat;
text-align:left;
}

I wonder if there is a way to keep the little .gif to the left of the heading AS WELL as the background-image setting?

They are both background images, so you will need to go into Photoshop and paste the gif onto your new background image in the location you want it.

Hi,

I had considered using a better graphic but I'd have to make it a larger .gif file.

At the moment, it's less than 1kb with a repeat-x function to fill the row. If I make a 'twin' graphic then I'd need to remove the repeat function and instead have a 300px wide.

I know that Zen cart is only, 'so' customisable and I accept that I can't have my cake and eat it too :-)

Also, if I did use a longer graphic image, how would I make all of the headings texts move across to the right by about 20px ??

Is there a margin setting in CSS that controls all of the heading texts?

As you can see, I've changed the graphic to include an extra image at the left. Now, how to I get the text to float in the middle of the title bar??

Simplest answer: make the text part of the graphic. You won't be adding any overhead, since there's a graphic there anyway. And you get to use a better font.

Rob

I've changed the graphic to include an extra image at the left. Now, how to I get the text to float in the middle of the title bar??
Padding-left - -
Might be to .leftBoxHeading or H3 .leftBoxHeading

I messed around with various padding, margin, indent settings in several different code blocks. After a couple of hours it was starting to seem like a waste of effort so I opted to reduce the height of the title bars to 40px.

I like the idea of including the text as part of the graphic but I noticed earlier that when I deleted 'Categories' text from inside english.php it actually takes away the entire menu bar, not just the text. I also envision problems with the menu items that say [more] at the end of them.

I'm not 100% satisfied with the way the site looks after the last two days working on it, but I think it's nearly there. It seems all the fine tweaks are the difficult ones :-)

If you want to use custom graphics for sidebox headings, try Image Titles (link in my sig). It handles this function automatically, once you save the image with the correct filename, and leaves the original box title in the code so it will show if the image gets lost.

"It seems all the fine tweaks are the difficult ones :-)"

Someone here recently repeated the saying that the first 90% of the code takes 10% of the time, and the last 10% takes 90% of the time.

He was right :-)

It's basically because the manual for Zen is very general and not in depth enough. Also because the main things like how to change the fonts, the background colours, the admin settings; are all easy to find on Google.

ahhhhhh but the finer things in life are harder to find :-)

:clap: I'm being quoted!

Note about Goh Koon Hoek's Zen Cart book: it was never intended to help someone do major site redesigns, and has very little about the stylesheet in it (less than 3 pages.) The book of Zen Design has yet to be written.

Rob

Maybe you're the man for the job then rstevenson. Why not?!? You could take the book that's already written and build on it. I bet it'd sell (if you can keep if off the torrent sites)

Thanks GJH42 I'll take a look at the mods in your sig.

Maybe you're the man for the job then rstevenson. Why not?!? You could take the book that's already written and build on it. I bet it'd sell (if you can keep if off the torrent sites)

Funny you should say that. :wink:

But I won't start with something like the existing book. It has a particular market which it serves well. I'm planning a different approach. More later -- as soon as I get my hands on v2.

Rob