Forums / Templates, Stylesheets, Page Layout / Get rid of box around add to cart button

Get rid of box around add to cart button

Locked

Started by undersun on 25 Nov 2009, 1:18 AM · Views: 1,480

Results 1 to 7 of 7
This thread is locked. New replies are disabled.
25 Nov 2009, 1:18 AM
#1
undersun avatar

undersun

New Zenner

Join Date:
Nov 2009
Posts:
14
Plugin Contributions:
0

Get rid of box around add to cart button

I am a newbie to zencart, but fast appeciating its power (but not its complexity!)

anyway, if you go to my site at:
http://www.pageplusdirect.com/zencart/index.php?main_page=page_plus_refills

The "add to cart" images have a light gray box around them. I don't think this has to do with "a img {border:none;}"

The program just puts a box around certain items, like "add to cart" items.

Can someone help me figure this out? Thanks!

25 Nov 2009, 3:38 AM
#2
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,189
Plugin Contributions:
0

Re: Get rid of box around add to cart button

Un,
The old TM template, a nasty bearcat but fun to play with..

Locate this:
includes/templates/12541/css/stylesheet_tm.css

Find this:> input, select, textarea {

-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #C0C0C0;
color:#000000;
font-family:tahoma;
font-size:11px;
line-height:13px;
padding:2px;
vertical-align:middle;
}

 The highlighted red font above is the fix
    1.  change 1 to 0

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.

Zen Cart Certified hosting at myZenCartHost.com.

25 Nov 2009, 12:19 PM
#3
undersun avatar

undersun

New Zenner

Join Date:
Nov 2009
Posts:
14
Plugin Contributions:
0

Re: Get rid of box around add to cart button

that was the solution!! Thanks haredo!!

25 Nov 2009, 12:34 PM
#4
undersun avatar

undersun

New Zenner

Join Date:
Nov 2009
Posts:
14
Plugin Contributions:
0

Re: Get rid of box around add to cart button

This fix brought up another problem - when I made the border: 0px, the borders disappear around text input areas, like "e-mail address" or "password."

How do I work around this problem?

Well, I think I just answered my own question - I removed the input
call altogether from my css, and I guess browsers have an automatic "text input border" default.

At least it is working!

25 Nov 2009, 3:13 PM
#5
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,189
Plugin Contributions:
0

Re: Get rid of box around add to cart button

Un,
Your Welcome,
I would do this, just in case you will find additional errors.

input, select, textarea {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #C0C0C0;
color:#000000;
font-family:tahoma;
font-size:11px;
line-height:13px;
padding:2px;
vertical-align:middle;
}

Change to this:

select, textarea {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #C0C0C0;
color:#000000;
font-family:tahoma;
font-size:11px;
line-height:13px;
padding:2px;
vertical-align:middle;
}

input {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
border:0px solid #C0C0C0;
color:#000000;
font-family:tahoma;
font-size:11px;
line-height:13px;
padding:2px;
vertical-align:middle;
}

  1. That will fix up up. :)

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.

Zen Cart Certified hosting at myZenCartHost.com.

1 Dec 2009, 9:36 AM
#6
wgeoghegan avatar

wgeoghegan

New Zenner

Join Date:
Nov 2009
Posts:
3
Plugin Contributions:
0

Re: Get rid of box around add to cart button

Here's a tip to finding out what css you need to alter;

Install the Firebug addon for Firefox. It lets you inspect a web page and will show you what line of CSS contains the properties you have selected.

1 Dec 2009, 9:51 AM
#7
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Get rid of box around add to cart button

In a standard ZC stylesheet, many of the elements that SHARE a declaration are "nested" together, as this can save a lot of space.

So, it is not unusual to have to "split up" these nestings to give one particular class or id its own declaration.

eg:

#firstItem, #secondItem, #thirdItem {
border: 1px solid #cccccc;
}

In the above, ALL (#firstItem, #secondItem, #thirdItem) will have a solid border of 1px in color #cccccc .

Let's say you want #secondItem to NOT have a border...

#firstItem, #thirdItem {
border: 1px solid #cccccc;
}

#secondItem {
border: none;
}

20 years a Zencart User