A look at the Theme CSS used in our GavernWP framework-based WordPress products
A theme’s CSS code is divided amongst a series of files loaded in a specified order. All of these files are found in the catalog css. The order of these files is very important; any alteration may cause unpredictable changes to the theme’s look as a result of switching from general styling to detailed styling in the CSS code.
The list of CSS files used in a theme is presented below (listed in their recommended loading order):
- normalize.css – CSS code which unifies a page’s element styling in all browsers.
- font-awesome.css (optional) – The full suite of Retina ready pictographic icons, e.g. for widget titles
- template.css – Possibly the most important of the CSS files, it is responsible for page layout styling, basic typography, widget styling, etc.
- wp.css – The CSS rules responsible for WordPress element styling, e.g. a comments form , comments themselves, or post elements.
- stuff.css – This includes styling of additional theme elements, such as the breadcrumbs
- wp.extensions.css – CSS rules for styling standard WordPress widgets.
- extensions.css (optional) – A CSS file you must add yourself to style additional widgets. In the case of small style changes, we recommend using the override.css file instead of this one.
- shortcodes.*.css (optional) – A group of CSS files responsible for typography element styling inserted into posts using Shortcodes.
- tablet.css – CSS rules used while displaying a page on tablet devices.
- mobile.css – CSS rules used while displaying a page on smartphone (or other handheld / mobile) devices.
- ie*.css – One or more CSS files used to correct a page’s appearance in the Internet Explorer browser.
- style*.css – One or more CSS files used to change colors or the general style of a theme. These are loaded automatically by the mechanism responsible for the theme’s coloring.
- error.css – CSS rules used while displaying a error page
- rtl.css(optional) – CSS rules for language written in a Right-To-Left (RTL) direction
- override.css (optional) – You may add your own rules to this file which will override existing rules from previously-loaded files. This is the solution we strongly recommend to implement modifications without altering the default CSS files.
In addition to the above CSS code used in the theme itself, you will also find, in the themes catalog, a set of CSS files which are loaded depending upon the specific styles chosen for subpages; for example, one may be needed for the correct functioning of a gallery.
This article was first published
