Troubleshooting your Theme
If your preview does not look right after you make a design change, below are a few things to check. The Firebug plugin for Mozilla's Firefox browser can be a useful tool for checking which styling is being applied to your page. If you use Firebug or a similar tool, be sure that you use it on the preview of your page. If you use Firebug in the layout editor it may be difficult to select the correct page element in the CM1 formatting.
Does the template use the theme you are editing?
The template may be associated with a different theme or with no theme at all. Check the template editor and confirm that the template is using the theme you are editing. If it is not:
- Click the Style tab.
- Click Select Theme.
- Select the theme you want to assign to the template.
Does the browser cache contain old data?
Browsers often cache images and CSS. To be sure this isn't the problem, clear your browser cache and refresh your preview.
Does the page have the right content to preview your changes?
If the page does not have the right content, you may not be able to see the effect of your style updates. For example, if you are styling the numbers on an ordered list but the page does not have an ordered list, you will not see the effect of your styles.
Is the selector being applied?
Use a tool such as Firebug to determine which selector is being applied.
A useful technique for checking on selectors is to pick a property you know works and change it. When you refresh the preview, check to see whether the change has been rendered on the page.
Some common reasons a selector would not be applied are:
Is the selector nested correctly?
You may need to add more elements to your selector, or change the order of elements, to ensure that it applies correctly.
Is a selector with a higher priority overriding your selector?
You may need to redefine your selector to ensure it has the right precedence to take effect. The order of selectors in the theme CSS can also affect the priority. Rules defined later in the file take precedence over rules defined earlier. Defaults and more general rules should be defined at the top of the theme CSS, while overrides and more specific rules should be defined later.
Is a declaration in a more specific selector overriding the rule you are working on?
All rules that match will be applied to an element, but more specific declarations win out over less specific declarations. You may need to revise your rule to ensure that you define your declarations with the right specificity.
Is the declaration correct?
Are units missing on the style rule?
If units are missing on a property that requires units, the property does not take effect.
Are all properties on the rule closed properly?
All properties should be closed with a semi-colon. If a property is not closed with a semi-colon, the property is not applied.
Is the shorthand used in the rule correct?
An incorrect shorthand may result in different styling than you expect.
Does the property do what you think it does?
The name may not be a clear indication of the affect of a property. For example, the center property cannot be used to center elements on a page. Check with a CSS reference to confirm that the property has the desired result.
Does your browser support the CSS feature you are using?
Not all features are supported by all browsers. To determine whether a feature you want to use is supported by a specific browser you can visit http://www.quirksmode.org/css/contents.html
This page lists major CSS features and indicates how well they are supported by different releases of major browsers.
Are you using important tags?
In CSS you can use a tag at the end of a specific line of CSS that says: !important.
For example: color: #000 !important;
That will allow you to override any lines of CSS that are in other CSS files, like the Percussion CSS that applies to our out-of-the=box widgets.