CSS Classes

Important: Make sure you've read the site-specific notes for your site, too! The following is a list of CSS classes that you can (and should) use. These formats should work on all SRD sites:

Main Article Image

Use for the main image at the head of the article, if there is one. Currently just floats to the right. May do more when we optimize for mobile users later.

<div class="mainimage">
   (include img tag and anything else applicable such as a caption or hyperlinks in here)
</div>

Flexbox

Flexboxes are used for creating multiple columns that wrap nicely according to the browser width. Useful for lists, such as index pages.

<div class="flexbox">
  <div>
    (Column 1)
  </div>
  <div>
    (Column 2)
  </div>
  <div>
    (Column 3)
  </div>
  ...
</div>

Boxes and Sidebars

FAQ Boxes

Typically aligned left, full width on narrow screens.

<div class="faq">
     <div>title here</div>
     <div>content here</div>
</div>

Content Sidebars

Typically aligned right, full width on narrow screens.

<div class="content-sidebar">
     <div>title here</div>
     <div>content here</div> 
</div>

If the sidebar can appear further down the page, add the “canwait” class.

<div class="content-sidebar canwait">

Info Sidebars

Pretty much the same as content sidebars, but orange!

<div class="info-sidebar">
     <div>title here</div>
     <div>content here</div> 
</div>

If the sidebar can appear further down the page, add the “canwait” class.

<div class="info-sidebar canwait">

Custom Content Boxes

Typically full width

<div class="custom-content">
     <div>title here</div>
     <div>content here</div>
</div>

Section 15

<div class="section15">
    <div>
        Section 15: Copyright Notice
    </div>
    <div>
        (include the relevant part of the Section 15 copyright notice for the product here)
    </div>
</div>

IFrame Content

When using an [iframe] shortcode, or potentially anything else embeddable, this div sizes responsively to an acceptable size for the user’s screen. The iframe within can then be set to height and width 100%.

<div class="iframe-content">
 [iframe src="http://iframe.source.com" height=100% width=100%]
</div>

Table Zoomer

By default, any table with more than two columns gets a dynamic "Zoom Table" link to pop it open in the full browser window size. This may not be appropriate for all tables, so two utility classes have been added to force zooming on or off.

To force a table to have a "Zoom" link, add the zoom class:

<table class="zoom">

To force a table not to have a "Zoom" link, add the nozoom class:

<table class="nozoom">