Aisle7 :: Overriding Styles
Implementation Guides

Search Documentation

Overriding Styles
Online > Content Styling > Approach to Styling > Overriding Styles

Aisle7 content has the following attributes that impact styles:

  • Markup is typically structured using simple, common inline and block elements such as divs, lists, paragraphs, spans, and tables.
  • Common user interface graphics are typically placed using styles and can be overridden with your styles.
  • Nearly all text inherits its styling from a selector applied to the Body tag, which can be overridden using a style specific to the div containing your Aisle7 content.

 

Identifying Styles

While our styles tread as lightly as possible for complex content, they are designed to work with Aisle7 content. If your Aisle7 implementation doesn’t match the desired look and feel of your site, check for an overriding style in your sheet and create an Aisle7 complement that resolves the conflict.

1. Use a web developer tool such as Firebug to identify Aisle7 elements that have been restyled by your site and need formatting help. 

For example, in Firebug, the overridden Aisle7 style will be crossed out. You would uncheck possible competing styles in your sheet to identify the conflict.

Tip: If you can’t locate the style in the selector for the current element, look “up the chain” in the style sheet to the styles for a parent element.

2. Copy the desired Aisle7 style rule from the developer tool into your style sheet. Make the selector longer than the competing style in your sheet; for example, include the unique Aisle7 div class, the parent div ID/class, and the class of the element to style.

 

Global Style Rules

As a general rule, web developers should shy away from setting global styles that broadly affect entire websites. Setting global rules is a powerful styling technique, which literally cascades through a website, often with unintended results.

Among the most common applications of global styling is to adjust the sitewide "margin" and "padding" of all elements. Please be wary that this practice may also change the display of Aisle7 content, in potentially adverse ways. 


Overriding Styles

Creating a longer selector should always override a competing style. Use the additional class names or ID's within the parent elements to achieve this.

For example, the following style name identifies the horizontal tabs—actually an unordered list—used in primary callout widgets wherever they display:

div.hni_HomeCallouts .hni_HomeCalloutTabs { }

To clearly identify this style in your sheet, add the parent ID and the list element, making the style more specific and more powerful:

div.Aisle7_Content div.hni_HomeCallouts ul.hni_HomeCalloutTabs { }

 

Key points:

  • Identify formatting and style issues using the developer tool.
  • Choose the style rule that needs to be reasserted.
  • Copy the entire style from the tool into your style sheet.
  • Increase the selector's power by extending the style name—use parent element classes and chaining as shown above.
  • Avoid usage of global styles.