Rikki

Most language packs consist of a single file with the .xml file extension. If the language pack you are installing contains other files, follow the instructions provided with the pack. To install the pack, navigate to Customization -> Languages in the AdminCP. Click the Create New button, and in the popup window, select the Upload tab. Choose the xml file that makes up the language pack. The Locale determines how numbers and dates are formatted in the software. The same language can be used in different locales; for example, English is used in the United States and the United Kingdom (among others), but these are different locales and use different date formats. Choose the locale that best matches your userbase (you can install the same language pack multiple times and use different locales for each, if you wanted). Click Save to install the language pack. You'll now see it in the language list; it is enabled and ready for users to use!

Language support The IPS Community Suite is fully translatable and can support any language. By default, only English (US) is provided with an installation, but other languages can be added by: Downloading ready-made language packs from our Marketplace Creating your own language pack What do language packs cover? A language pack controls: The language that the interface appears in The formatting of numbers and dates (locale-dependent) The text direction (left-to-right, or right-to-left) Allows you to translate certain admin-created content, such as forum names, member group titles and so forth Locales The locale you choose for a language primarily determines the number and date formatting that the suite applies. Although each language you have installed in your community has an associated locale, the locale is chosen separately. This is because a language can often be used in more than one locale; for example, English is used in the United States and United Kingdom, although these are different locales with different date formatting. If necessary or desirable, you can install the same language pack several times and choose a different locale for each, to give users the number/date formatting that they are used to. Multiple languages The IPS Community Suite allows for multiple language packs to be installed at once, with users being able to choose the one they want to use. Note: Language packs do not translate user-generated content such as forum posts; they will appear only in the language typed by the user. If you have a userbase containing speakers from several languages, one strategy is to create separate content sections (e.g. forums) for each language used, in effect creating sub-communities.

If you have created a theme and you want to share it with others (perhaps in our Marketplace) or keep a backup, the IPS Community Suite makes it easy to download. To do so, navigate to Customization -> Themes in the AdminCP, and click the dropdown menu next to the theme you wish to export. Click the Download menu item, and after a second or two your browser will prompt you to download the theme. The file you download will have the .xml file extension. This special file contains everything your theme needs, including any images you've added.

Themes in the IPS Community Suite offer an easy way to change three of the key images used by the software. They are: Logo The logo image shown at the top of every page of your community Favicon The small icon shown in the user's browser tab, and next to bookmarks in their browser Sharer image The image Facebook pulls from your community when a user shares a link from your site. Often you'll use a larger version of your logo. To change these items, edit the relevant theme by navigating to Customization -> Themes in the AdminCP, and clicking the edit icon next to the theme: On the Logos tab, you'll see three upload fields where you can drag'n'drop your images. Click Save to apply them. Note: The favicon needs to be a .ico icon file, not a standard image. It should also be small for best results, and is normally shown by browsers at 16 pixels by 16 pixels. Consider using a third-party tool such as this favicon editor to help.

