Rikki

Some phrases have values passed into them by the language system, so you will need to be able to identify these and ensure your translations still include the replacement value. There's a few types of replacement you'll see: %s Simple string replacements {internal.app=core&module=system&controller=register} URL replacements {# [1:reply][?:replies]} Plural replacements We'll cover plural replacements in-depth in the next step. String replacements Simple string replacements use a format determined by PHP's sprintf function. In this format, the special token %s is replaced with the value passed into the phrase: My name is %s becomes this when displayed: My name is Rikki Multiple values are sometimes passed into a phrase, and they are replaced in order. For example, if the values "Rikki" and "blue" were passed into a phrase, in that order, the language phrase: My name is %s and my favorite color is %s becomes this when displayed: My name is Rikki and my favorite color is blue However, since the order of the values passed in is determined by the PHP code in the suite and can't be changed by language authors, special syntax is required if you want to switch the order of any of the replacements (this is often necessary in other languages where sentence structure differs from English). To swap the replacements, the %s token should be changed to %2$s - essentially inserting 2$ in the middle of the normal token, where 2 is the position of the parameter you want to use for this replacement. To take the example above, we could now do: My favorite color is %2$s and my name is %1$s which becomes: My favorite color is blue and my name is Rikki For more information, see the PHP.net sprintf documentation (bear in mind it is a technical document designed for developers). URL replacements Occasionally, links need to be built inside language phrases. Our language system supports this with special tags like this: {internal.app=core&module=system&controller=register} In this example, the internal. means the software knows it is a link to an internal page (i.e. a page within our software), with a URL string to the particular page. There can also be pre-defined external links, like so: {external.ad-custom-location} In this case, ad-custom-location is a pre-defined external URL in our software. When making your translations, be sure to include the links found in the original language phrase, since they often provide valuable extra information to users.

Why plurals are treated differently Many of the phrases used in the IPS Community Suite are plurals. Some examples are: 21 replies 3 comments You have 10 new notifications In English, a plural typically has an 's' for multiple, and no 's' for singular. In other languages, the rules may be more complex and require a specific format depending on the exact number. To facilitate these nuances, the IPS Community Suite uses a special syntax for phrases that refer to a plural items. The language system passes the value being used into the phrase, and the special syntax can use this value to determine which words to show. Syntax The syntax for plural phrases looks like this: {# [1:reply][?:replies]} There's a lot that this syntax allows, but this is the basic usage. It's made up of definitions that are applied depending on the number passed into the phrase for replacement. Let's step through each part of this. {...} The plural replacement always needs to be enclosed in curly braces so that the suite core can recognize it. Note that the plural replacement can appear inside another phrase if the rest of the phrase isn't plural-dependent. For example: "You have {# [1:new notification][?:new notifications]}" # The next character is typically the pound/hash symbol. When it appears at the start of the replacement, this symbol is replaced with the actual number passed into the plural. Alternatively, if you use !# then the number is not included. {# [1:reply][?:replies]} {!# [1:reply][?:replies]} becomes: 10 replies replies [x:reply] The next block is the replacement option, of which there can be several. These are enclosed in square braces, and you can have as many as needed for your language. The block begins x:, where x is a number, indicating that this replacement is used when the number passed into the phrase is exactly x. If your language requires a different plural form for certain numbers, you can repeat the block for each. There's three special symbols you can use for 'x' here: *1: Matches all numbers that end in 1, e.g. 1, 11, 21, 251 %1: Matches all numbers that start with 1, e.g. 1, 10, 12, 163 ?: Matches all other values that aren't matched by another block After the colon : is the string value used if this block matches. Note that the values in these blocks can use the special character #, which like above is replaced with the actual value passed into the phrase. This is particularly useful where the phrase does not need to show the number except in certain circumstances. For example: "Every {!#[1:year][?:# years]}" In English, saying "Every 1 year" would be odd, but for other values you would say "Every 3 years". So in this case, we use !# at the start of the replacement so that the number isn't automatically added, and then use # in the second block so that our string contains the number only if that block is used.

The alternative to using the visual editor is the standard editor. This allows you to edit every phrase in the suite in one place, one after the other. To use the standard editor, navigate to Customization -> Languages in the AdminCP. Click the icon next to the language you want to translate. What you'll now see is a table listing every phrase used by the software. To use this interface, you simply work your way through each phrase, typing your translation. There's a few key parts of the interface we'll cover in more detail. 1. Filters The filters above the grid allow you to narrow down the phrases you see. Out of date Useful to find changed phrases that require updating after you have updated the IPS Community Suite Untranslated Shows phrases you haven't yet translated Translated Shows phrases you've already translated 2. Live Search You can live search for phrases to translate using the search box. By default, the key and the English phrase are both searched for matches, although you can be more specific by clicking the cog icon next to the search box. Tip A handy way to find the key used by language phrases is to enable the 'word key' view. To do so, navigate to Customization -> Languages in the AdminCP, click the Translation Tools button, and enable the View word keys option. When you save the form, instead of seeing English phrases, you'll see the keys used to identify that phrase. 3. Ordering Click one of the table headers to change the sorting of phrases in the table. Click a header again to switch between ascending/descending order. 4. English Phrase This column shows the original English phrase that we use in the software. Use this as the basis for your translated phrase. 5. Your Translation The textarea is where you type your translation for each phrase. Your translation will be automatically saved when you move to the next phrase, or you can click the green Save button manually under each text input.

Setting up the visual language editor The easiest way to get start with translating your language pack is to use the visual language editor. To enable visual editing, first ensure you are using the desired language. You can select a language to use in the footer of the front-end of your community. Next, navigate to Customization -> Languages, and click the Translation Tools button in the header. In the popup window, turn on the Quick Translating option, and save the form. Using the visual language editor With this option enabled, you can now edit phrases that you see in the interface, both in the AdminCP and on the front-end of your community. Phrases that can be translated are highlighted when you hover over them with your mouse cursor. To edit a phrase, click and hold for a couple of seconds. The phrase will change into a textbox that allows you to edit the characters. Type your new phrase, then click out of the box to save your new translation. Tip Using the visual language editor, you can even translate content sections of your site that you have created, such as forum names & descriptions, member group names, ranks and much more. That's all there is to it! You can make your way through your community translating phrases in this way. There will likely be many phrases you don't see in normal use in the interface and that therefore won't be translated with the visual language editor. For those, use the standard translating interface, which we'll cover in the next step. Turning off the visual editor The visual editor will remain active for your whole session. To turn it off, you can either restart your browser, or navigate back to Customization -> Languages in the AdminCP, click Translation Tools and turning off the Quick Translating option.

If you need to create a custom language pack for your community, the IPS Community Suite includes tools to make the process easier. Note: The IPS Community Suite has many hundreds of phrases that need translating to make a complete language pack, so the time investment may be significant. If a ready-made language pack is available for your language, you may wish to use that as a starting point rather than starting from scratch. There's two tools available: Standard translating Each phrase is presented, and you type in the translated version Visual language editor Browse the community as normal, and click on phrases you see to translate them in position We'll cover both in-depth in later steps. To create your language pack, navigate to Customization -> Languages, and click the Create New button. In the popup window that appears, enter a name for your pack, and select the appropriate options in the other fields. Click Save to create the language pack. The language is now available for users to use, although all phrases are currently still English until they are translated. You may wish to disable the language until you have finished translating. To do so, click the Enabled badge next to the language in the listing in order to disable it:

The IPS Community Suite is installed with an English language pack which is also set as the default. However, you can set another language as the default language if you wish. Note: The IPS Community Suite attempts to determine the correct language for a user based on information their browser provides. If this can be determined, and you have an appropriate language pack installed, then providing the user hasn't specifically chosen another language, that language will be shown to them regardless of your community default. To set the default language, navigate to Customization -> Languages in the AdminCP, and click the Edit icon next to the language you want to set: In the popup window that appear, check the Default Language option, and save the form.

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