Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How can i style this element?

How can i style this element?

Locked

Views: 786

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
2 Jun 2010, 4:31 PM
#1
ambitions avatar

ambitions

Zen Follower

Join Date:
Apr 2010
Posts:
125
Plugin Contributions:
0

How can i style this element?

Basically im trying to neaten up every page by tucking in the center column content. From the picture below you can see the the address is too far to the left and so here is where id put a margin-left rule but i have nothing to target?

How would i give this element a margin?
Ive come across many elements that i do not know how to target so i thought id ask and hopefully learn from this example.

The website is http://www.clickpurchase.co.uk if you would like to see this screen yourself, but i have provided the picture aswell.

http://i46.tinypic.com/2wnznfc.jpg
2 Jun 2010, 5:27 PM
#2
stevesh avatar

stevesh

Black Belt

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

Re: How can i style this element?

#checkoutShipAddressDefault address {margin-left:20px;}

The easiest way to figure out what is where is by installing 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. A very handy tool.

3 Jun 2010, 3:31 AM
#3
creation avatar

creation

New Zenner

Join Date:
May 2010
Location:
South Coast of NSW Australia
Posts:
57
Plugin Contributions:
0

Re: How can i style this element?

Thanks for that - learning little by little...
I have another problem--
using Dev.Tool etc as you stated, how do I save the changes??

Also when i open my stylesheets they invariably are in one line a mile long rather than in sectors (as they used to be) How can i get them back into some useable order???

3 Jun 2010, 9:51 AM
#4
stevesh avatar

stevesh

Black Belt

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

Re: How can i style this element?

You don't, in Web Developer. You just make note of the changes that worked and edit the stylesheet directly. I think Firebug has the ability to save changes, but I haven't used it.

Do you have Fast and Easy Checkout installed ? That mod requires the installation of another mod - CSS/JS Loader. That will jam your stylesheet into one long string. If that's it, go to Admin - Configuration - CSS/JS Loader and disable 'Minify'.

An annoyance, IMO, though I don't know how much page load time it saves with usual Zencart css file sizes.

3 Jun 2010, 6:09 PM
#5
creation avatar

creation

New Zenner

Join Date:
May 2010
Location:
South Coast of NSW Australia
Posts:
57
Plugin Contributions:
0

Re: How can i style this element?

Fast and Easy Checkout not loaded -- at least i cannot find anything in Config...

Any other ideas?

As to saving, I have FireFile loaded but have not worked out how to use it. I am told it saves edit changes?

On stylig, on product posts the price/free shipping button etc are all bunched together. Would like to do a better setout but still learning..

creationsdelphine.com/catalogue if you have time. Thanks from down under!