Sidebar

startup_tutorial_and_checklist:design_configuration:editing_css:css_no_effect

Why Are My CSS Changes Not Working?

There could be several reasons your CSS edits are not having the effect you expect. Here are a few questions to ask your process:

Are you making changes to the correct css?

Are you making changes to the correct css to affect what you want? If you wanted to change the look of links in the page did you change the "a:link", "a:hover", "a:visited"….etc values or just one…or just the "a" target? If you want to change the background color of an element how is it current set? Is it an actual color set? Or is the color provided by a background? The easiest way to find what css is affecting anything is through the use of the built in tools of your browser. These tools can point out exactly what css are affecting any single element in the design. The browser tools for CSS discovery page of the support wiki describes how to do that. The following is a screenshot of that tool in action:

Are you making that change in the correct CSS file?

You may be making the changes to the correct CSS but one of the tenets of CSS is the use multiple files to include the CSS for a page and that the same CSS in a "later included file" will override the same CSS included in an earlier file. You could even have two references for the same CSS in the same file and ONLY the latter CSS will apply. The browser inspectors mentioned above can help that also. Below is a screenshot of the CSS file something is found in and even the line it's found in that file.

Do you have the combine/minify feature on within the software?

This feature allows you to combine all CSS and JS files used on your site into one file and then minify that file to compress it further. This feature of the software helps to speed page load to reduce the number of calls back to the server to load the current page (combine) and then further shrink the one file to download (minify). When making CSS or JS files in your Geo site you should turn off the combine/minify features. The combined/minified single files created by the software are created once on the fly from all the CSS/JS files you use in your design. You cannot make changes to the combined/minified file as they are likely to be overwritten from the source CSS/JS files at any time. What you want to do is edit the source CSS/JS files and then recombine them when you have made all your changes. We suggest you leave the combine/minify feature off while you are developing your site and turn it on once that's done. You can always turn it back off in the future if you need to make additional changes. You can turn off the combine/minify feature here in the admin tool:

DESIGN > SETTINGS > Combine, Minify, and Compress CSS and JS (Recommended for Live Sites)

Below are examples of the combined CSS file you should not change and the non-combined CSS files where you should make your changes.

Do you have multiple CSS files in your site and managed as template sets in our software?

You can include mulitple templates sets within our software and have a template set specific to set some specific CSS across all your template sets. Many clients do this when they download one or more of the "color based template sets" we supply on our site. These allow you upload a single template set to set site colors easily and edit them easily to get what you want. Their order of appearance in the following admin tool affects how their CSS will work:

DESIGN > TEMPLATE SETS

So play around with the order but consult the how template sets are chosen article for details

startup_tutorial_and_checklist/design_configuration/editing_css/css_no_effect.txt · Last modified: 2014/09/25 16:55 (external edit)