This section contains instructions for applying a CSS style within a certain widget, region, or page. It also shows you how to combine selectors.
Each widget is rendered with an identifier that is automatically generated based on the widget's internal programmatic class name. These CSS class names can be determined by looking at the rendered source or by using a tool such as Firebug in FireFox.
As an example, the Blog - Post widget is rendered within a wrapper such as:
which identifies both that this is a content fragment (widget) and this particular widget is the blog post widget. Styles, then, can be applied within this type of widget using a selector such as:
which would only apply this styling of the full-post class within the context of the blog post content fragment.
All regions are identified by their names within the rendered markup. For example, the right sidebar of the content-and-right-sidebar layout is rendered within a wrapper such as:
which identifies that this wrapper is the right sidebar layout region. Style rules can be applied within this region using a selector such as:
which would only apply to the full-post class within the context of the right sidebar region. full-post markup in the content region would not be affected.
All pages are rendered within a wrapper that identifies the page's name. For example, the home page of the site is rendered in a wrapper such as:
which can be used in CSS selectors such as:
to only style the full-post class on the home page. full-post markup on other pages would not be affected.
These selectors, along with ones for header and footer fragments, can be combined, for example:
to only style the full-post class within the blog post widget when its within the right sidebar on the home page.
so how could we actually modify these CSS rules? In which file do they reside and how to access them?
The document identifies how to target markup generated by the platform, it does not call out any existing/defined CSS selectors (so there is nothing to modify).
Existing CSS for the out-of-the-box themes is stored in the CSS files referenced by the site theme (Control Panel > Administration > SIte Administration > Site Content > Site Theme > HTML Headers > CSS Files.
In general, it is better to add new CSS files and override existing rules instead of editing existing rules if you're making minor tweaks as this enables reversion to updated versions of first party themes. If you plan to make significant changes, you can download the existing file, edit it, and re-upload it via the location mentioned above in the Site Administration control panel.
Telligent Systems, Inc. ©2013, All Rights Reserved