In this Article

This section contains instructions for applying a CSS style within a certain widget, region, or page. It also shows you how to combine selectors.

    Style a specific widget

    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:

    <div class="content-fragment blog-post">...</div>

    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:

    .content-fragment.blog-post .full-post { ... }

    which would only apply this styling of the full-post class within the context of the blog post content fragment.

    Style within a specific region

    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:

    <div class="layout-region right-sidebar">...</div>

    which identifies that this wrapper is the right sidebar layout region. Style rules can be applied within this region using a selector such as:

    .layout-region.right-sidebar .full-post { ... }

    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.

    Style within a specific page

    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:

    <div class="content-fragment-page home">...</div>

    which can be used in CSS selectors such as:

    .content-fragment-page.home .full-post { ... }

    to only style the full-post class on the home page. full-post markup on other pages would not be affected.

    Combine style selectors

    These selectors, along with ones for header and footer fragments, can be combined, for example:

    .content-fragment-page.home .layout-region.right-sidebar .content-fragment.blog-post-list .full-post { ... }

    to only style the full-post class within the blog post widget when its within the right sidebar on the home page.