User Tools
Sidebar
startup_tutorial_and_checklist:design_configuration:editing_css:start
Table of Contents
Managing the CSS in Your Design
There are no specific "css administering tool" within our software anymore. All default designs css for dynamic "body html" content (placed by the {body_html} tag) and page template content is managed in one or more css file included within the default template set. Within the default design page templates you will find the css file referenced within the <head> statement that modifies that page on the client side.
In versions 7.3.0 and up, the CSS file is added automatically by the {head_html} tag in the template. For versions before this, the default design specifically puts any CSS file references directly within the head.tpl template. As of the default design for v7.1 and up that looks like:
<link href="geo_templates/my_templates/external/css/theme_styles.css" rel="stylesheet" type="text/css" /> <link href="geo_templates/my_templates/external/css/primary_theme_styles.css" rel="stylesheet" type="text/css" /> <link href="geo_templates/my_templates/external/css/secondary_theme_styles.css" rel="stylesheet" type="text/css" />
Note that the above references files in the "my_templates" directory. The "my_templates" directory is the name of the template set those files are found in your admin tool. You may have actually named your template set differently and if so that name would appear where "my_templates" appears above in your site. So to get to those files in the admin tool to make changes to them you would use the following admin tool:
DESIGN > MANAGER
Make sure it's editing the template set you actually use and and find those files to edit in this directory page:
/external/css/
So no matter what template design you are using the CSS file manipulating the page you are viewing is referenced within the html <head> of the page you are looking at.
Why Multiple CSS Documents by Default
In css remember that if there are duplicate css available that the last applied/defined css will override the others. Within the theme_styles.css css file we define all the color elements of the design. But we've also created primary and secondary template css files that set those same colors and override those set in the theme_styles.css file.
The css definitions within the primary_theme_styles.css only has "primary color definitions" within it. The secondary_theme_styles.css file only has "secondary color definitions" within it.
Having these primary and secondary css files allows us to easily set different primary and secondary color schemes within the site by simply uploading different secondary_theme_styles.css and primary_theme_styles.css files to your site. Pretty simple task to have a large impact on design.
Editing CSS Files
Remember that you can edit any of these "system" included/created css files within the DESIGN > MANAGER admin tool. If using this editor note that you must save the contents of your changes and then refresh your browser on the client side to view any changes. In some instances you may need to start a process over (registration, classified or auction placement,…etc) to see the affects of your css change.
Also since the css files are in the file system of the software you can download them locally to your machine and open in a text file editor there. Make sure the text editor you use is a code editor. Do not use Microsoft Word (or something similar) as these programs change the file to make it more human readable and possibly unusable as a css reference file. You can use a text/code editor like that is freely found at textpad.com to edit "code" files like php, html and css file source code without worrying about corrupting or unnecessary changes imposed by the software itself.
But note if you choose to make these changes locally that you must save your progress, re-upload the file properly over the same file in your Geo software installation and then refresh your browser.
Finding Errors In Your CSS
There may be times when you add changes to your css files and they do not seem to have any effect on the client side. Or sometimes you make a change but the default css seems to be the only one having an effect. If these are happening the changes you have made may have inserted errors into your css documents. Lets say you make a css document parse error about halfway through your custom template sets theme_styles.css document. You come back later and make changes about 3/4 the way through your theme_styles.css file and those changes do not seem to be making any changes from the default theme_styles.css settings. The parse error you made about halfway through the theme_styles.css file has made the browser stop parsing your theme_styles.css file at that point. Any changes past the first parse error in a css document are ignored. Just incase this happens we have included the default template set theme_styles.css document so that if you do insert a parse error into your document your site still works because the default css still has an effect.
You can easily check your css documents for parse errors using the following publicly available tool from the w3c:
http://jigsaw.w3.org/css-validator/
Then insert the full url of your css documents. You can view the html source of you Geo software pages to get the relative url of your css documents. You'll find something like the following in the html head of your pages:
<link href="geo_templates/my_templates/external/css/theme_styles.css" rel="stylesheet" type="text/css" /> <link href="geo_templates/my_templates/external/css/primary_theme_styles.css" rel="stylesheet" type="text/css" /> <link href="geo_templates/my_templates/external/css/secondary_theme_styles.css" rel="stylesheet" type="text/css" />
The "my_templates" part of your paths may be different because that should be the name of your active working template set. If your site happened to be "http://example.com" the urls you would insert into the w3 page above would be these:
http://example.com/geo_templates/my_templates/external/css/theme_styles.css http://example.com/geo_templates/my_templates/external/css/primary_theme_styles.css http://example.com/geo_templates/my_templates/external/css/secondary_theme_styles.css
Correct any mistakes they point out to make sure all your css changes have the proper effect on your site design.
startup_tutorial_and_checklist/design_configuration/editing_css/start.txt · Last modified: 2014/09/25 16:55 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
