Themes

Themes give you control of the look and feel of your website through an easy-to-use interface, allowing you to implement custom website designs without custom CSS. With control over navigation styles, content styles, and logos, you can get your website looking how you want it—and make changes on the fly—with no technical knowledge required. 

• Themes allow you to style navigation and content, as well as add a logo for your website and a logo for the emails that get sent from your website.
• Websites can have many themes, but only one can be assigned at a time. Change the currently assigned theme by going to admin and editing the "website" card under the "info" tab.
• Edit themes by going to designs > themes. You can use one of the existing themes, which have been created to include the basics of a few common website designs, changing values in one of these starter themes to match it to your brand and design. Alternatively, you can start from scratch by creating a new theme. Click on the name of a theme to go to its details page. 
• Under the "navigation styles" tab you can edit existing navigation styles or add a new style to a specific nav and level(s). 
• Under the "content styles" tab you can edit existing styles or add a new style to a specific page region. The styles in "body" are the default for all page content (a good place to start), and styles assigned to specific page regions override styles in "body." Refer to this diagram of the page regions to see how styles inherit from one another, and see this article for more specific info on the available styles.

To access themes, navigate to design > themes in the AR5 primary navigation. Here, you'll see a list of the existing themes for your website. Every website comes with a few themes included that have been created to fit some of the most common types of site designs. One of the themes on this page will already be assigned to your website. You can view and choose which theme is assigned to your website by navigating to admin, clicking on the "info" tab, and editing the "website" card, where you'll see a field for "theme." We encourage you to take a look at the pre-created themes to see if any of them may provide a good starting point for implementing your design. To see how a theme looks, select it from the list, save the info card, and click "website" in the primary nav. Duplicating and modifying an existing theme is often more efficient than starting from scratch.

Back on the themes page, you can either click on an existing theme to view and edit it, or create a new theme using the green "add" button. An "import" button is also available for bringing a theme over from another CMS. Contact support for more information on importing and exporting themes.

Clicking on a specific theme in the list will bring you to that theme's details page, where you'll see four tabs: "info," "navigation styles," "content styles," and "logos." Under the info tab, you'll see the usual administrative details about the theme such as when it was created, and you'll also see links to edit the info, duplicate the theme, delete it, or export it.  Under the navigation and content tabs, you'll see a list of the items to which you can add styles and, under some of these, you may or may not see some pre-assigned style cards. You can open these style cards using the blue disclosure arrows on the left side of their title bars, allowing you to see the existing styles in each card, and you can change styles by clicking "edit." 

Style options in themes are grouped according to the type of element that they apply to (text, headings, links, etc.). For detailed information on the available style options, see Style Options.

Navigations or "navs" are groups of pages in your page tree (see Navigation and Your Page Tree) and correspond to menus on your front end website that contain links to those pages. Navigation styles determine the look and feel of those menus. 

Under the navigation styles tab is a list of navigations: "nav-1," through "nav-9," as well as the subnav (although AR5 sites come with only the first three navs and the subnav by default, you can create additional navs as needed, up to a maximum of 9 total plus the subnav). Each nav, in turn, is divided into "level one" and "sublevels." Level one corresponds to the first set of links that's always visible on the page, and the sublevels are the links that, by default, appear only when a user hovers on an item in level one. A theme allows you to include separate styles for level one and the sublevels of each nav.

The style groups that are available under navigation styles are "Text," "Background," and "Width, Padding, and Borders." If you're editing an existing theme, you may see styles already in place under navs 1, 2, 3, and the subnav, which you can edit as needed to fit your design.

Under the content styles tab is a list of page regions (the names correspond to class names used in AR5-generated HTML). You can assign styles to page regions to target specific content on your site. By default, styles assigned to "body" will apply to all page content, but styles assigned to other page regions will override body styles. Some regions will inherit styles from other regions, and the style nearest in the hierarchy will always be used. See below a graphical representation of the page regions.

In the diagram, regions inside other regions will inherit styles from the regions that contain them. For example, ".col-1" inherits styles from ".middle-content," which inherits from ".middle-outer," which in turn inherits from "body." The diagram also represents in a rough way the default layout configuration of an AR5 page. The white boxes, labeled col0 through col4, are columns that correspond to the five content tabs that you add modules to when working on a page in AR5. 

Because of the way that regions inherit styles, we recommend that you begin implementing your design by putting default styles in place (in body), and then moving on to other regions. If you're working on a pre-existing theme, styles may already exist for some regions, which you can edit as needed to fit your design.

Under the logos tab you can add logos for your website. If you're working on an existing theme, you may see the two available logos, labeled "logo" and "email logo," already assigned. To change them, click "edit." If you're working on a new theme, you can add new logos using the green "add" button. Only one of each type of logo is allowed. 

The email logo appears in all automatically-generated emails that get sent from your website, such as email reciepts for form submissions. The other logo appears in the masthead by default and includes a link to the home page. Clicking on the image field while editing a logo allows you to access your library, where you can upload and/or choose an image to use as your logo.