• 13 steps in this guide

    1. 1

      Introduction to the CSS framework

      Introduction In order to properly differentiate between CSS classes and HTML elements that form part of the IPS4 framework and those that do not, and in order to create a logical structure that can be understood at a glance, naming conventions are applied as follows. Framework classes & elements The IPS4 CSS framework is split into loosely-defined 'modules'. A module groups together related styles in a single file, with the aim of making it clearer which styles will be applied to a given element, and also to make it easier to find those styles to edit in the CSS files. All framework classes and elements take the name format ipsModule, where Module is the type of style being defined. Within a module, additional classes can be defined in the format ipsModule_option. Note that the module name and module options both use lowerCamelCase notation, with the module name and option separated by an underscore. Normally, an element will receive the base module class, plus some options. There are some cases where only the option class is needed; see individual module documentation for details. In general, the framework shouldn't be used with element IDs, since this restricts their use to one per page. The exception to this is aspects of the layout module, where page structure will naturally only exist once. Example of framework names: .ipsMenu .ipsTabs_item #ipsLayout_mainArea .ipsComment_hasChildren   Writing CSS for custom themes As a rule, you shouldn't edit the framework CSS files directly. Doing so is prone to breaking future updates, or at least making it harder to upgrade your site between versions. Instead, all of your changes should live in the custom.css file at /core/front/custom/. You can create other CSS files within the custom directory if you wish and these will also be included. CSS files in the custom directory are not modified by the IPS4 upgrader, meaning your changes will safely persist across versions. Determining which elements use which CSS classes When editing your theme, we recommend you make use of the developer tools available in your browser to inspect the page and find out which CSS classes are applied to elements. Consult the documentation for your choice of browser to find out how to do this. This is an example of Chrome's Web Inspector:   Writing CSS for custom applications CSS for your custom applications belongs in the <app>/dev/css/front/ directory. Consult the PHP framework documentation for information on using CSS files you create here.
    2. 2

      Layout: Columns

      Description The column module, unlike the grids module, provides classes that enable layouts comprising both fixed and fluid columns to be easily created. This is a layout often used for fixed sidebars with fluid content areas, for example. Additional classes are available to collapse the layout on smaller devices.   Usage A column layout consists of a wrapper element, with the column elements as direct descendants of the wrapper. No other layout classes should be applied directly to the column elements. An example of a column layout: <div class='ipsColumns'> <div class='ipsColumn ipsColumn_medium'>Fixed column</div> <div class='ipsColumn ipsColumn_fluid'>Fluid column</div> </div> This would render as follows (background colors and padding added for clarity): Fixed column Fluid column The wrapper receives the classname ipsColumns (note: plural), while individual columns receive the classname ipsColumn (note: singular).   Column Sizing A number of different classnames are available to change the column sizing. One of these classes should be applied to each column in addition to the base ipsColumn classname. ipsColumn_veryNarrow - 50 pixels wide ipsColumn_narrow - 120 pixels wide ipsColumn_medium - 200 pixels wide ipsColumn_wide - 280 pixels wide ipsColumn_veryWide - 360 pixels wide ipsColumn_fluid - Takes up remaining space; should be used on all fluid columns   Border Spacing By default, no spacing is provided between columns (see example above). Spacing can be included around columns by using one of the three following classnames on the root ipsColumns element: ipsColumns_verticalSpacing - 15 pixels vertical spacing ipsColumns_horizontalSpacing - 15 pixels horizontal spacing ipsColumns_bothSpacing - 15 pixels spacing on all sides The spacing can be halved by also including the ipsColumns_halfSpacing classname. <div class='ipsColumns ipsColumns_bothSpacing ipsColumns_halfSpacing'> <div class='ipsColumn ipsColumn_medium'>Fixed column</div> <div class='ipsColumn ipsColumn_fluid'>Fluid column</div> </div> Fixed column Fluid column   Responsiveness To cause the layout to collapse on smaller devices, add the classnames ipsColumns_collapseTablet or ipsColumns_collapsePhone to the wrapper element. Columns will collapse into source-order, one after the other.
    3. 3

      Layout: Grids

      Description The grid module provides classes for building layouts based on a flexible 12-column grid, with automatic margins, and with additional classes to enable the layout to collapse properly on smaller devices.   Usage A grid should be made up of a wrapper element with the class ipsGrid, and direct descendants with appropriate size classes applied (see below). For example: <div class='ipsGrid'> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span4'>Span 4</div> <div class='ipsGrid_span2'>Span 2</div> </div> This would render as: Span 3 Span 3 Span 4 Span 2 Grid classes ipsGrid_span1 through ipsGrid_span12 are available for the various column sizes.   Wrapping Grid Items Elements in a grid will automatically neatly wrap to new rows, providing every item in the grid uses the same span width and height, without you needing to manually create new row structures. For example: <div class='ipsGrid'> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> </div> Span 6 Span 6 Span 6 Span 6 For grids where your items may differ in height or width, consider the ips.ui.grid widget instead.   Responsiveness To cause the grid layout to collapse on smaller devices, add either ipsGrid_collapseTablet or ipsGrid_collapsePhone to the class list on the wrapper element, like so: <div class='ipsGrid ipsGrid_collapsePhone'> ... </div>  
    4. 4

      Data Lists

      Description The data list CSS module allows us to display complex lists, while rearranging the display in situations that demand it, such as on small devices.   Usage A data list consists of a wrapper and individual list items, which can contain various types of data. In most cases, a data list would use one of the HTML list elements (such as ul or ol) for semantic purposes, though this isn't necessarily required. The basic markup structure is as follows: <ol class='ipsDataList' itemscope itemtype="http://schema.org/ItemList"> <meta itemprop="itemListOrder" content="Descending"> <li class='ipsDataItem ipsDataItem_unread' itemprop="itemListElement"> ... </li> <li class='ipsDataItem' itemprop="itemListElement"> ... </li> <li class='ipsDataItem' itemprop="itemListElement"> ... </li> </ol> The root element should be given the classname ipsDataList. Individual list items receive the classname ipsDataItem. To indicate unread status within a row, add the class ipsDataItem_unread to the list item. The other elements in the row may style differently in 'unread' rows to indicate that status. Within the ipsDataItem, multiple other elements can exist which (at desktop resolution) represent cells of data. On smaller devices, these elements reflow to give a more suitable layout. These elements are outlined below. An example of a data list row showing many of these options is shown here: Pre-sales questions Question before you purchase? Post here and get help from both IPS and from other clients. You can also email sales@invisionpower.com for assistance. Company Feedback General Suite Feedback 18,852 Posts BBCode’s description variable By admin Yesterday   Row Spacing By default, rows are comfortably spaced. An additional class ipsDataList_reducedSpacing is available where reduced horizontal cell padding is desired.   Zebra Striping By default, zebra striping (alternate background colors) are not included on data lists. To add them, add the class ipsDataList_zebra to the data list wrapper.   Main content cell - ipsDataItem_main Represents the primary data in the row, typically containing the row title and some metadata. Expands to take up whatever space is left by the remaining cells in the row. Example: <div class='ipsDataItem_main'> <h4 class='ipsDataItem_title'><a href='#'>Item title</a></h4> <p class='ipsDataItem_meta'> By testadmin, yesterday, 2:21pm </p> </div> Within this cell, ipsDataItem_title defines the title element, while ipsDataItem_meta defines some non-specific metadata associated with the title. In the main cell, a sub-list can be specified for data such as sub-forums or sub-albums. This should appear after the ipsDataItem_meta element. An example of the markup: <ul class='<strong>ipsDataItem_subList</strong> ipsList_inline'> <li><a href='#'>Sub-item 1</a></li> <li class='ipsDataItem_unread'><a href='#'>Sub-item 2</a></li> </ul>   Statistics cell - ipsDataItem_stats This class is applied to an element which represents statistics for this row, such as the number of replies in a topic or the number of downloads a file has. An example of its usage: <dl class='ipsDataItem_stats'> <dt class='ipsDataItem_stats_number'>18,852</dt> <dd class='ipsDataItem_stats_type'>Posts</dd> </dl> The data within this element is marked up with two additional classes: ipsDataItem_stats_number - represents the actual statistical value ipsDataItem_stats_type - represents the type of data The additional class ipsDataItem_statsLarge can be added to the element where the statistic is particularly important. This significantly increases the font size of the value to help it stand out.   Last poster cell - ipsDataItem_lastPoster Used to represent the 'last poster' information, such as in a topic or other record. An example of its use: <ul class='<strong>ipsDataItem_lastPoster ipsDataItem_withPhoto</strong>'> <li><img src='images/photo.jpeg'></li> <li><a href='#'>Username</a></li> <li><time data-short='1 dy'>Time stamp</time></li> </ul> Within this element are two or three more elements. If the ipsDataItem_withPhoto class is used, the first element should contain a user photo, otherwise, the first element can be omitted. The second element typically will contain the username, while the last will contain the time information. The last element contains a time element with a data-short attribute. This attibute should contain a very short representation of the date/time, and it is used on small devices. The PHP framework generates these for you.   Generic cells A number of generic cell sizes are available for custom types of data. The cell should contain the class ipsDataItem_generic and one of the following classes: ipsDataItem_size1 - 50px ipsDataItem_size2 - 75px ipsDataItem_size3 - 100px ipsDataItem_size4 - 125px ipsDataItem_size5 - 150px ipsDataItem_size6 - 175px ipsDataItem_size7 - 200px ipsDataItem_size8 - 225px ipsDataItem_size9 - 250px   Other cell types In addition to the main cell types above, there are additional cell classes that can be used. ipsDataItem_icon - A column which contains a status icon for the row, such as a forum icon ipsDataItem_modCheck - A narrow column that should hold a moderator checkbox to select the row   Coloring rows Four additional classes are available to optionally add a background color to the row to denote status: ipsDataItem_new - New items ipsDataItem_warning - Items showing a warning state ipsDataItem_warning - Items with an error ipsDataItem_info - An informational state   Putting it together Here is the code for the example shown at the top of the page: <ol class='ipsDataList'> <li class='ipsDataItem ipsClearfix ipsDataItem_unread'> <div class='ipsDataItem_main'> <h4 class='ipsDataItem_title'><a href='#'>Pre-sales questions</a></h4> <p class='ipsDataItem_meta'> Question before you purchase? Post here and get help from both IPS and from other clients. You can also email sales@invisionpower.com for assistance. </p> <ul class='ipsDataItem_subList ipsList_inline'> <li><a href='#'>Company Feedback</a></li> <li class='ipsDataItem_unread'><a href='#'>General Suite Feedback</a></li> </ul> </div> <dl class='ipsDataItem_stats ipsDataItem_statsLarge'> <dt class='ipsDataItem_stats_number'>18,852</dt> <dd class='ipsDataItem_stats_type ipsType_light'>Posts</dd> </dl> <ul class='ipsDataItem_lastPoster ipsDataItem_withPhoto'> <li><a href='#' class='ipsUserPhoto ipsUserPhoto_mini ipsPos_left'><img src='image.jpg' alt=''></a></li> <li><a href='#'>BBCode’s description variable</a></li> <li>By <a href='#'>admin</a></li> <li><time class='ipsType_light' data-short='1 dy'>Yesterday</time></li> </ul> <div class='ipsDataItem_modCheck'> <input type='checkbox' checked> </div> </li> </ol>  
    5. 5


      Description The form module provides classes for styling forms throughout the suite, with a range of options available to change the appearance and flow.   Usage A form should have the base class ipsForm. In many cases this will be directly on the <form> element, but it can actually appear on any element that contains form elements. The recommended basic DOM structure for a form is as follows: <form class='ipsForm'> <ul> <li class='ipsFieldRow'> ... </li> <li class='ipsFieldRow'> ... </li> </ul> </form> In this structure, each field row within the form appears as a <li> element with the class ipsFieldRow   Form layouts There are two layout options for forms: vertical or horizontal. In a vertical form, field labels are displayed above the field element. In horizontal forms, the label appears to the left of the field element. The layout can be controlled by adding the classes ipsForm_vertical or ipsForm_horizontal to the root form element, respectively. Example of both types: Vertical form Horizontal form Note: On small devices and with the responsive CSS enabled, horizontal layout forms will automatically collapse to become vertical layout so that they are easily readable.   Field Rows Each field row within the form has a number of options available, depending on the type of field. The basic structure for a field row is as follows: <li class='ipsFieldRow'> <label for='example' class='ipsFieldRow_label'> Example field </label> <div class='ipsFieldRow_content'> <input type='text' id='example' value=''> </div> </li> The row receives the base class ipsFieldRow. Within this element are the label and content elements. The label receives the class ipsFieldRow_label, while the content wrapper receives the class ipsFieldRow_content. The content element can theoretically contain anything, though naturally it should be kept simple for best usability. There are several additional classes that can be applied to field rows. ipsFieldRow_primary
      A primary field row causes text inputs to be enlarged to convey importance ipsFieldRow_fullWidth
      Causes appropriate form controls (primarily text-based/select inputs) to take up all available horizontal space ipsFieldRow_noLabel
      If no label is needed, this class can be used to ensure spacing still works as expected. Do give thought to usability before deciding to remove a label.   Required fields To add a 'required' indicator to a field, an element with the class ipsFieldRow_required can be added inside the label element, like so: <label for='elExample' class='ipsFieldRow_label'> Field title <span class='ipsFieldRow_required'>Required</span> </label> On horizontal-layout forms, the text inside the 'required' indicator element is automatically replaced with an asterisk in order to conserve space.   Field descriptions Field descriptions can be added immediately following the form control, inside of the field content element, by using the class ipsFieldRow_desc. For example: <div class='ipsFieldRow_content'> <input type='text' size='30'><br> <span class='ipsFieldRow_desc'>This is a field description</span> </div>   Checkboxes/Radios The markup and classes used for checkboxes or radio buttons are by necessity a little different to that described above, because typically the element will sit to the left of the label and appear inline with it. This is an example of the markup used for checkboxes or radios (note that although the class refers to 'checkbox', it can be used for both types of control): <li class='ipsFieldRow ipsFieldRow_checkbox'> <span class='ipsCustomInput'> <input type='checkbox' id='elExampleCheckbox'> <span></span> </span> <div class='ipsFieldRow_content'> <label for='elExampleCheckbox'>Remember me</label> </div> </li> There are a few differences here. Firstly, the class ipsFieldRow_checkbox has been added to the field row to denote that this row should be handled differently. Secondly, the checkbox control now sits as a direct descendant of the row element, while the label moves inside the content element. Finally, the checkbox itself is wrapped in an element with the classname ipsCustomInput, which allows us to style checkboxes and radios using CSS.   Remember me   Horizontally-grouped checkboxes Another common way to display checkbox/radio controls is as a horizontal list of choices. This can be done with the following markup: <li class='ipsFieldRow'> <span class='ipsFieldRow_label'>Choose an option</span> <ul class='ipsFieldRow_content ipsList_reset'> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='radio' id='checkbox1'> <span></span> </span> <label for='checkbox1'>Option 1</label> </li> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='radio' id='checkbox2'> <span></span> </span> <label for='checkbox2'>Option 2</label> </li> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='radio' id='checkbox3'> <span></span> </span> <label for='checkbox3'>Option 3</label> </li> </ul> </li> Here we're building the field row content element as a list (we use ipsList_reset to remove margins and padding), with each list item receiving the class ipsFieldRow_inlineCheckbox to align them horizontally. The above example produces the following result: Choose an option   Option 1   Option 2   Option 3   Vertically-grouped checkboxes You can also group checkboxes and radio controls in a vertical list. The markup looks like this: <li class='ipsFieldRow'> <span class='ipsFieldRow_label'>Choose an option</span> <ul class='ipsFieldRow_content ipsField_fieldList'> <li> <span class='ipsCustomInput'> <input type='checkbox' id='option1'> <span></span> </span> <div class='ipsField_fieldList_content'> <label for='option1'>Option 1</label><br> <span class='ipsFieldRow_desc'>Option 1 description</span> </div> </li> <li> <span class='ipsCustomInput'> <input type='checkbox' id='option2'> <span></span> </span> <div class='ipsField_fieldList_content'> <label for='option1'>Option 2</label><br> <span class='ipsFieldRow_desc'>Option 2 description</span> </div> </li> </ul> </li> Which renders as: Choose an option   Option 1
      Option 1 description   Option 2
      Option 2 description   Field loading state Text-based form inputs (text inputs, date fields, textareas, etc.) can be shown in a loading state by adding the class ipsField_loading (usually with Javascript). This causes the field to show a loading throbber in the field. Loading example Note: this effect is achieved using background images. If you define styles for form fields that specify a background image, the loading effect may not render correctly.   Grouping field rows Adding section headers You can add a section header to a form by adding a header element of your choice with the class ipsFieldRow_section, like this: <li> <h2 class='ipsFieldRow_section'>A section header</h2> </li>   Fieldsets Fields can be grouped together in related sets by using fieldsets with the class ipsForm_group. The markup for this kind of structure looks like this: <div class='ipsForm ipsForm_horizontal'> <fieldset class='ipsForm_group'> <legend class='ipsForm_groupTitle'>First group</legend> <ul class='ipsForm_groupContent'> <li class='ipsFieldRow'> <!-- Field row content --> </li> <li class='ipsFieldRow'> <!-- Field row content --> </li> </ul> </fieldset> <fieldset class='ipsForm_group'> <legend class='ipsForm_groupTitle'>Second group</legend> <ul class='ipsForm_groupContent'> <li class='ipsFieldRow'> <!-- Field row content --> </li> <li class='ipsFieldRow'> <!-- Field row content --> </li> </ul> </fieldset> </div> This produces (with field row content added): First group Field title Field title Second group Field title Field title The class ipsForm_group is added to a container element - this will typically be a fieldset. Within that element will be a title element, with the class ipsForm_groupTitle. This too can be any element, but a legend element will usually make most sense. Finally, there's an element with the class ipsForm_groupContent which wraps all of the field rows in the group.   Complete form example Here is a complete example of a form, which can be toggled between vertical and horizontal layouts for demonstration purposes. The markup for this example follows after. Name Required E-mail Address Required
      We keep this confidential Please send me   Updates   Offers   I agree to the terms and conditions Submit   <ul class='ipsForm ipsForm_horizontal' id='form_example'> <li class='ipsFieldRow ipsFieldRow_primary ipsFieldRow_fullWidth'> <label class='ipsFieldRow_label'>Name <span class='ipsFieldRow_required'>Required</span></label> <div class='ipsFieldRow_content'> <input type='text' size='30' placeholder='First name'> </div> </li> <li class='ipsFieldRow'> <label class='ipsFieldRow_label'>E-mail Address <span class='ipsFieldRow_required'>Required</span></label> <div class='ipsFieldRow_content'> <input type='text' size='30' placeholder='example@me.com'><br> <span class='ipsFieldRow_desc'>We keep this confidential</span> </div> </li> <li class='ipsFieldRow'> <span class='ipsFieldRow_label'>Please send me</span> <ul class='ipsFieldRow_content ipsList_reset'> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='checkbox'> <span></span> </span> <label>Updates</label> </li> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='checkbox'> <span></span> </span> <label>Offers</label> </li> </ul> </li> <li class='ipsFieldRow ipsFieldRow_checkbox'> <span class='ipsCustomInput'> <input type='checkbox'> <span></span> </span> <div class='ipsFieldRow_content'> <label class='ipsFieldRow_label'><strong>I agree to the terms and conditions</strong></label> </div> </li> <li class='ipsFieldRow'> <div class='ipsFieldRow_content'> <button type='submit' class='ipsButton ipsButton_medium ipsButton_primary'>Submit</button> </div> </li> </ul>  
    6. 6


      Description We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality.   Usage An icon can be included within the markup by using the following code: <i class='fa fa-iconname'></i> The list of possible icons and their classnames is available at http://fontawesome.io/icons/. Note that these classnames are not prefixed with ips as with other framework classes; they are left with their default names as they appear on the FontAwesome website. Icons can be used anywhere that HTML can be used. For example, within text, on buttons, in menus and more.     Icon on a button    A caret icon indicates a dropdown     Yes, I think so   No, I disagree   This is another caret   Icon consistency It is important that icon use remains relatively consistent throughout the suite. This applies to core developers as well as addon developers. If different icons are used for the same purpose (or worse, an icon is used for a purpose different to it's usual purpose), users will become confused by the software. To help alleviate this, we have a list of icons that we generally refer to when choosing an icon to represent an action. Check this list to see if your action already has an associated icon, and lean towards using that instead of choosing another. The list below organizes actions, with the title being a general concept. The icon names are FontAwesome icons, without the preceding fa-   Adding   plus-circle   plus Deleting   times-circle   trash-o Editing   pencil Reverting   undo Go Somewhere   arrow-right Open External Link   external-link Confirming Yes/No   check   times Permissions   lock   unlock Log In/Sign In   key Copy   copy Settings   cog Flagging On/Off   flag   flag-o Star On/Off   star   star-o Developer/Application   cogs Help   question-circle Merge   level-up Code/PHP/HTML   code Mail/Send Mail   envelope-o Search   search View   search Refresh/Reload   refresh Execute/Run Now   play-circle Easy Mode/Visual Editor   magic  
    7. 7

      Dropdown Menus

      Description Dropdown menus allow users to select from a number of options. The markup is designed to work in tandem with the ips.ui.menu javascript module.   Usage A menu consists of a trigger element, and the menu element itself: <!-- The trigger --> <a href='#elMyMenu_menu' id='elMyMenu'>Open Menu</a> <!-- The menu --> <ul id='elMyMenu_menu' class='ipsMenu'> ... </ul> The ID of the menu should be the ID of the trigger element, suffixed by _menu. If the trigger element is a link, its href should be an anchor to the ID of the menu element. This makes the menu accessible even when Javascript is disabled in the browser.   Basic menu A basic menu might have the following markup: <ul class='ipsMenu ipsHide'> <li class='ipsMenu_item'><a href='#'>Item 1</a></li> <li class='ipsMenu_item'><a href='#'>Item 2</a></li> <li class='ipsMenu_item'><a href='#'>Item 3</a></li> <li class='ipsMenu_sep'><hr></li> <li class='ipsMenu_item'><a href='#'>Item 4</a></li> <li class='ipsMenu_item'><a href='#'>Item 5</a></li> </ul> This would display as follows: see example. Item 1 Item 2 Item 3 Item 4 Item 5 ipsMenu is the base class for the menu element. Items within the menu should have the class ipsMenu_item, with the link element inside of that. A separator item can be added by giving the item the class ipsMenu_sep, containing an <hr> element. Note that the positioning and stem is added automatically by the menu javascript module; it does not need to be manually specified. The stem can be removed, if necessary, by including the class ipsMenu_noStem on the menu element.   Disabling menu items Individual menu items can be disabled by adding the class ipsMenu_itemDisabled to the list item: see example. Item 1 Disabled Item 2 Item 3 Note: Disabled items are not foolproof; in browsers that do not support the CSS pointer-events style, a click on a disabled item will still register. Ensure your javascript properly deals with disabled item clicks if necessary.   Menu sizing By default, a menu will have no defined width. An additional classname can be specified on the menu element to determine how wide it should display. ipsMenu_auto - menu will appear as wide as necessary, though with a minimum width of 200px and a maximum width of 500px ipsMenu_narrow - 200 pixels wide ipsMenu_normal - 300 pixels wide ipsMenu_wide - 450 pixels wide   Selectable menus A selectable menu allows the user to toggle one or more of the menu items, useful for turning options on and off. For this functionality to work, the javascript module needs to be used. A menu can be made selectable by adding the classname ipsMenu_selectable. A menu item can be shown as selected by adding the classname ipsMenu_itemChecked to the list item. The markup for a selectable menu might look this: <ul id='elMenu2_menu' class='ipsMenu ipsMenu_normal ipsMenu_selectable ipsHide'> <li class='ipsMenu_item'><a href='#'>Item 1</a></li> <li class='ipsMenu_item ipsMenu_itemChecked'><a href='#'>Item 2</a></li> <li class='ipsMenu_item'><a href='#'>Item 3</a></li> </ul> This would display as follows: see example. Item 1 Item 2 Item 3   Sub-menus Submenus can be created by embedding menus within one another. To do so, simply include the ipsMenu_subItems class on the item that contains the submenu, and the submenu itself within the item. For example: <ul id='elMenu3_menu' class='ipsMenu ipsMenu_normal ipsHide'> <li class='ipsMenu_item'> <a href='#'>Item 1 (no children)</a> </li> <li class='ipsMenu_item ipsMenu_subItems'> <a href='#'>Item 2 (with children)</a> <ul class='ipsMenu ipsMenu_wide ipsHide'> <li class='ipsMenu_item'><a href='#'>Sub Item 1</a></li> <li class='ipsMenu_item'><a href='#'>Sub Item 2</a></li> <li class='ipsMenu_item'><a href='#'>Sub Item 3</a></li> </ul> </li> </ul> This would display as follows: see example. Item 1 (no children) Item 2 (with children) Sub Item 1 Sub Item 2 Sub Item 3  
    8. 8


      Description The messages module provides a way to style informational messages to bring something to the user's attention.   Usage To create a message, simply add the ipsMessage class to a container element (e.g. div), along with one of the message styles below. The message style class will automatically add the appropriate icon to your message box.   Message styles Error - ipsMessage_error This is an error message. Success - ipsMessage_success This message indicates something happened successfully. Warning - ipsMessage_warning This message warns the user of something terrible (or not so terrible). Information - ipsMessage_info This message provides general information.   Message codes If you need to add a code to your message, such as an error number, you can do so using the ipsMessage_code class: <div class='ipsMessage ipsMessage_error'> <span class='ipsMessage_code'>12345</span> This is an error message. </div> 12345 This is an error message.  
    9. 9


      Basics The button classes described here can be applied to any element, although typically would be applied to an element like a, input[type="submit"] or button so that the user can interact with it. As a minimum, a button should receive the basic ipsButton class, plus a size class and a style class (explained below).   Button styles ipsButton_normal Normal button ipsButton_primary Primary button ipsButton_alternate Alternate button ipsButton_important Important button ipsButton_light Light button ipsButton_veryLight Very light button ipsButton_overlaid Overlaid button ipsButton_link Link button   Button sizes ipsButton_medium Medium button ipsButton_verySmall Very small button ipsButton_small Small button ipsButton_large Large button ipsButton_veryLarge Very large button ipsButton_fullWidth
      Can be combined with another size, above. Full width button   Disabled buttons Buttons can be visually disabled either by adding the class ipsButton_disabled, or, on relevant input elements, adding the disabled property. For example: <a href='#' class='ipsButton ipsButton_normal ipsButton_medium ipsButton_disabled'>Disabled button (link)</a> <input type='submit' class='ipsButton ipsButton_normal ipsButton_medium' disabled value='Disabled button (input)'> These would render like so: Disabled button (link)   Split buttons Split buttons allow you to create toolbars easily by specifying a list of buttons that display joined to each other. They are created by specifying the class ipsButton_split on a wrapper element containing two or more buttons. The wrapper element can be a <ul> tag, or any other that makes sense for your use. All of the buttons in a split button group should be the same size, otherwise results are unpredictable. Different styles can be used on each button, though. <ul class='ipsButton_split'> <li><a href='#' class='ipsButton ipsButton_small ipsButton_primary'>Button 1</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Button 2</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Button 3</a></li> </ul> Button 1 Button 2 Button 3  
    10. 10


      Description The typography module offers a wide range of classes for styling text across the suite   Headings A number of heading styles are provided, which can be used for structuring information on the page. They are element-agnostic; you can use them on any of the <h*> tags (or even other tags) - choose the most semantic element for your particular use. ipsType_pageTitle
      Most useful as the main title on a page. A larger version is available by also adding the ipsType_largeTitle class. This is a page title   ipsType_sectionTitle
      The title of a section on the page. This is a section title   ipsType_sectionHead
      A section heading. This is a section heading   ipsType_minorHeading
      A small, less-important heading. A minor heading   Alignment ipsType_left
      Left-aligned text ipsType_right
      Right-aligned text ipsType_center
      Centered text   Colors ipsType_light
      Light text ipsType_warning or ipsType_negative
      Warning status text ipsType_success
      Success status text ipsType_issue
      Issue/intermediate status text ipsType_neutral
      Neutral status text   Sizing ipsType_small
      Small text ipsType_medium
      Medium text ipsType_normal
      Normal sizing ipsType_large
      Large text ipsType_veryLarge
      Very large text ipsType_huge (useful for icons)
          User-generated text/content from CKEditor When dealing with content that is generated by users (generally coming from CKEditor), there are three classes that should be used in order to have it display correctly. Generally you will want to use all three although some situations may call for a different treatment. You may also want to apply the classes to different elements - for example, if you have repeating blocks of user content, the ipsContained class might be applied to a wrapper instead of each individual item. When dealing with user-generated content, be sure to test edge cases. ipsType_richText
      This is the main class for user-generated content, and enables styles such as responsive images and correct margins. ipsType_break
      This ensures words break correctly in user-generated content ipsType_contained
      This is a protective measure that ensures content cannot expand out of its given container.   Truncating text Text can be truncated on a single line by adding two classes to an element: ipsTruncate ipsTruncate_line. In browsers that support it, this causes overflowing text to be hidden, and instead be replaced by ellipsis. Note: This method is designed to work on short pieces of text on a single line, such as text on a button. It does not work effectively on multi-line strings; for those cases you should use the javascript-based ips.ui.truncate widget. It also sets the element to 100% width in order to work; you will need to manually set a width if you wish to overule this behavior. This is a long string which won't quite fit on this button   Other typography styles ipsType_noBreak
      Prevents text from wrapping ipsType_reset
      Removes margin (most useful for <h*> and <p> elements) ipsType_unbold
      Remove bold styling from text ipsType_uppercase
      Makes text uppercase ipsType_blendLinks
      When applied to either an element containing links or links themselves, causes the links to match surrounding text styles.
    11. 11


      Padding ipsPad
      15px padding on desktop ipsPad_half
      7px padding on desktop ipsPad_double
      30px padding on desktop The padding classes are scaled appropriately on mobile devices.   Spacing ipsSpacer_top
      15px top margin ipsSpacer_bottom
      15px bottom margin ipsSpacer_both
      15px top and bottom margin ipsSpacer_half
      When combined with one of the above, halves the spacing ipsSpacer_double
      When combined with one of the above, doubles the spacing   Clearing ipsClear
      Clears floats preceding the element this class is applied to ipsClearfix
      The popular 'clearfix' technique, which causes a wrapper element with this class applied to fully wrap elements contained within it, even if they are floated. This class should be applied to all elements where descendents may be floated.   Positioning For text positioning, see typography. ipsPos_left
      Floats the element left ipsPos_right
      Floats the element right ipsPos_center
      Sets automatic margins on the element in order to center it. Block elements will require a width to be set for this to be noticeable, otherwise they will naturally display at 100% width.   Horizontal rules Horizontal rules can be styled simply by adding the class ipsHr to a standard <hr> element.   Notification counts ipsNotificationCount is a class for a floating bubble which can denote a notification count of some kind. The parent element should have a non-static position for this class to work correctly. By default, the notification bubble will be offset to the top and right, but this could be overwritten with additional specific styles if desired. Usage: <!-- The element the notification belongs to --> <!-- position: relative; is set inline here, but avoid that in practice --> <a href='#' class='ipsButton ipsButton_primary ipsButton_medium' style='position:relative'> A button with notification <span class='<strong>ipsNotificationCount</strong>'>12</span> </a> This would render: A button with notification12   Online/Offline status Provides simple styling to denote whether something (a user, for example) is online or offline. ipsOnlineStatus is the base class; add ipsOnlineStatus_online or ipsOnlineStatus_offline to denote the actual status. <strong class='ipsOnlineStatus ipsOnlineStatus_online'><i class='fa fa-circle'></i> Online</strong><br> <strong class='ipsOnlineStatus ipsOnlineStatus_offline'><i class='fa fa-circle'></i> Offline</strong>   Online
        Offline   Cursors Several classes are provided as shortcuts for changing the mouse cursor on elements. ipsCursor_locked
      "No permission" cursor (example) ipsCursor_drag
      Shows an element can be moved (example) ipsCursor_pointer
      Shows an element can be clicked (example) ipsCursor_help
      Shows an element provides help (example) ipsCursor_default
      Sets the cursor to the default state (example)
    12. 12


      Description Badges are a useful way of showing some additional information about an item - its status, for example.   Standard badges Standard badges receive the base class ipsBadge, and then one or more of the options shown below.   Badge styles ipsBadge_new
      Badge ipsBadge_style2
      Badge ipsBadge_warning
      Badge ipsBadge_positive
      Badge ipsBadge_negative
      Badge ipsBadge_neutral
      Badge ipsBadge_intermediary
      Badge   Badge sizes ipsBadge_normal (default)
      Badge ipsBadge_medium
      Badge ipsBadge_large
      Badge   Icon badges Any of the above classes can used to create icon badges by adding the additional ipsBadge_icon class, and using a FontAwesome icon as the badge content. For example:
        Status badges "Status badges" is the term we use to denote the icons shown in datalists, record tables etc. that indicate the read/unread status of the icon to the user. They are separate to the badges described above and don't use the same classes. The base class for status badges is ipsItemStatus, with additional options shown below. ipsItemStatus_tiny
      Shows a tiny status indicator. Include an icon (usually fa-circle) as the content of the element. ipsItemStatus_small
      Shows a small status indicator. Include an icon (usually fa-circle) as the content of the element. ipsItemStatus_large
      Shows a full status indicator. The indicator can be customized with an icon by including it as the content of the element: <span class='ipsItemStatus ipsItemStatus_large'> <i class='fa fa-comments'></i> </span> ipsItemStatus_read
      The 'read' status of the badge, causing it to fade out (a convention for read content in the IPS Community Suite).  
    13. 13


      Introduction to responsive classes IPS4's CSS framework is responsive, meaning elements adapt according to the size of the display the users chooses to use. In most cases, the existing classes already outlined in this guide take care of it for you; for example, menus automatically adjust, and tab bars collapse into a dropdown menu on mobile phones. There may be times when you need to control on which devices sizes elements show or hide themselves. For example, if you add a custom footer element, you may want to only show it on desktop, and hide it from tablets or phones. The responsive classes that IPS4 provides allow you to control this kind of behavior.   Responsive sizes used by IPS4 For the purposes of the media queries we use to control responsiveness, the following sizes represent each device: Phones - up to 767 pixels wide Tablets - between 768 pixels and 979 pixels wide Desktops - 980 pixels and wider   Basic show/hide functionality The CSS framework includes two groups of three classes that show or hide elements on desktop, tablet and phone-sized devices, respectively. The classes act in an exclusive way; that is, if you use the show classes, any devices that don't match will not show the element. The opposite is also true; if you use the hide classes, then the element will not show on those devices but will show on the others not specified. The classes are: ipsResponsive_hidePhone ipsResponsive_hideTablet ipsResponsive_hideDesktop ipsResponsive_showPhone ipsResponsive_showTablet ipsResponsive_showDesktop You can combine these as needed. For example: <div class='ipsResponsive_hidePhone ipsResponsive_hideTablet'> This element *will not* display on phones or tablets, but *will* display on desktops </div>   Additional classes to control element display When using the show classes outlined above, you typically need to include an additional class that controls how the element is rendered. This can be one of the following: ipsResponsive_block ipsResponsive_inlineBlock ipsResponsive_inline <div class='ipsResponsive_showDesktop ipsResponsive_block'> This element will *only* show on desktop sizes, and will render as a block-level element. </div> These additional classes aren't usually necessary when using the hide classes.

    Other guides in Themes and Customizations