sobrenome

Description
The dialog widget displays popup windows within the page, typically loading content from a remote source.
 
Usage
A dialog is defined simply by including the widget key as an attribute on a trigger element. It is recommended that the trigger element be a link or button, so that if the user has javascript disabled their browser can take them to a full-page version of the dialog contents.
<a href='...' data-ipsDialog data-ipsDialog-url='...'>Launch dialog</a> Dialogs offer special functionality for forms contained with the dialog, enabling them to be automatically validated and submitted via AJAX when used with the form helper from the IPS4 PHP framework. See the remoteVerify and remoteSubmit options below.
 
Obtaining a dialog reference
If you need to control a dialog programmatically, you can do so by first obtaining the reference to the dialog. To do so, call the getObj method, passing in the element on which the dialog was created as the parameter:
// HTML <div id='elementWithDialog' data-ipsDialog> ... </div> // Javascript var dialog = ips.ui.dialog.getObj( $('#elementWithDialog') ); The returned reference to the dialog instance can be used to call the methods shown below.
 
Creating a dialog programmatically
Dialogs can be created programmatically by controllers instead of being created on particular elements. To achieve this, call the create method:
var dialog = ips.ui.dialog.create( object options ); The options parameter should be an object containing keys for the options below.
This method returns a reference to the dialog instance on which you can call methods to control the dialog, for example:
dialog.show(); dialog.hide();  
Instance methods
show( boolean initOnly )
Initializes and shows the dialog. If initOnly is true, the dialog is initialized but not immediately shown.
 
hide()
Hides the dialog.
 
remove( boolean hideFirst )
Removes the dialog from the DOM. If hideFirst is true, the dialog will call hide() and remove itself after the animation is completed.
 
setLoading( boolean loading )
If loading is true, indicates to the user that something is being loaded (i.e. shows a spinner in the dialog). If loading is false, removes the loading state. Note: this method doesn't empty the dialog content first. Call instance.updateContent('') manually if desired.
 
updateContent( string newContent )
Updates the contents of the dialog with the provided newContent. New controllers/widgets are automatically initialized after updating.
 
Options
url
(String; optional)
If provided, the dialog contents will be loaded by calling this URL when the dialog is launched.
 
content
(Selector; optional)
If the dialog content already exists in the DOM, this option should be a selector that will locate the wrapper element for the content.
 
modal
(Boolean; optional; default true)
If true, the page background will fade, preventing the user from interacting with it until the dialog is dismissed.
 
title
(String; optional)
Sets the title shown in the dialog window. If not set, no title bar will display.
 
size
(String; optional)
If provided, will set a special class on the dialog designed to change its size. Currently, narrow, medium, wide and fullscreen are supported as values for this option. If not provided, the default dialog width will be used (defined in CSS).
 
close
(Boolean; optional; default true)
Determines whether the dialog should be built with a close button.
 
fixed
(Boolean; optional; default false)
Determines whether the dialog is fixed. A fixed dialog is anchored to the viewport, not the page. Its height will also be fixed, with the content scrolling inside if necessary. If this is false, the dialog will scroll with the page, and it will expand to fit all the content being shown, regardless of length.
 
remoteVerify
(Boolean; optional; default true)
When the dialog contains a form built using the IPS4 PHP framework form helper, this option instructs the dialog to automatically validate the form values and present any errors to the user.
 
remoteSubmit
(Boolean; optional; default false)
When the dialog contains a form built using the IPS4 PHP framework form helper, this option instructs the dialog to submit the form values via AJAX. If remoteVerify is also true, two separate AJAX requests are fired; first, the form is validated, and if successful the form is submitted with a second request.
If remoteSubmit is true, after a successful submit the dialog is closed automatically. If the flashMessage option is provided, it will be shown at this point.
By default, remoteSubmit is false, which means forms submit via a traditional page reload.
 
callback
(Function; optional)
Specifies a callback function that will be executed after the dialog has loaded remote content. Note: this option cannot be provided via the data API, and is therefore only available when interacting with ips.ui.dialog directly.
 
forceReload
(Boolean; optional; default false)
By default, once a dialog has loaded its content, it will not do so again even if the dialog is relaunched. By setting this option to true, the dialog will call the url every time it is opened. This option only takes effect when the url option is used.
 
