Instant Search

[dbltoe]

Good info. Another helpful item for me is to right-click on the item or area I want to modify and select inspect.

Whether you do that in Chrome or Firefox, it will bring up the elements on the left and Styles on the right.

Once you find the element you are wanting to modify, it might not have a style associated with it. If so, at the top of the styles list is a + sign. Clicking on that will create a new style and use the selector you need to use in your personalized stylesheet. You can add settings while in the inspect mode and then copy the finished selector to your custom stylesheet.

One additional step is for those selectors that you only want to modify in a particular spot. (remember they are often all-inclusive while classes and divs are not) Say, the p tags in the define_main_page and not the rest of the home page. In the elements side, look to see if that p tag has a class or ID. If not, start up the list of Elements untill you find a class or ID. You then add that to the p tag so that the browser knows to add that styling to only the p tags in the define_main_page. In a stock 1.5.8 Zen Cart using the responsive_classic template, the resultant selector to turn all the p tags in the define_main_page to red would be:

#indexDefaultMainContent p {
color: red;
{
}

The benefits are that, doing this while in the inspect mode, you can see if it is going to work before you add it to your custom stylesheet and the inspect mode will assist you in getting the proper syntax.