Editing CSS Selectors with iColorPicker

iColorPicker allows you to easily customize literally any color and font from your OpenCart theme without any mighty programming knowledge. One of the latest and greatest features that we have implemented in iColorPicker is the CSS Selector function. It is useful for picking the right CSS Selector from your theme and thus changing its color. If this is the first time you come across the term CSS Selector, no worries. A CSS Selector is a pattern that is used to selecting an element we want to change. This tutorial is intended as an ABC on how to use the powerful CSS Selector function.

After we have successfully installed iColorPicker on our domain, in our case it is http://demos.isenselabs.com/icolorpicker, we can login at our web store admin with our administrator credentials. Next, we need to access iColorPicker. To do that we have to go to Extensions/Modules/iColorPicker and then click edit. After iColorPicker loads we click on the Colors tab, from where we will go for changing the CSS Selector .

iColorPicker comes with a default list of elements which colors you can change. As a starting point we can edit the existing ones or add a new one from the + Add Color Box button.

iColorPicker also gives you a variety of CSS Properties that you can change. One can choose among changing Color, Background color, Border Color or Outline Color. Should you need you can easily delete a row using the delete box button.

Now that we have learned the semantics, lets take iColorPicker to the field and see it in action. In this demo, we will show you how to change the footer color. For this sake I have added a new row, using the color box option. I have quickly filled in the other fields, set color to #ffffff, chosen Background-color from CSS Properties and left the CSS Selector empty.

Time to Save, before I can use the CSS Selector option. Having successfully saved, upon clicking on the CSS Selector option, the button Choose Selector appears on the left. Your current theme will appear in a pop out window. Now, everything I have to do is select the element I want to change - in this case the Footer and click on Choose Selector. There is a red slashed line on the borders of the selected element, denoting which element you have selected. Upon clicking, the CSS Selector is copied.

Afterwards, we click save, so that we have the new CSS Property appear in our store front. We open a new tab with our store front (type the web address of your e-store), select the color that we want to use from the iColorPicker front panel and paste it under the color option of the property in the admin panel. 

Voila. We have successfully changed the footer color of our theme without any developer knowledge.