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.

Any help would be appreciated ;)
Thanks
Nancy

www.sacredcirclegifts.com

[stevesh]

'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.

[karinvd]

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.

[RodG]

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