Forums / Installing on a Windows Server / Where is element.style to edit? I used developers tool and looked everywhere lol

Where is element.style to edit? I used developers tool and looked everywhere lol

Views: 5,077

Results 1 to 4 of 4
8 Jun 2014, 4:51 AM
#1
laidlawgifts avatar

laidlawgifts

New Zenner

Join Date:
Jun 2011
Posts:
31
Plugin Contributions:
0

Where is element.style to edit? I used developers tool and looked everywhere lol

I use "inspect element" on my webpage and then play with numbers in the popup to the right side.
I needed more padding between some elements and put it in, and it was changed in element.style.
These changes are temporary and are just for debugging or playing, so I need to find that element.style
to make the change permanent.

Any help would be appreciated ;)
Thanks
Nancy

https://www.sacredcirclegifts.com

8 Jun 2014, 1:06 PM
#2
stevesh avatar

stevesh

Black Belt

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

Re: Where is element.style to edit? I used developers tool and looked everywhere lol

'Style' is used to add inline styling rather than using the stylesheet. I don't recommend doing so, but it appears Template Monster disagrees. We'll need to know exactly what you want to change, and how, to be of any help.

8 Jun 2014, 1:27 PM
#3
karinvd avatar

karinvd

New Zenner

Join Date:
Nov 2012
Location:
Utrecht, Nederland
Posts:
43
Plugin Contributions:
0

Re: Where is element.style to edit? I used developers tool and looked everywhere lol

If you want to find something like a function or a styl or any word in the files of zencart, you can use the developer toolkit in the admin aria to search. You wil find it in the tool menu.

8 Jun 2014, 4:01 PM
#4
rodg avatar

rodg

Deceased

Join Date:
Jan 2007
Location:
Australia
Posts:
6,263
Plugin Contributions:
4

Re: Where is element.style to edit? I used developers tool and looked everywhere lol

Laidlawgifts:

I use "inspect element" on my webpage and then play with numbers in the popup to the right side.
I needed more padding between some elements and put it in, and it was changed in element.style.
These changes are temporary and are just for debugging or playing, so I need to find that element.style
to make the change permanent.

If the element.style you changed was already in the 'element.style' section at the top of the list of styles, it implies that the style value has been hardcoded into the page (aka, an inline style).

If you added a style to this section, it means that you've added it to the wrong place.

If it IS an an inline style, there are two ways to make it permanent.

The 1st way is to use the developers toolkit and find where it has been hardcoded, and change to suit you needs.

A better way (in my opinion) is to remove the hardcoding completely and create a class element so that you can make changes via the stylesheet(s).

Example: (from your site)

<div class="product_list">
<div class="left" style="width:330px">  

When looking at the elements, this will show as

element.style {
width: 330px ;
}
.product_list   stylesheet_tm.css:117 
.left {
float:left; 
position: relative;
text-align: left :
}

So, if you want to change this width to 200px, you'll need to find the code that produces the inline ```

<div class="left" style="width:330px"> ``` and change it to ``` <div class="left" style="width:200px> ```

OR, you can change it to

 <div class="left"> 

And then, in the stylesheet_tm.css in the section starting on line#177, add the width style so the .css reads:

.product_list .left {
float:left; 
position: relative;
text-align: left :
width: 200px ;
}

Most people tend to do the 'quick n dirty' method of changing the inline style, but moving it to the .css makes maintenance and further tweaking a lot easier.

Cheers
RodG

NOTE: We are sorry that Rod is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

Ozpost - The Ultimate Shipping module for Australian Merchants. Click these links for its Homepage, or Download from Zen-Cart.com.