SlimTall

The foundation of Pages (the application) is the page (the thing).
                        Tip To alleviate confusion in these tutorials, the application "Pages" will always be referred to with a capital letter; pages within the application or community will be lowercase.
What is a page?
A page is a container for content. Depending on your needs, a page can simply contain simple content (whether that's plain text, or rich content with images, embeds, and the other things you're used from our other applications), or more complex content like blocks and databases (see later steps to find out more about those).
If you are comfortable with code, you can also use all of our standard template logic in a page, allowing for some highly custom results. For those who aren't comfortable with coding, there's an easy page builder, allowing you to drag and drop components into your page.
A page has a URL, and can be automatically added to your menu navigation when you create it, if you wish.
A page can also have custom permissions, allowing you to restrict who can or cannot access the page. This is great if you want to build special sections of your site, perhaps for staff or premium members only.
Prior to Invision Community 4.3, Pages were not searchable (although external search engines such as Google will index them). However, if you have a database on a page, the content of the database will be searchable.
Creating Pages
Pages are created via the AdminCP, by navigating to Pages -> Pages. A directory listing of your current pages will be shown. Folders are supported here as you'd expect; the URL of the page will reflect this structure. For example, a page called index in a folder called guides will have the URL <your community URL>/guides/index. 
When you click the Add Page button, you are asked whether you want to use the Page Builder or Manual HTML.

Page Type
Page Builder
After creating the page in the AdminCP, you'll be able to go to the front-end to add content to your page, using drag and drop from the sidebar manager. This option is best for those not familiar with HTML. Manual HTML
When you choose this option, you'll be provided with a code editor to create your page. Within this code editor you're free to use HTML, as well as the full range of template logic supported by IPS4. With this method, you insert other items (blocks, databases etc.) into the page by using special tags. A sidebar on the editor show you the available tags.  
Managing content in pages with the drag and drop editor
If you've created a page using the Page Builder options, after saving the configuration in the AdminCP, you can head over to the page on the front-end to manage its content (click the View Page option from the menu on the page listing screen to easily navigate to it). 
By default, the page will be empty. Click the sidebar toggle to open the sidebar and see the available widgets. All of the usual widgets are available to you from across the suite, but under the Pages category are a handful of special reusable widgets:

