User Tools
Sidebar
startup_tutorial_and_checklist:design_configuration:editing_css:finding_css
Table of Contents
Finding the CSS Control You Are Looking For
The first place to start is the source code of the page you want to change some css you wish to change on. Within the source code you will find two things: the css tag you want to change and the css files included in that page. You can always see the source code of the page you are looking at within any browser by right-clicking your mouse on that page within the browser. You will then click the view html source selection within that menu and the ensuing popup should be the html source code of the page you are viewing. Within the Firefox browser you can even selection specific html elements in the page you are looking at and then right-click. Then click the "view selection source" choice and the ensuing popup will show the html source to the elements you selected. This can save a lot of time sifting through the full html source of a page to specifically find the html source you want to change.
The css files that affect any page are included within the html <head> statement of the source code. Any css style sheets included will look like the one here that calls the default design's main css document:
<link href="geo_templates/default/external/css/theme_styles.css" rel="stylesheet" type="text/css" />
Still the system may insert other css file references like this that refer to specific modules or other specific functionality:
<link rel='stylesheet' type='text/css' href='/support/geocore-wiki/doku.php/id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,support;geocore-wiki;doku.php;id,geo_templates;default;external;css;module;my_account_links.css;;;;;;;;;;;;;;;/' />
So to edit any of the css within the page you are currently looking at you will need to look through these files to find the css tag you wish to manipulate. Within a design that is based on the v5 default design you will always find the theme_styles.css file referenced. Also note that each addon and module can have their own css files included also not to mention the wysiwyg.css file referenced if necessary. If you have a design that was imported into v5 from a previous version you may see several css files mentioned. So there may be a few css files to sift through looking for a specific css in circumstances like this.
Once you know the css files you will need to search within for specific css you will now need to find which css you need to look for. Check the html immediately around the html you want to affect. You should see "class=xxx" references everywhere and that "class" value immediately "outside" the html you want to affect is the css value you will need to find within the css files referenced in the <head> of that same document. If you are using all (if not most) of the default v5 design you will find yourself looking through the theme_styles.css document quite a bit as most css is within that document. But there are instances where other files may need to be edited for some specific css. Many of these other css files referenced in the <head> are aptly named after what they specifically affect if they are Geo default/generated files so looking for some specific css used within a specific addon or module functionality will be easy. If you are editing a pre v5 design that has been imported into v5 you may see several css files each for a specific pre-existing module and finding the specific css you need to edit may be a bit of a task.
Using the Text Search Within the Design Admin Tool To Find CSS Usage
If you know the css control you are looking for and need to find where that css is used throughout the template design you use you can use the DESIGN > TEXT SEARCH admin tool. Just enter the css tag you are looking for into this tool and click search. You will most likely not find it within the Pages/Modules Text tab unless that css tag is referenced directly within any of the text you manage within the PAGES MANAGEMENT admin tool. You will most likely find all the instances of that css within the "Template Contents" tab of the DESIGN > TEXT SEARCH admin tool. Using this tool you can find all of the places within the design your specific css changes will possibly affect.
startup_tutorial_and_checklist/design_configuration/editing_css/finding_css.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
