Using the CSS Editor

Design > Themes Editor > Customize > CSS Editor

Magento Go lets you add your own custom cascading style sheet (CSS) file to override any of the default CSS that is used in the available themes. This gives you control over the styling of all of the elements in your store.

This section will not teach you how to use CSS, please see one of the many excellent online tutorials or books on learning and using CSS if you are not familiar with it. In addition, the Firebug plug-in for the Firefox browser is an invaluable tool for working with existing CSS files and determining what to change in them. It can be downloaded directly from the Firefox website.

1. From the Admin panel, go to the Design menu and select the Theme Editor.
2. In the list of Available Themes, select the theme you want to customize by clicking the Customize button.
3. Select the CSS Editor tab from the tabs at the left.
4. In the View Theme CSS panel, you can click into any of the CSS files used in your theme to see all the styles set up there. You can’t edit these theme files directly.
5. In the Custom CSS panel, you can override existing CSS styles or provide new ones for your theme. Any custom CSS you provide overrides the default CSS for a theme.
6. To change CSS styles for your theme, you can enter your new CSS styles directly in the Edit custom.css field.  For example, the following CSS style will turn off 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 will override styles uploaded as a custom.css file and in the default theme css files.

7. You can also create a new CSS file with just the CSS definitions you want to override in it and upload it using the Upload custom.css file field. (You don’t have to include all of the default theme CSS definitions for your theme, just the ones you want to change.) Click the Browse… button to find your CSS file on your machine and upload it to the Magento Go server.
8. If you want to have background images or other assets added to your theme using your custom CSS, you can upload those images using the Images Assets area. Click the Manage button to use Magento Go’s standard image uploader to upload your images to the Magento Go server. When you upload images to use in your CSS styles, it’s important to note that their specific location on the CDN (content delivery network) server could change, so always use relative paths in your CSS when referencing them. The default relative path is:

   ../css_editor_images/imageName

   In your CSS, this would look like:
   .styleName { background:url(../css_editor_images/imageName.gif) no-repeat }

   If you’ve created a subdirectory for your images the correct relative path will be of the following form and you should adjust your CSS references to match:
   ../css_editor_images/subdirName/imageName

Common CSS You Can Use in Your Theme

Below are some examples of CSS customizations you can use to make common modifications to the Media theme, which has been used throughout this chapter. Enter styles like the following into your Edit custom.css field to see what they do:

/* To remove the white space under the nav bar at the top of the page */ .top-container { margin: 0; padding: 0; }

/* To turn off the checkout link at the top of the page and remove the separator bar after the cart link */ .top-link-checkout { display: none; } .top-cart .block-title strong { background-image: none; }

/* To move the search box down into the nav bar area */ .header .form-search { position: absolute; right: 10px; top: 100px; }

/* To remove the Newsletter signup from the footer */ .footer .form-subscribe { display: none; }

Each theme is a little different, so these are only examples. Your specific style values will depend on your theme. Use the Firefox plug-in Firebug to help you determine the specific div names and style values to provide for your theme.