Block Manager
Of these, WYSIWYG Editor is the one you'd be most likely to use when setting up your pages. It gives you a standard IPS4 rich text editor to add content to the page. Simply drag it into a location on your page, then click the Edit button to access the editor. We won't cover the other blocks here since they are specific to other kinds of functionality within Pages.
Managing content in pages using Manual HTML
When you create a page using manual HTML, you can choose how much of the standard IPS4 wrapper you start with. By default, the suite wrapper is included in the output. This encompasses the header, menu navigation etc., meaning the content of your page is inserted inside this wrapper. With this option disabled, the suite wrapper isn't used - you'll be responsible for providing this (you can however choose a custom page wrapper you've created).
If you use the suite wrapper, you can also choose whether the standard sidebar is included in the output. The content you enter into the code editor forms the main page content, and the sidebar will be managed as usual with drag and drop on the front-end.
Adding to Navigation
When you create a page, you can easily add it to your site's main navigation menu under the Menu tab on the page edit screen. Alternatively, you can add it to the menu manually via the normal menu management process.
 
Setting as Default
Often you will wish to set the pages application as your default application, so that you can show a page you created as your default homepage. For this, along with how to create a basic homepage, please refer to the following guide.
  Blocks

Reputation & Reactions are an important part of communities across the internet. IPS Community Suite gives you the flexibility to set these up in a way which is suites your own community needs.
 
Basic Settings
Reputation settings can be managed in the following location in your ACP
Members -> Member Settings -> Reputation & Reactions
From the basic settings screen, you can set up various overall settings, related to how reputation and reactions work on your site. You can switch the system on and off, as well as assign which groups are allowed to use this, and how to display the reputation items.

Example Reputation Settings
One important item to note here, is the "Highlight content with positive reputation. When this is set, topics will be highlighted when they reach the set reputation level, along with being given a reputation symbol in the top right to highlight the post has high reputation.

Denotes High Reputation Post
Reactions
Reactions settings can be managed in the following location in your ACP
Members -> Member Settings -> Reputation & Reactions -> Reactions
On the reactions tab you will see a list of all the reactions that a user can give on your site. Each of these is given either a positive, a negative, or a neutral value. These are the reputation points in which a user will receive for a particular reaction. You can reorder these using the anchors on the left of each item. You can create new reaction items using the button in the top right of the screen.

Default Reaction Set
You will note that the 'like' item has no ability to delete. This is the default reaction, and is what is shown at in the reaction placement area on posts. Your users point at this icon in order to show other reactions, or click to give this reaction. Of course you can use the pencil icon to edit this to be anything you wish.

Pointing at the like icon shows other reactions
Leaderboard
The new Leaderboard is designed to better highlight your most active members and content based on reputation and other metrics. The Leaderboard will greatly enhance both member and content discovery on your community. Winners being highlighted within the profile when 'winning the day', and being added to the past members list. In turn, this can improve member participation on your site.

IPS Community Leaderboard
Leaderboard settings can be managed in the following location in your ACP
Members -> Member Settings -> Reputation & Reactions -> Leaderboard
From here, you can change various settings to determine what and how the leaderboard will display, or indeed if it will display at all. This can be helpful if, for example, you wish to exclude staff, or specific items, from being counted.

Leaderboard Settings
Reputation Levels
Reputation levels can be managed in the following location in your ACP
Members -> Member Settings -> Reputation & Reactions -> Reactions
Here you will see levels that can be gained upon reaching a set number of reputation/reaction points on your site. These can be given a reputation name and optionally an image.
 

Reputation Levels
Clicking on "Create new" will give you the opportunity to add a new reputation level. The one I have created below as an example will give people the superstar reputation level with a star image upon hitting 1000 reputation points.

Example Reputation Level
Note: Within each member group,  you can also set whether that group can see who has given reputation and the amount of reputation they can give in any one day.

In any community there will always be information you want to capture about your members which is not provided within the core product. These may be information needed for administration purposes, or items which you wish to have displayed within profile, or content items. In the IPS Community Suite, we provide the ability to set up many of these, grouping in a way in which is appropriate to your site. 
Setting Up
Profile fields can be set up within the following location within your ACP
Members -> Member Settings -> Profiles -> Profile Fields

Profile field list
Clicking on the Create New button in the top right will allow you to set up a new grouping for profile fields, similar to what you see above with the Personal Information section. To add a new field to a group, select the + at the side of the relevant group.
 
Clicking to add a new field will show you the following screen. You will see I have selected text as the field type on this occasion which will let a user enter information into a text box. 

New profile field entry
 
You can see settings here you can use to set up a maximum length and even using Regular Expressions to validate the data that is entered. You will note that there is no "Required" element shown here. This is because we have profile completion set up. If you do not have quick registration set up to use profile completion, you will also see a "Required" checkbox which can be selected.
 
In addition you can set up where the information is shown, how it is shown, and its behavior with regards to being filled in. Do you want this to be edited once it is filled in? No? Not a problem, just de-select the "Member can edit value" and it will only allow this to be entered once.

New profile entry
What is important to note on the screenshot above, is the "Display Format for..." sections. These will appear only if you have the corresponding settings to make these viewable, and were introduced in version 4.4 of the Invision Community platform. So for example, above we have "Show to staff" set for the "Show with members content submissions". If we switched this not to show, then you would not see the "Display format for topics" option.
Display Formatting
The display formatting sections by default will display just the field contents. However you can display the item stored in the field in any way you wish, by selecting "Use Custom Formatting". You will then be shown the following field for adding your own formatting code

Display Formatting
This is where you can enter HTML along with the placeholders provided to display the information in any manor that you choose. This is how they will then be displayed in that area (Profile or topic).
Note: Prior to the 4.4 version, this is a single field named "Display Format" and applies to both areas. {title} and {content} should be used instead of the ones below.
If you add the following code to the example field we set up, the placeholders {$title} and {$content} will be replaced with the title of the custom field, and the content that is entered by the user
<strong>{$title}:</strong> {$content} User Side
You will see once you have set up your profile fields the members can then add the information from within their profiles.

Profile Field Completion
Depending on if you have setup of your profile fields to be searchable, these can also be searched using the member search form on your site

Profile Field Search
And of course, they will show up in various areas of the site, using the formatting in which you have set to your own liking.

Formatting on Posts
 
 

By default, we use the 'comments' icon from FontAwesome to represent forums on the read/unread badges. IPS4 also includes an option to upload an image that will be used instead of the icon. But what if you want to use a different FontAwesome icon for each forum?
The good news is this is possible using some custom CSS. Each forum row in the index template includes a data attribute with the forum ID, meaning we can write a style to specifically target each individual forum and overwrite the icon it uses.
Note: Although this method isn't terribly complex, it does require editing custom CSS and working with unicode characters.
 
Determining the icon unicode value
The method we're going to use involves replacing the icon using a CSS rule, rather than changing the icon classname in the HTML. The reason we take this approach is it won't make upgrading your templates difficult later - our custom CSS persist through IPS4 versions easily.
What this means however is that we need to identify the unicode value that FontAwesome assigns to the icons we want to use.
To do so, head over to the FontAwesome icon list on this page. Locate the icon you'd like to use, and click it. On the information page, you'll see the unicode value for the icon. Make a note of this code. For example:

Do this for each icon you'll want to use.
 
Adding the CSS
We're going to add our CSS to our custom.css file so that it persists through upgrades. In the AdminCP, go to Customizations -> Themes, and click the code edit icon next to the theme you want to change. On the CSS tab, open the custom.css file:

The rule we need to use looks like this:
[data-forumid="..."] .fa-comments:before { content: "\f123"; } You'll need to adjust this code to include the forum ID for the forum you want to change. You can find the forum ID by hovering on the link to the forum, and noting the number you see in the URL: 

You'll also need to replace the f123 unicode value with the one for the icon you want to use that you noted earlier.
 
Example
Let's say we have forum ID's 1 and 2, and we want to use FontAwesome's bicycle and car icons, respectively. We note the unicode values for those icons, which are f206 and f1b9.
The CSS we'd add looks like this:
[data-forumid="1"] .fa-comments:before { content: "\f206"; } [data-forumid="2"] .fa-comments:before { content: "\f1b9"; } Once we save it, we can see the result:

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

Templates, CSS and JS files are the means by which coders can take the default output of the various parts of Pages, and customize them to build unique parts of their site.
Note: only those familiar with HTML, CSS and some PHP should consider modifying their templates. Since they involve editing code, it's easy to break the output of your site unintentionally!
 
Types of template in Pages
Templates are the key to customizing areas of your Pages website so that they're unique to your site and to your particular use of them. There's three primary types of template you can customize:
Database templates
Databases templates let you change the output of just about every part of your databases. There's four main types of template: Category Index
The templates that render the category index of a database, and subcategories when browsing the record listing. Listing
Templates that render the record listing Display
Templates that render record view itself, including comments & reviews Form
Templates for the add/edit form, allowing you to customize this form per-database Page templates
By default, a page will use the suite wrapper, which includes the header, navigation, user bar etc. leaving your page content to control the actual content area. However, you can instead choose to use a custom page wrapper, allowing you to control the entire output of the page. Wrappers are created as page templates, and selected when you create your page. Block templates
When you create a plugin block showing a feed of data, IPS4 uses a default template. You can however customize this template or create a new one, allowing each block to have a unique appearance.  
What can blocks contain?
Blocks can contain the full range of IPS4 template syntax, which affords great flexibility. The data available to each template will depend on its type (for example, a database listing template will receive data from the database category, but a block template will receive data that matches the block's filters), but all templates can access the full underlying IPS4 PHP framework.
 
Creating & Editing templates
Database and page templates are managed in the Pages template editor, accessed by navigating to Pages -> Templates in the AdminCP and clicking the New button.
Default block templates are also managed in the template editor as above, but can also be customized per-block within the block configuration themselves, by going to Pages -> Blocks in the AdminCP and then editing the block in question. 
 
CSS & JS files
To fully customize sections created with Pages, it's often desirable to add custom CSS and Javascript. Pages offers a built-in way to write and use these resources and then assign them to a page for use.
CSS and JS resources within Pages are managed by navigating to Pages -> Templates in the AdminCP, and then clicking the CSS or JS tabs in the editor. New resources can be added by clicking the New button.
To assign them to a page, simply select them on the Includes tab when creating or editing a page in the AdminCP.

Database URL Structure
Databases exist inside a page you've created with Pages. Individual categories and records in the database are accessed via the URL of the page. For example, if you had a page with the URL <yourcommunity>/mypage and this page contained your database, you might have a record that's accessed via the URL <yourcommunity>/mypage/category/record, where category is the category name and record is the record name. Your URLs would dynamically update themselves if you renamed your page or moved the database to a different page.
To facilitate this approach, databases can only exist in one page at a time. They can't be duplicated on other pages (although you can create blocks showing data from the database and use them on other pages).
 
Fields
More advanced uses of databases require custom data to achieve their goals, and fields can be set up to gather this data. Fields are created in the AdminCP, and when a user adds a new record, the fields are shown on the form. 
IPS4 supports a wide range of field types, allowing you to capture data of a specific type easily. Here's the supported types:
Address
Provides a special auto-completing address field, powered by Google Checkbox
A single on/off checkbox Checkbox set
A group of several on/off checkboxes Code
Provides a way to syntax-highlight code Date
A date field, with a date picker Editor
Provides a rich text editor for WYSIWYG editing Database relationship
An advanced field type that allows records from different databases to be associated Member
Provides an auto-complete member search box Number
A number input box (on older browsers, reverts to a simple text box but with number validation) Password
A password input field Radio
A group of radio boxes (meaning only one of the options can be selected) Select box
A drop-down menu containing the provided options (can allow multiple selections if desired) Soundcloud
A Soundcloud embed field Spotify
A Spotify embed field Telephone
A telephone number input field (on older browsers, reverts to a simple text box) Text (default)
A one-line text input field Text Area
A multiple-line text input field Upload
An IPS4 upload field URL
A URL input field (on older browsers, reverts to a simple text box with URL format validation) Yes/No
A toggle field that can accept yes or no values YouTube
A YouTube embed field Many of these field types have additional options specific to them. For example, select boxes have an option to allow multiple values to be selected, whereas the upload has options to allow multiple files, and a way to restrict file types.
Field Formatting
Fields can have automatic formatting applied to them. For non-coders, a range of badge colors is available to choose from, and you have some control over the location that the field shows in the listing or record display. For coders, however, you have full control over the HTML output for each field, including having use of IPS4's template logic. This means you have the ability to use the data stored by IPS4 for each field in some very interesting ways - for example, you might take the value of an address field and use it to output an embedded Google Maps map, or even create some fields that you don't output, but instead use to control the layout of your record templates. There are a huge number of possibilities.
 
Permissions
There's multiple levels of permissions at play with databases:
Page-level
Since pages have their own permission settings, if the user doesn't have permission to see the page, they won't be able to see the database either. Database-level
Permissions can be set at a database-level, which forms the default permissions for categories in the database too. Category-level
A category can optionally override the database-level permissions and provide its own. This is useful for hidden categories - perhaps staff only, or a category only for premium members.  
Managing Databases
Databases are managed by going to Pages -> Databases in the AdminCP. You'll also find that databases are listed in the Pages menu in the AdminCP for quicker access. From this screen, you'll see some simple information about each of your databases, as well as menu items to manage each part:

Managing Database
Records can be added either via the AdminCP (click the   icon) or via the front-end page that displays the database. This means users don't need AdminCP access to add/edit records.
 
Creating Databases
To create a database, click the Create New button on the screen above. There's a number of configuration options available to you.
Details
The basic settings for this database. At the bottom of this tab, you can choose the templates you want to use for this database. If you haven't created them yet, you always do this later.
  Language
On the Language tab, you set up the words that will be used to refer to records in this database (rather than the generic 'records' terminology). For example, if you are creating a database for guides, these language choices will mean IPS4 will refer to your database in context, such as "Search Guides", "There are 5 guides in this database" and "Create a new guide".
  Options
This tab more finely controls how your database will work, including comments, reviews, tagging, and the 'wiki-style' editing we covered earlier. Sorting options are also available here, allowing you to choose the order of records, and more importantly, the field on which they are sorted. For example, if you had a database containing records about dinosaurs, you may want to sort the records by Era (a custom field you will have created). You can return to this tag after creating your fields later to configure it.
  Forum
This tab configures the aforementioned Forums integration for the database (individual categories can override these settings too).
  Page
Since a database requires a page in which it displays, you can easily create one here as part of the database creation process. Alternatively, you can add it to one of your existing pages later.  
Adding to a Page
If you don't create a page as part of the database creation process (above), you can do so manually by using a special database tag in your page content. On the Details tab of the database form, you specified a database key. This is how this database is included in pages. If the key is my-database, you'd insert it into a page by placing this:
{database="my-database"} As mentioned above, a database can only exist on one page at a time; trying to use this tag on multiple pages won't work correctly.

What is a database?
Databases are one of the most powerful and flexible features available in the Pages application. With some configuration and customization, they enable you to add complex, data-driven areas to your community, using some of the basic underlying functionality that full IPS4 applications have.
Databases, as the name implies, are designed to hold data and display that to the user. This might be as simple as a table of records each containing a title and a body, from which you could make a very simple blog-like section, or it might be as complex as a completely custom interface backed by a large number of custom data fields specific to your needs - and the possibilities for this are endless.
 
Features
Searching
Databases are searchable by default (although you can turn this off if desired). Each database is treated as a distinct area of your community, so on the search form, each database is listed as a first-class area to search, much like the Forums app for example.
Core suite features
Pages provides a range of core application features to databases that make even the simplest database feature-rich and well-integrated with your community from the outset. Commenting and writing reviews for records is available (although this can be disabled per-database). Users can also follow categories and records to be notified of new content wherever they are in the community. Social features such as reputation and sharing to other social networks is also built-in and available for records. Tagging and full moderation of records is also supported by default, and integrated across the suite as you'd expect.
Wiki-style editing
In terms of adding/editing records, databases in Pages behave much like you'd expect from our other applications; that is, when a user with permission creates a record, they 'own' it. However, databases have an option for wiki-style editing, whereby any user can edit records after they are created. This approach is great for community-curated content.
Revisions
Databases also support revisions for records. This means each time a record changes, the previous version is saved as a revision that can be accessed again later - you can also revert to an earlier revision if desired.
Forum Integration
Finally, databases has special integration with our Forums app. When posting a new record to a Pages database, IPS4 can optionally cross-post the record as a forum topic, to a category of your choosing. But it goes further - you can even use the forum topic as the comments for the record, rather than the standard commenting interface that records have.
 
What does a database consist of?
There's a few key components in a database to be aware of when creating one:
The database itself
Naturally, you need to create the database itself. This is where you configure options that affect that database as a whole, such as sorting, permissions, and so on. Categories
If your databases uses categories (you can optionally choose not to), they add another level of structure and permissions. Fields
We'll cover fields in more depth shortly, but you can create custom fields for all kinds of data that you might need for your database. IPS4 supports a wide range of field types, from simple text boxes up to YouTube embeds, upload fields and intra-database relationships. Templates
Templates allow you to customize the output of the database. Default templates are supplied with IPS4, and if you aren't a coder, using these defaults allow you to get a database up and running quickly. For coders, however, customizing templates is the best way to build complex data-driven applications. Templates, CSS & JS

By default, IPS4 has a maximum body width of 1340 pixels, and is fluid at sizes smaller than this. However, we ship the software with a customizable theme setting allowing this to be easily overridden, should you want to change the behavior.
 
Using the Easy Mode theme editor
If your theme was made using the Easy Mode editor, you can adjust the body width on the Settings tab when designing your theme. First, click the magic wand icon to launch the Easy Mode editor:

And then the Settings tab. There's two settings you need to adjust; turn on Enable Fluid Width, and then change the percentage value in the Fluid Width Size setting. To have it take up all available space, set this to 100%.
 
Using the standard theme editor
If your theme was created using the standard theme editor in the AdminCP, you adjust the theme settings also in the AdminCP. Click the edit icon next to the theme you want to adjust:

And on the Custom tab on the edit screen, you will see the Enable Fluid Width and Fluid Width Size settings.

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.