For most admins, creating a theme with the Easy Editor is the best option. It allows you to customize the default theme in a point-and-click environment and see your changes in real-time, and requires no coding skills whatsoever. Creating the theme To create the theme we'll edit, navigate to Customization -> Themes in the AdminCP. Click the Add Theme button. In the popup window, ensure the Easy Mode option is selected (it's the default), and then click Next. On the next screen, you can configure some choices about your new theme: Name (required) As it will appear to users of your site Parent You can make this theme a child of another, meaning it will automatically inherit any style/template changes from the parent theme Default theme Makes this theme the default for guests and members who have not specifically chosen another theme Available for Sets permissions for which groups can use this theme. Example use: a theme that only 'premium' users can access as an added benefit of paying Click Save once you have filled in the information. Your theme will be created and you'll be returned to the theme listing. Launching the Easy Mode editor From the theme listing in the AdminCP, you can click the magic wand icon on any Easy Mode theme to launch the visual editor (you will need to be logged into the front-end of your community to use the visual editor): Note: You can launch the visual editor at any time, even long after you've created the theme. However, if you convert an Easy Mode theme to a normal theme, you can't go back and use the visual editor. Launching the visual editor will take you to your community in editing mode (that only you can see). Your community will be shown on the left, with editing tools available in a panel on the right: The visual editor has a few key functions to help you design your theme. We'll cover each in turn. 1. Colorize This tool lets you instantly change all of the theme colors to different shades of another color. Click the Colorize button, and you'll see four swatches: Clicking a swatch and choosing a new color will immediately update the live preview to show you the result. The colorize tool is great as a first step - if you know you want a red theme (for example), you can use it to get the basics done, and then fine-tune the resulting colors later using the other tools. If you don't like the result, you can click the Revert Colorizer button to undo your changes. 2. Select tool The Select tool allows you to point-and-click at sections of pages on your community, and the visual editor will automatically show you the color editor for the closest available parts. 3. Custom CSS If you are familiar with CSS, the Easy Mode editor gives you the ability to add custom CSS to your theme without needing to convert it to a full manual theme. Simply click the CSS button, and a code editor will be shown for you to use. And yes, you still get the live preview! 4. Style editor The available styles you can edit are listed in the main panel. Click one to see the color swatches and to edit the colors. Some styles allow you to edit just the background, others will also allow you to edit the font color. Background colors can also be turned into gradients by clicking the button. To use it, you choose a direction in which the gradient should go, and then add colors to form the gradient. 5. Build The Build tab is where you'll go once you're happy with your changes and want to save them. Click the Save Theme button to do so. This will save your changes and make them live to any users who have chosen this theme.

On occasion you may wish to override the theme choice members have made (for example, when you install a new default theme). The IPS Community Suite allows you to do this easily on a per-group basis. Navigate to Customization -> Themes in the AdminCP, and click the dropdown arrow next to the theme you want to force as the selected theme. Select Set as Members' Theme from the menu: In the popup window that will appear, you can choose which groups (or all of them) to reset. For example, if a member in the Members group had chosen the Green Theme to use, by using the Set As Members' Theme and selecting the Members group on the Red Theme, that member's choice will be reset and they'll see the Red Theme in future.

The default theme is the one guests and members who have not specifically chosen a theme will see. Any of your themes can be the default theme. To set a theme as default, navigate to Customization -> Themes, and click the Edit next to the theme you want to make default: On the General tab of the Edit form, toggle the Default Theme? setting to On, and then save the form. Note: Changing the default theme won't affect members who have already specifically chosen a theme.

If you've downloaded a ready-made theme from somewhere (such as our Marketplace), you need to install it in order to use it. Tip Most themes are made up of a single file ending in .xml. If the theme you are installing is more complex and has other files, follow the instructions provided by the developer. In the AdminCP, navigate to Customization -> Themes. Click the Add Theme button, and then the Upload Theme tab. Select the xml file for your theme from your computer. Click Next, and after a second or two the IPS Community Suite will finish installing the theme and return you to the theme list. That's it! Your theme is installed and ready to use.

