Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How do I remove the background color from the breadcrumb div so it's transparent?

How do I remove the background color from the breadcrumb div so it's transparent?

Locked

Views: 29,048

Results 1 to 16 of 16
This thread is locked. New replies are disabled.
6 Jan 2009, 11:49 PM
#1
socalcane avatar

socalcane

New Zenner

Join Date:
Jan 2009
Posts:
13
Plugin Contributions:
0

How do I remove the background color from the breadcrumb div so it's transparent?

Hello all,

I've encountered another "brick wall of a problem" that I can't seem to figure out for myself. I've searched the forums and I even did quite a bit of googling, but I still can't find the solution to my problem.

What I want to do is make the breadcrumb div (#navBreadCrumb) transparent, so my underlying gradient image shows through. However, I just can't get it to work.

I have tried the modifying the code in my override file (my customized template stylesheet) as follows:

#navBreadCrumb {
background-color: transparent;
}

-- but, that doesn't do the trick (I guess because if I set it to transparent, it reverts back to the style rules described in the original stylesheet).

I'm assuming that I could just go into the default stylesheet and remove the color property there, but surely there has to be a way I can do it in my custom (override) stylesheet, no?

I plan on using transparency in other areas of the design as well, so I really need to figure out how to do this! I would greatly appreciate it if someone would shed some light on the problem for me.

Please disregard the domain name, as it's completely unrelated to this shopping cart I'm trying to build for another site. (I don't have access to my new client's server at the present time, so I picked an old domain that I had access to.) The url is (warning:mature theme) : http://www.sexualenhancement.net/store/

7 Jan 2009, 1:38 AM
#2
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

You have both a stylesheet.css and a stylesheet_old.css

Unfortunately, due to the way ZC loads stylesheets (which is very handy in some circumstances) the _old one is loading, and as you suggest, is probably overriding what you're trying to do.

If for some reason you need to leave the _old one on your server, just rename it to stylesheet.old or some other name that does not end in css. This will cause ZC to ignore it. But best to keep a copy locally just in case, then delete it from the server.

Rob

7 Jan 2009, 1:40 AM
#3
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: How do I remove the background color from the breadcrumb div so it's transparent?

You can not have your old stylesheet in the css directory with the extention of .css
By rules ###### .css files are parsed in order. Delete it or change the extention to something besides .css

7 Jan 2009, 5:23 AM
#4
socalcane avatar

socalcane

New Zenner

Join Date:
Jan 2009
Posts:
13
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

Thanks guys... that was exactly my problem!

I had no idea that zencart still referenced the older stylesheet. I thought renaming it would eliminate it from the mix, but I guess ZC pulls all css files from the CSS folder, even those that I thought it didn't even know about!

Anyway, I renamed the older stylesheet to stylesheet.old, then went back and changed the breadcrumb div style as follows:

#navBreadCrumb {
background-color: transparent;
}

That did the trick, as I now have a perfectly transparent background for my breadcrumb section.

Thank you so much for taking the time to point out the not so obvious (to me anyway)!

7 Jan 2009, 2:41 PM
#5
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

For those who may stumble upon this thread later, there is a readme file in the stock CSS folder (CSS_read_me.txt) which explains how Zen Cart picks up stylesheets.

Funny thing about readme files -- few people read them. Maybe they should be referred to as readme-or-die. :laugh:

Rob

7 Jan 2009, 2:45 PM
#6
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

It's not the way "Zen Cart picks up stylesheets". It's the way stylesheets are used and were designed to be used. It's what CSS stands for (Cascading Style Sheets). All files with a .css extension will be picked up by the browser. It doesn't matter if you're using Zen Cart, straight HTML or any other method of building a website.

7 Jan 2009, 3:20 PM
#7
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

Not true.

In a static HTML site, only stylesheets specifically linked in the head meta tags will be used to render the page (including any other stylesheets referenced by an @import command within the stylesheets mentioned in the meta tags.)

Zen Cart has code designed to locate all stylesheets in the css folder and use all of them, and it does so by noting the .css filename ending. I suppose this is done in part to make things easier for new users, but also to add the page-specific and category-specific ability which would be hard to manage in a dynamically rendered site in any other way.

Rob (who has been coding in HTML, XHTML and CSS since they've been alive)

7 Jan 2009, 3:35 PM
#8
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

:oops:

You're correct. My mistake. I shouldn't post late at night or before multiple cups of coffee in the morning (especially when multitasking in COBOL).

7 Jan 2009, 3:38 PM
#9
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

No problem. I think I'll go have another coffee myself.

COBOL?!? :yuck:

Rob (whose last-used programming language was HyperTalk)

7 Jan 2009, 3:47 PM
#10
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

COBOL allows me to eat and live indoors and has for over 20 years. Without it, no coffee... or all-important donuts. :shocking:

We now return you to your regularly scheduled thread about CSS. :laugh:

7 Jan 2009, 5:47 PM
#11
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How do I remove the background color from the breadcrumb div so it's transparent?

COBOL and Netscape mentioned on the same day - anybody running Windows for Workgroups?

7 Jan 2009, 6:10 PM
#12
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: How do I remove the background color from the breadcrumb div so it's transparent?

COBOL and Netscape mentioned on the same day - anybody running Windows for Workgroups?
Time to compare stripes and how ancient we are?
How about before COBOL = =
2GL assembler and paper punched tape

7 Jan 2009, 7:15 PM
#13
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

Assembler and punch cards (only as a student).

Remember JCL? MS-DOS 1.25?

7 Jan 2009, 7:42 PM
#14
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How do I remove the background color from the breadcrumb div so it's transparent?

Punch cards as a student. Never smart enough to learn assembler.

Still boot my laptop into FreeDos from a USB flash drive when I want to use VDE word processor.

I have Windows 1.0 through 3.1 somewhere, and Word 1.0 and Office 4.

I also have, and have used, Microsoft Bob.

8 Jan 2009, 12:06 AM
#15
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: How do I remove the background color from the breadcrumb div so it's transparent?

I can still run Excel 3 on my Mac 512Ke, loading Excel and any data on the external 800K floppy drive, and the OS on the internal 400K drive. Yes, the entire Mac OS on a 400K drive!

And I believe I still have the first public Mosaic browser around too. :shocking:

Rob

8 Jan 2009, 3:03 AM
#16
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: How do I remove the background color from the breadcrumb div so it's transparent?

I think we should move this to the "PUB" and I will open a thread there...
Here it is:!!!

http://www.zen-cart.com/forum/showthread.php?p=666488