Using the CSS Editor

Your store uses cascading style sheets to format the content on each page. To control the formatting of elements throughout your store, you can upload any changes in a custom CSS file that overrides the style sheet used by the theme.

The material in this section requires a basic knowledge of CSS. If you need to learn more, there are many excellent books on the subject, as well as online tutorials and references.

CSS Editor
CSS Editor

Step 1: Download the Style Sheet

  1. From the Admin menu, select Design > Themes Editor.
  2. Select the theme you want to use as a template, and click the Customize button.
  3. In the Theme Customization panel on the left, select CSS Editor. Then, do the following:
    1. In the Theme CSS section, click to select the styles.css file.
    2. When prompted, save the file to your computer.

    You can now open the file with your favorite text editor and become familiar with the styles. The .css files are saved in an optimized format that removes the unused space between words.

Step 2: Enter Your Own Custom CSS Code

In the Custom CSS panel, you can override any existing CSS style, or add new ones. Any custom CSS that you enter overrides the default CSS for the theme. The Firefox plug-in, “ Firebug” is a useful tool that will help you find the styles used by your theme.

  1. To change CSS styles for your theme, either type or paste the CSS styles that you want to change directly into the Edit custom.css field. For example, the following CSS style hides the “Checkout” link in the header:
    .top-link-checkout { display: none; }

    The CSS styles entered in the “Edit custom.css” field are processed last, and override any uploaded custom.css file, as well as the default style sheet for the theme.

  2. If you want any settings from the Design Settings Editor to be ignored, select the Ignore Design Settings Editor checkbox at the bottom of the screen.
  3. Click the Save and Continue Edit button to save your changes and continue working.

See also:

Uploading Custom CSS

CSS Examples

Discussion:

RSS: New Article posts

Explore the Knowledge Base