What is a theme? A theme is a package that changes how the IPS Community Suite looks. By default, the software has a blue theme (it's the one you see here on our own community), but with themes you can completely change that, including colors, fonts, images and much more. With a little skill, your imagination is the limit! Above all, themes are a great way to keep consistent branding between your main website and your community. Where do you get themes? Themes can come from a few different sources, including: Our Marketplace, for free or paid Created yourself using the Easy Mode editor Created yourself using the full theme editor (for advanced users) Some designers run their own sites that offer ready-made themes for purchase/download You can hire a designer to create a theme especially for your community Multiple themes Although many communities have one theme that matches their brand, it's also possible to install multiple themes and let users choose between them. You can select a default as your 'main' theme, and users can choose their own preference from the theme selector at the bottom of the page. You can even restrict themes to certain member groups, allowing you to have 'premium' themes for paid members (for example). We'll cover how to do all this and more in a later step.

Before we start editing the templates for our database, we're going to create custom CSS and JS files that will allow us to customize the style and functionality beyond what Pages does by default. Custom CSS & JS files apply to the page rather than the database, so you could use them even if you're doing something that doesn't make use of the Databases feature. Of course, in this tutorial we are using databases, so our styles will mostly be geared to styling them. Creating the files Custom CSS/JS files are created in the AdminCP, so head over to Pages -> Page Management -> Templates to access the template editor. In the left-hand panel you'll see tabs for CSS and JS - although these are empty now, it's where our new custom files will live once created, and it's where you'll edit them later. Click the New button, then choose Add CSS File. Enter a name, such as releasenotes (Pages automatically adds the .css suffix for you). Since we're only going to have one CSS file here, choose to insert it into the existing 'CSS' group (if you have much more complex pages, you could create your own grouping structure). Save the form to create it. If you now click the CSS tab and expand the groups, you'll see the new (empty) releasenotes.css file: Creating the files Repeat the same process to create the javascript file, choosing New javascript file from the New menu, and naming it releasenotes.js. Assigning to a page We've created our custom files, but right now our page doesn't know it should use them. To do so, edit the page that was created for our database by going to Pages -> Page Management -> Pages and clicking the edit icon next to release-notes (remember we created this page automatically as part of the database creation process). On the Page Includes tab, select the JS and CSS files you just created, then save the form. (This will only show up if you have already added a css/js file) Assigning to a page That's it! Our page now includes these two files when it displays, so we're ready to customize. Adding the custom CSS Ordinarily, you would likely be editing the CSS itself bit-by-bit as you edit the templates. For the purposes of this tutorial however, you can simply add the CSS contents now. Here's the styles we're using: Creating basic templates Adding sample data & adjusting sorting

Before we move on, it would be a good time to add some sample data to your database. Since we'll be working on templates next, it would be helpful to have some records to see. Add some data by going to the page on your community (<your community url>/release-notes/ if you chose the same page name in the earlier step). Adjusting Sorting You may remember we're currently sorting by the default field, which is Record ID. Now that we've created our custom fields, we'll want to adjust the sorting to sort by the Long ID field instead. Edit the Release Notes database, and on the Options tab change the Sort field to Long ID, and the Sort Order field to Descending (so that the releases are ordered newest -> oldest). Using custom CSS & JS Field formatting

By default, Pages will show your custom fields as badges in the listing and record views, and when creating a field you can choose a color and some basic positioning options. For many of your uses, this may be sufficient, but for more advanced usage Pages allows you to set up custom field formatters that take the raw data and display it however you wish. We're going to use field formatters for each of our custom fields so we can control exactly how they look. How do field formatters work? Field formatters expose both the raw and formatted field data to you, enabling you to write your own HTML to generate the output of the field. They can be simple, as most of ours will be, or as complex as you need. The listing and record views can each have a different formatting, which will be useful in many cases (although for the way we display our Release Notes, we won't be using the display versions). What data is available in a formatter? Field formats make the following variables available: $label Contains the field label, which is the name you entered for the field (e.g. "Release date") $value Contains the processed field value. For example, if you have a select field, this variable contains the text of the value, not the key. $formValue In contrast to the above, this contains the raw form value. For select fields it will be the key, for Yes/No fields it will be a simple boolean value, etc. In situations where HTML is in a value, you may need to append |raw to the variable to have it correctly parsed. Warning Be very careful using the |raw output method. By bypassing escaping of HTML characters, you can open your site to security problems when displaying user-generated content. Formatting the security release field We're going to add a custom formatter for our Security Release field, which if you recall shows a red warning triangle when we set the field to Yes. To start, head over to the field listing page for our database, and click the edit icon next to the Security Release field. On the Display tab, we want to change the Listing View Format to Custom. This will show an editor where we'll enter our HTML. This is the HTML we will use: {{if $formValue == "1"}}<span class='ipsType_large ipsType_negative ipsPos_right cRelease_security' data-ipsTooltip title='This is a security release'><i class='fa fa-warning'></i></span>{{endif}} Let's review what is happening here. The opening HTML logic {{if $formValue == "1"}} is simply checking the value of the field. Since this is a Yes/No field, the raw form value is either 1 or 0. We only want to show the security release icon when this field is set to Yes, so if the form value is 0, it simply skips over this logic and shows nothing. Inside the {{if}} we have some simple HTML that shows a red triangle icon (see our CSS framework guides for information on the classnames). We've also added a custom classname cRelease_security that we'll use when we create our own custom CSS later Formatting the release date field Another field we'll format is the Release Date field. This field shows a date if set, or "In Development" if no date has been set. As before, set the Listing View Format to Custom, and use this HTML: {{if $formValue}}Released {$value}{{else}}<span class='ipsType_light'><em>In Development</em></span>{{endif}} What we're doing here is checking if there's any form value - if there is, we know a date has been chosen, and we display the processed version contained in $value. If there isn't, then after the {{else}} we show the "In Development" text inside a span. Other fields Here's the HTML for the other fields: Current Release {{if $formValue == 1}}<span class='ipsBadge ipsBadge_positive' data-ipsTooltip title='This is the most current available release'>Current Release</span>{{endif}} Beta Release {{if $formValue == 1}}<span class='ipsBadge ipsBadge_negative' data-ipsTooltip title='A beta is available for this version'>Beta</span>{{endif}} Additional Information This field is set to 'No formatting' for the Display template. With our custom fields set up and formatted correctly, we can move on to templates. Adding sample data & Adjusting sorting Creating custom fields