Events emitted by ips.ui.dialog
openDialog
Triggered when the dialog is shown.
Event data:
elemID
ID of the element that triggered the dialog dialogID
ID of the dialog element dialog
Reference to the dialog element contentLoaded
Boolean indicating whether the dialog content has been loaded (may be false if remote content is used)  
hideDialog
Triggered when the dialog is hidden.
Event data:
elemID
ID of the element that triggered the dialog dialogID
ID of the dialog element dialog
Reference to the dialog element  
dialogContentLoaded
Triggered after remote content has been loaded and inserted into the dialog.
Event data:
elemID
ID of the element that triggered the dialog dialogID
ID of the dialog element dialog
Reference to the dialog element contentLoaded
Boolean indicating whether the dialog content has been loaded (always true here)  
Events to which ips.ui.dialog responds
closeDialog
Instructs the dialog to close.
Event data:
dialogID (required)
The ID of the dialog to close (the event is ignored if the ID does not match the current dialog)
 

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

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

For more advanced sites built with Pages, you may want to change the output of a custom HTML or PHP block depending on which page the user is viewing. For example, if you have a custom menu, you may want to highlight the active item.
We can implement this in Pages by checking the underlying page URL parameters. Although you access a page with a friendly URL (FURL) like http://<yourcommunity>/section/page, behind the scenes this is mapped to a raw URL, such as http://<yourcommunity>/index.php?app=cms&module=pages&controller=page&path=/section/page. Notice the path parameter allows us to identify which page we're accessing. When we access the \IPS\Request::i() object, we can compare against this parameter, like so:
{{if strpos( \IPS\Request::i()->path, 'section/page' ) !== FALSE}} <!-- We know the user is on /section/page --> {{elseif strpos( \IPS\Request::i()->path, 'othersection/otherpage' ) !== FALSE}} <!-- We know the user is on /othersection/otherpage --> {{endif}} Note that for reliability, we're using PHP's strpos function to check for the presence of the page URL in the path parameter, rather than a simple comparison.
Example
Let's assume we've created a Manual HTML block, we're adding HTML to show a menu, and we want to highlight the correct item based on the page. Here's what our block contents might look like:
<ul class='ipsList_inline cMyMenu'> <li {{if strpos( \IPS\Request::i()->path, 'help/home' ) !== FALSE}}class='active'{{endif}}> <a href='/help/home'>Home</a> </li> <li {{if strpos( \IPS\Request::i()->path, 'help/faq' ) !== FALSE}}class='active'{{endif}}> <a href='/help/faq'>FAQ</a> </li> <li {{if strpos( \IPS\Request::i()->path, 'help/tutorials' ) !== FALSE}}class='active'{{endif}}> <a href='/help/tutorials'>Tutorials</a> </li> </ul> If we had many items to show, it would get tedious to list them all like this. We could instead do it as a loop:
// Using a PHP variable to store an array of pages => page names that we'll loop over {{$myPages = array('help/home' => "Home", 'help/faq' => "FAQ", 'help/tutorials' => "Tutorials", 'help/qna/listing' => "Questions", 'help/qna/recent' => "Recent Questions", 'help/contact' => "Contact Us");}} <ul class='ipsList_inline cMyMenu'> {{foreach $myPages as $url => $title}} <li {{if strpos( \IPS\Request::i()->path, $url ) !== FALSE}}class='active'{{endif}}> <a href='{$url}'>{$title}</a> </li> {{endforeach}} </ul> Now to add new items to our custom menu, we just have to add them to the array.

HTML Logic is a very powerful way of conditionally showing different elements in your theme, depending on the values of certain properties. Since the entire IPS4 framework is available within a logic expression, there's a lot of scope for using different kinds of data to determine what should show.
In this guide we'll provide a range of examples of common logic checks you might want to do. Even if the exact expression you need isn't listed here, it should provide a good starting point to help you write your own expressions.
 
Logic Recap
Let's quickly recap how HTML Logic works. For a more complete tutorial, be sure to read through the Template Syntax guide.
In IPS4, logic checks are done using the special {{if}}, {{else}} and {{elseif}} tags. As with standard programming logic, if the expression results in true, the block of code within is executed. If it is false, it isn't (and if there's an else or elseif block, that is tested for a true result instead). So, a block of logic in a template might look like this:
{{if member.member_id == 3}} <!-- If the member has ID 3, this will be shown --> {{elseif member.member_id == 9}} <!-- But if the member has ID 9, this will be shown instead --> {{else}} <!-- If the member isn't ID 3 or 9, then this will show --> {{endif}} If you need help constructing a logic check, feel free to check out the Customization Resources forum.
 
