Originally Posted by
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)
Code:
<div class="product_list">
<div class="left" style="width:330px">
When looking at the elements, this will show as
Code:
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
Code:
<div class="left" style="width:330px">
and change it to
Code:
<div class="left" style="width:200px>
OR, you can change it to
And then, in the stylesheet_tm.css in the section starting on line#177, add the width style so the .css reads:
Code:
.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
Bookmarks