The next stage of building our Release Notes section is to create our custom fields. What are custom fields? By default, a database in Pages has some generic fields set up for you - things like the record title and record content. In most cases though, you'll need other types of information for each record too, and that's where custom fields come in. They allow you to define other pieces of information about records, which is displayed as part of the record. Pages supports a wide range of field types, from dates to upload fields to YouTube embeds. Fields we need to create If we refer back to the screenshot of our final product, we can identify a few different custom fields we're going to need to create: Long ID Type: Number Required: Yes Template Key: long-id Show in listing/display template: No Each version of the IPS Community Suite has a public version (e.g. 4.1) and an internal 'long ID' that identifies it more technically. We need to create a Long ID field in our database because this is how we will order the releases. We won't however be displaying this on the page - it's only used behind the scenes. Release Date Type: Date Required: No Template Key: release-date The date we'll show for the release. If the person adding a new release leaves this blank, we'll treat it as a future release. Security Release Type: Yes/No Required: Yes Template Key: security-release We highlight security releases in the listing with a triangle icon. By setting a yes/no flag on a field, we can check that value later in the templates to decide whether to show the icon. Current Release Type: Yes/No Required: No Template Key: current-release We also highlight the most current release in the listing. Note: it isn't currently possible to have a field that is only 'yes' for one record automatically, so right now we need to unset this on one record before setting it on another. For our usage, that isn't a problem. Beta Release Type: Yes/No Required: No Template Key: beta-release Finally we indicate which releases are currently in beta with a badge, so we need a flag to store that. Additional Information Type: Editor Required: No Template Key: additional-information Show in listing template: No For our use, we put important information in the main content of the record, but have this field for any additional but less-important information we want to include. We won't walk through creating every field here since it's largely the same for each, but we'll create one shortly. You'll notice above I mention the template key, which is set on the Display tab when creating a field. This is a key we will use to refer to each field when we write our templates later. If we don't set this, Pages will set one for us anyway, but it's generally easier to follow if you enter one yourself. You'll also see on the Display tab some settings for formatting the fields. Leave these at their default state for now; we will cover field formatters in depth later. Creating a field Let's go ahead and create the Long ID field. Assuming you are still on the database listing page, click the dropdown arrow next to our Release Notes database, and choose Manage Fields. On that screen you will see the default fields that Pages gives you: Default Fields Click the Create New button, and you'll see the field form. Following the information we covered above, set the field options: Adding a Field When you submit the form, you'll see the permission matrix for this field, allowing us to define who can do what with it. If you recall, we only allow staff to add/edit records in this database anyway, so we will mirror those permissions here too. Field Permissions Finally, save the form to add the field. You can repeat these steps for the remaining fields. Formatting fields Setting up the database

