Zen Cart Logo

border color change

Locked

Views: 977

Results 1 to 6 of 6
This thread is locked. New replies are disabled.
30 Sep 2010, 1:41 PM
#1
nyx1961 avatar

nyx1961

New Zenner

Join Date:
Sep 2010
Posts:
58
Plugin Contributions:
0

border color change

I hope someone won't mind giving me a hand. I am using the Twist of Nature theme found here: http://(sorry, site offline)/1-3-9d/index.php?main_page=index&template_dir=twist_of_nature and have already done most of the customization I need myself. I am stumped by two small problems which are both color changes. I just cannot find the right line in the style sheet.

The first is I wish to change is the border color of the two boxes at the bottom of the page, the one where the IP address is indicated and the one with the copyright notice, as seen inside the yellow square in the below picture.

The second is I wish to change the color of the line in the left side box that sits beneath the "categories" title but above the "All Products..." as shown in the yellow oval in the below picture.

I am very new to Zen Cart but have some experience in WordPress. I really appreciate any help. Thanks.

30 Sep 2010, 2:08 PM
#2
nyx1961 avatar

nyx1961

New Zenner

Join Date:
Sep 2010
Posts:
58
Plugin Contributions:
0

Re: border color change

After taking a break from it and looking with fresh eyes, I found the answer to my first problem, the border around the bottom boxes.

It was in this line:

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP { font-size: 0.9em; padding:2px; color:#AAA; [B]border: 1px solid #FFF[/B]; } 

I do however, still have the problem with the line in the left-side categories box. :)

30 Sep 2010, 2:28 PM
#3
stevesh avatar

stevesh

Black Belt

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

Re: border color change

Add to your stylesheet:

#categories hr {border-bottom: 1px solid #ff0000;}

Change the ff0000 to suit.

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

Very handy if you decide to roll your own theme in Wordpress, too.

30 Sep 2010, 3:25 PM
#4
nyx1961 avatar

nyx1961

New Zenner

Join Date:
Sep 2010
Posts:
58
Plugin Contributions:
0

Re: border color change

Thank you so much for your help and thanks for the heads up on the Web Developer plugin. I already use Firefox so this tool will be a great help. :)

30 Sep 2010, 3:32 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: border color change

And for reference, if you do need help, especially with a styling issue, a link to see your site live is immensely more useful to us than a screenshot.

30 Sep 2010, 3:44 PM
#6
nyx1961 avatar

nyx1961

New Zenner

Join Date:
Sep 2010
Posts:
58
Plugin Contributions:
0

Re: border color change

Sorry about that. Thanks for letting me know.