With version 3.0 of the Store Editor, it is possible to create CSS files directly within the Editor, not just upload them to the Files area. For your convenience though, we have already included an empty placeholder CSS file referenced in your templates called css-edits. Rather than editing the main stylesheets for your templates, it is better that you make any edits to your CSS files in this css-edits file. That file is already referenced as the last CSS file in the templates, so any edits you make there will be picked up by the browser when your page is rendered.

Jump to:

• Add CSS to the css-edits file
• Create a new CSS object

Add CSS to the css-edits file

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Store Editor.
   
4. From the Advanced Editor toolbar, go to Contents.
   
5. Click the edit icon next to css-edits.
   
6. Enter your CSS at the end of any existing code in the css-text field.
   
7. Click the Update button. The change takes effect immediately in the Editor.
   
8. Publish when ready.
   

If you wish to create your own CSS file and reference the CSS file from your templates, you would also need to override the Head-tags variable to reference your custom CSS template.

Create a new CSS object

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Store Editor.
   
4. From the Advanced Editor toolbar, go to Contents.
   
5. Click the New button.
   
6. On the Create New Object dialog:
   • Enter a name for your new CSS file into the Id field.
   • Select css. from the Type pull-down menu.
   • Click the Continue button.
   
7. Add the CSS you wish to use into the Css-text field.
   
8. Click Update when complete.
   

With the new CSS file created, you will next have to reference the new file so the page(s) pick up the new stylesheet.

Override your Head-tags

1. While still in Store Editor, go to Variables.
   
2. Insert the following into the Head-tags variable field (where css-file.css represents the name of your new CSS file):
   <link rel="stylesheet" href="css-file.css" type="text/css" />
   
3. Click the Update button.
   
4. Publish when ready. Note: This change will require a full publish.
   

Notes:

• You can choose to override the Head-tags variable on a specific page (or pages) if you want to apply the custom style sheet only to that page. Overriding the global Head-tags variable will reference your new stylesheet across all pages.
• While it is not necessary to create CSS objects as you can upload CSS files to Store Files and reference them, creating the CSS as objects allows you to reference variables.