Examples. I want to...
Check if the user is logged in
{{if member.member_id}} <!-- this will show if the member is logged in --> {{endif}}  
Check if the user isn't logged in
{{if !member.member_id}} <!-- this will show if the user is a guest --> {{endif}}  
Check if the user's ID is one of x, y or z
You can check as many values as you like; just add more numbers to the array.
{{if in_array( member.member_id, array( 5, 28, 472 ) )}} <!-- Shows if the member's ID is 5, 28 or 472 --> {{endif}}  
Check if the user is in group x
Where x is the group ID number. Note that this also checks secondary member groups.
{{if member.inGroup('x')}} <!-- Shows if member is in group 'x' --> {{endif}}  
Check if the user has more than x posts
In IPS4, all content in all apps counts as a 'post'.
{{if member.member_posts > 3}} <!-- Shows if the member has more than 3 posts --> {{endif}}  
Check if the user has fewer than x posts
In IPS4, all content in all apps counts as a 'post'.
{{if member.member_posts < 3}} <!-- Shows if the member has fewer than 3 posts --> {{endif}}  
Check if the user is an administrator
Note that this also checks if any of the user's secondary member groups has admin permissions.
{{if member.isAdmin()}} <!-- Shows if the user is an administrator --> {{endif}}  
Check if the user is banned
{{if member.isBanned()}} <!-- Shows if the user is banned --> {{endif}}  
Check if the current page is part of app x
You need to check the application key. Most are obvious (e.g. forums is the forums app), but there are some others to be aware of. For custom/third-party apps, ask the author which app key they use.
core = Any system page that isn't part of another app, e.g. search, login/registration, profiles etc. cms = Pages nexus = Commerce {{if request.app == 'forums'}} <!-- Shows if the user is viewing any page in the 'forums' app --> {{endif}}  
Check if a system setting has value x
You can check whether system settings have a given value, although you will need to know the setting key used by the backend. Values may not be simple to check, depending on their type - consult our Customization Resources forum if you aren't sure how to check a particular setting.
{{if settings.auto_polling_enabled}} <!-- Shows if the 'auto_polling_enabled' setting is true (i.e. enabled) --> {{endif}}  
Check a variable in a template has value x
Template bits in IPS4 may receive one or more variables from the backend code. You can check the values of these within the template to do something based on the value. This only works within the template into which the variable you are checking is passed - they are not inherited.
{{if $myVariable == 'some_value'}} <!-- Shows if $myVariable is equal to 'some_value' --> {{endif}}  
Check if the current forum is forum ID x
Within the forums app, you can check whether the current page is showing the forum with ID x
{{if request.app == 'forums' && request.module == 'forums' && request.id == 3}} <!-- Shows if the user is in the forums app, viewing a forum with the ID 3 --> {{endif}} .

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

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>  

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  

We can now tie everything together with some Javascript. It's with the Javascript that everything will feel snappy and interactive. Begin by heading over to the template editor, and editing the Javascript file we created earlier.
The Javascript controller we write will do two things:
Load the first record when the page is loaded Handle click events on the other records to load the ones the user clicks Here's the final Javascript code you need to insert into the file. We'll explain it shortly:
 
