Aisle7 :: Styling Tabs
Implementation Guides

Search Documentation

Styling Tabs

Many pieces of Aisle7 content include tabbed navigation allowing users to toggle between different sections of information. Review the two primary types of tabs below.


Text Based Tabs

Many types of Aisle7 assets use text based horizontal tabs for browsing. Each tab scales to the width of the text label—when the total width exceeds 475 pixels, the tabs wrap to a second row.

These tab text fonts inherit the default font size used on your site. If tabs wrap, add the tab font style to your style sheet and reduce the size until the tabs display in one row. Be sure to review tabs in Internet Explorer and Safari—they tend to render fonts larger than Firefox and Chrome.

The following style targets the horizontal tabs in callout widgets:

	div.Aisle7_Content div.hni_TabsWrapper
		{ font-size: 0.85em }

Graphical Tabs

Some Aisle7 assets include graphical tabbed navigation, as seen below. To render properly, such tabs should have a minimum of 500px of space for display. Narrower constraints may cause the tabs to wrap onto a second line.

The following style adjusts the color of the icons of all tabs:

	div.hni_tabswrapper.hni_mainstream li div.hni_tabimagecontainer img
		{ background-colorred; }