The Release Notes section is built using the Database feature in Pages, so the first step is simply to create the database we'll be using. What are databases? The Databases feature in Pages gives you the tools you need to create your own custom data-driven sections of your community. You define the settings and fields in the database, and Pages gives you support for categories, comments, reviews, ratings and more - just like full IPS Community Suite applications. Since you have full control over the templates for each database (and even each category within the database). it's possible to create some advanced pages. Creating the database Let's set up the database first. In the AdminCP, go to Pages -> Content -> Databases and click Create New. You'll see a tabbed form that configures how this database will work. Creating the database Start with the basics: enter Release Notes for the name (this is how the suite will refer to your new section in menus etc.), and enter a description if you wish. The next two options configure how the database uses categories. For our purposes, we don't need categories at all - recall that we simply show a table of releases. Upon selecting that option, you'll see another option to show a record list, which is precisely what we want here. Database Settings Below these, you'll see settings for templates. We don't need to worry about these for now - we'll be creating our own templates later. The final step on this tab is to set a database key. This is just a way for pages in the suite to find the correct database later - it isn't shown to users. Entering release-notes is fine. Languages The languages tab is where we configure how the database will refer to our records. It means it can show things like "1 new release" instead of the generic "1 new record". We'll set them to (in this order): release releases Release Releases a release Options On the options tab we'll configure some settings for the database. We're going to keep the default settings with the following exceptions: Disable comments We won't be allowing comments at all in our Release Notes section, so we'll disable this functionality from the outset Disable reviews As above Disable "enable record image upload" We won't be attaching images to release notes, so we can disable this feature too Note that later we'll be sorting by a field we've yet to create, but for now the default choice is fine. Forums We aren't going to be making use of the Forums integration here, so we can safely ignore this tab. Page Our database needs to live on a page within our website in order to be shown to users. You can create a page separately in the AdminCP and insert the database into it, but since we're creating the database now, we can do it in one go to save time. We're going to configure our page like so: Page Settings The key details here are: We're creating a new page for the database We've set the name to "Release Notes". This is how the page is referred to in links and menus, and will also be the browser title on this page. We've set the filename to "release-notes". This forms the URL to the page; in this case, it'll end up being <your community url>/release-notes/. We've chosen to create the page using Manual HTML, which means we will write the HTML to display the page. The alternative is to use the easy Page Builder, which enables you to drag and drop blocks into the page. You can use whichever you are more comfortable with. We're using the suite HTML wrapper. This is the header and footer of your site that our page will use. With this disabled, we'd be responsible for writing the entire page from scratch, which we don't want to do in this case. Permissions When you save the database, you'll see the permissions matrix to configure what each can do. We want to allow all groups to see the database and records, but we're only going to allow staff to add and edit records (and remember, comments & reviews are disabled anyway): Database Permissions That's it - you can save the form, and your database will be created. Next we'll move on to creating our fields. Creating Custom Fields Introduction

Several years ago, we added a Release Notes section to our community, designed to keep customers up to date on past and future releases of the IPS Community Suite. Complete Release Notes Many have asked what we used to create the new section, and as you might expect, the answer is our own Pages app, part of the IPS Community Suite. While everything in the new section was built using standard Pages features, some of the techniques aren't things you'll see in the default templates we ship with the app, which are deliberately designed to be basic and a starting point. The point of this tutorial, therefore, is to cover how we built the Release Notes section, and go over some of those more advanced features and techniques. The aim is that you can take the same ideas and apply them to your own Pages websites. Who is this tutorial for? We are assuming that you have a reasonable understanding of PHP, HTML and some simple Javascript. Building the Release Notes section involves modifying templates, so you will be working with code. We will, however, cover the features in Pages that are used to build the section, so you don't need to be a Pages expert. Treat this as a learning process - we built the Release Notes section for our own use, so we only went as far with it as needed. You may want to go further and polish it more for your own use. Let's get started. Setting up the database

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).

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='ipsNotificationCount'>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)

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.

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

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.

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

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

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>

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_error - 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>

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>