This is a standard IPS4 javascript controller; refer to the controller documentation for more information.
In our initialize method (called automatically when the controller is initialized), we set up an event handler for clicking on elements with the data-releaseID attribute (if you remember, we gave items in our record listing this attribute). We bind this handler to the showRelease method.
We then call the setup method. The logic in this method selects a record to load automatically, so that the page has content in it when the user first loads it. It tries to find a record with the data-currentRelease attribute, but if one doesn't exist, it will load the first item in the list instead.
Finally, there's the showRelease method which has the job of loading and displaying the record view, pulled dynamically via AJAX. To do this, we find the relevant URL from the record row and then fire an AJAX request. In the done handler, we update the div that holds our record content.
When a Pages URL is called via AJAX (whether it's a normal page, or a database), it will only return the page content - it won't include the complete site wrapper. This makes it a little easier to implement dynamic page loading. However, in our case, the HTML we need is actually even narrower - we want just the record content, not any of the surrounding page from Pages. For this reason, in the done handler we select just the contents of the #elCmsPageWrap element, and use that as our record content.

Enabling integration with Google Maps provides autocomplete functionality when a user enters an address (which is particularly useful if you are using the Commerce application) and can display maps when looking at IP addresses and elsewhere.
Warning You need to enable three different API services. Make sure you follow all of the following instructions carefully.
To enable Google Maps integration:
Go to the Google Developers Console and sign in if you are not signed in already.
  In the top-left corner is the project selector.



You may already have a project if you have previously integrated Google login on your community. If you do not have project, click the dropdown and create one.


  Select "Enable API's and Services" in the top left of the screen


  Click the "Google Maps JavaScript API" link and then click the "Enable" button.

 
  Click "Credentials" from the left menu, and select "Create Credentials". Choose the API Key option.



  You will be presented with an API key. Please keep hold of this key for the next step.

On your community, to AdminCP > System > Community Enhancements > Google Maps. Here you need to select which items you wish to use. Here we have selected "Show Google Maps?"



Important: You will see it then shows at the bottom which APIs you need to enable within 'Enable API's and Services' in your Google Developer Console. We just enabled one already in the previous steps, however you will need to enable any others showing. These will be different, depending on your selections
  Click on Continue, and in the API key given above here, then follow the instructions given on this page to restrict your API key, and create another secret key.

 
 
 

There are several methods of adding advertisements on your Community both in HTML and as image-based ads. They are placed automatically in areas of your choosing.
Create Ads
Advertisements can be placed on you site in either image or plain HTML in Advertisements in the AdminCP.
You can add a new advertisement by clicking on the "Create new" button shown in the image above. Once you have done this you will be presented with the various options for creating an image. You can either enter HTML code or you can click "Upload Images" in order to upload an ad image.
In the example below, you will see you can chose to enter separate HTML code to appear on secure pages.
 

 
Once you have added your image or advertisement code, you can then choose the location and permissions for your advert to be shown. You can select more than one location for an ad to show and criteria for when and how long to show the ad.
When using Google Adsense adverts you may notice that page navigation no longer works as expected. This is caused by Google requiring that adverts are not loaded using AJAX. To resolve this issue you can disable AJAX pagination using the built in theme settings.

Ajax Pagination
Should you wish to disable an advert at any time, you can do this by clicking the "Enabled" text in the list, which will then change to "Disabled"

Disable/Enable
Manual Ad Placement
You can put advertisements in several pre-defined locations but it is also possible to create additional locations which you can insert by modifying the HTML code for your community or use in the Pages application.
First, create your advertisement as normal. For the "Show the advertisement" setting, select "Define your own location" and enter a key into the box (it can be whatever you like). You can then later use the same key for other advertisements that you want to show in this location.
Now you will need to insert a special tag in the HTML code where you want the advertisement to show. The code to insert is:
{advertisement="KEY"} Replace "KEY" with whatever key you used.
In your theme
Go to Themes and click the "Edit HTML and CSS" button for your default theme. The specific template you need to edit and where to make the change depends on where you want the advertisement to show. For this example, if you wanted the advertisement to show in the profile under the header, go to the core -> front -> profile -> profileHeader template and insert the code at the very bottom.
Since each theme has its own HTML templates, you will now need to repeat this for each theme.
In pages or blocks
The tag can be inserted in a page, block or template within the Pages application. Simply insert the tag wherever you want the advertisement to show.
Control when Ads Show
Using the responsive CSS classes available in IPS4, it is possible to set your ads up so that different content displays depending on the device size.
This only applies to ads you create yourself. If you use an ad service (such as Google Adsense), you should find out how that service supports responsive ads.
For example:
<div class='ipsResponsive_showDesktop ipsResponsive_showTablet ipsResponsive_block'> This ad shows on desktop and tablets, but *not* phones </div> <div class='ipsResponsive_showPhone ipsResponsive_block'> This ad shows on phones, but *not* desktop and tablets </div> Ads in email
Introducts in version 4.4 of the Invision Community platform, is the ability to show your ads within your community emails, as well as on your site. Within the same email section, you will see an Email Advertisements tab, where you can ad advertisements which will only show within emails.
Ads within Emails can be restricted to only show within specific email types. As you can see in the image below, I have changed this ad only to be sent when the email is from a Topic, such as a topic reply notification.

Email Ads