How does the editor Quick CSS/Attribute panel work?

On the right side of the screen, on the bottom half of the closable splitter, you will find the dynamic Element Attribute/CSS Table. This table is designed to offer a quick visual way to make live small changes to your template code.

Clicking on an element in the editor design body will populate this table with the elements and their attributes in a hierarchy order similar to the element path feature. Mousing over the element name will display a block highlighting that element’s position in the editor design body. Clicking on that elements name will select that element.

Below the element name, if any, you will see an editable list of that elements attributes. Element specific attributes are in green and it’s CSS styles are in blue. Advanced users can edit the attributes values by simply clicking in the green or blue box and changing the value. The change will update live, click somewhere off of the attribute table to auto update the changed code.

You can change both the CSS name and value in blue. While changing the values, the text will turn red until the correct CSS values are met. For example, if you are changing a width to “200px” and type “200p”, the text will remain red until the correct “px” is typed. While this is happening, a red undo button will also appear if you need to undo changes to the CSS. The Sellercore editor will remove any left unknown CSS.

Clicking the “Edit CSS” button next to the element name will open the CSS generator for that element.