Customize Themes

Overview

This is where you may implement your own custom theme or customize an existing Thrive theme. It is also in this area that you may add alternate header images for themes that use them. See the Header Images section below for more information.

If you have a custom theme that you have purchased elsewhere, or one that you have designed yourself, that you would like for us to program into your site, email us at support@thrive.am so that we can give you an estimate on the time and cost required.

My Themes

In this section,  you will see thumbnail images for each of the themes that have been added to the My Themes section of the Choose a Theme area. Click any of the thumbnail images to begin customizing that theme or managing its header images.

Theme Customization Area

In this section, you are able to click the larger thumbnail preview image of the theme to change it to a different image, update the theme name, tag the theme for easier searchability in the Choose a Theme area, and enter a brief description of the theme.

Templates

The buttons to the right of the Templates heading enable you to customize the web, email, and print templates for your chosen theme. The web templates area is where the header images for the theme are managed. You can also use the system Smart Tags which use the information in the Site Settings area here to extend the features and functionality of your theme. You will want to spend some time getting acquainted with the Smart Tags if you intend to do anything beyond very basic theme customization.

Web

The tabs at the top of the web templates area give you access to the full HTML, CSS, and JS code for each of the content types the system offers. Each tab except the Headers tab has buttons in the upper right corner for previewing the template, accessing the My Files area, editing the template's HTML, and editing the template's CSS. When accessing a tab for the first time, the HTML area is displayed by default. When switching between tabs, the system remembers which area you last viewed and displays it when you return to a tab until you close the theme customization box.

Headers

To add a new header image to this theme, click the "Add Header" button to upload or select a new header image in the My Files file storage area. *Important* - when adding a new header image to the list, you must ensure that your image file name does not contain any spaces as it will cause the image to be unavailable when you publish your page.

To set a header in the list as the default header for this theme (the one that gets selected automatically when a new page is created which has a header image - this depends on page type and the specific styles of your chosen theme), hover over the image and click the check icon that appears in the upper right corner.

To rename a header, hover over the image and click the textbox in the upper left corner and type a new name without spaces or special characters.

To delete a header in the list, hover over the image and click the "X" that appears in the upper right corner.

Canvas

This tab contains the source code for the main structure of the site. Some templating systems refer to this as a base, framework, or backbone. Essentially, it is where any code that should be repeated on every page of the site goes (i.e. HTML document opening/closing tags, meta tags, header, footer, etc.). You will notice that there is a [c:Content] Smart Tag which serves as a placeholder for each of the template types in the other tabs (Home, Page, Calendar, Album, Blog, Media, and Form). This tag gets replaced by the code for the other template types when the corresponding page type is displayed on your site. This enables your site to have unique layout structures on each of the page types you can create such as a two-column home page, three-column secondary page, one-column calendar page, etc.

To preview this template layout live, click the View button in the upper right corner. Note that Smart Tags are rendered as text in the preview, rather than the actual values they represent.

Click the Files button in the upper right corner to upload and manage files in the My Files area.

To edit the HTML of this template, click the HTML button in the upper right corner. HTML that you enter here can be any version of HTML including HTML5 (as long as you update the DOCTYPE declaration and opening HTML tag appropriately), but it must be XML compliant, which means that all opening tags must have closing tags or be self-closed if applicable and special characters such as the ampersand (&) and other named character entities like © (©) must be referenced using their HTML number reference (i.e. & for the ampersand). A good resource for finding HTML number codes is ascii.cl/htmlcodes.htm. If you get an error message when saving your templates, these are the most likely sources.

To edit the CSS of this template, click the CSS button in the upper right corner. You can use @import statements to import external CSS files into this area as well as enter styles directly. Opening and closing style tags are not needed and not allowed here as they are already being inserted by the [c:Head] Smart Tag that is required and included by default in all themes.

It is always a good idea to validate your HTML and CSS according to the specification version you are using in order to ensure broadest support among web browsers. The W3C offers a great free validation service at validator.w3.org.

Home

This tab contains the source code for the home page template. This page type can have up to two editable areas. The c:Content.Content and c:Content.Aside smart tags are placeholders for these editable areas. These are the areas you will be able to edit using the editor tools in the Manage Web Site area.

See the notes in the Canvas section above for instruction on previewing, editing, and validating.

Page

This tab contains the source code for the secondary page type template. This page type can have up to two editable areas. The c:Content.Content and c:Content.Aside smart tags are placeholders for these editable areas. These are the areas you will be able to edit using the editor tools in the Manage Web Site area.

See the notes in the Canvas section above for instruction on previewing, editing, and validating.

Calendar

This tab contains the source code for the calendar page type template. This page type can have up to two editable areas. The c:Content.Content and c:Content.Aside smart tags are placeholders for these editable areas. These are the areas you will be able to edit using the editor tools in the Manage Web Site area. This page type is a little different from the others in that it also uses the calendar widget to display an interactive calendar on the page. You will notice that there are also actually two instances of the two editable areas in the template - one set for the main calendar page and another for the event item detail page, though presently you cannot actually edit the aside content for event item detail pages because it is not accessible from the event item management screen. These two sub-page types can also have layouts that differ.

See the notes in the Canvas section above for instruction on previewing, editing, and validating.

Album

This tab contains the source code for the album page type template. This page type can have up to two editable areas. The c:Content.Content and c:Content.Aside smart tags are placeholders for these editable areas. These are the areas you will be able to edit using the editor tools in the Manage Web Site area. Similar to the Calendar template, this unique template uses Album-related Smart Tags to write out most of the page content. Also similar to the Calendar page type, there are two instances of the editable areas - one for the main Album page and one for the image item detail page, though presently you cannot actually edit the aside content for image item detail pages because it is not accessible from the image item management screen. As with the Calendar template, these two sub-page types can have layouts that differ.

See the notes in the Canvas section above for instruction on previewing, editing, and validating.

Blog

This tab contains the source code for the blog page type template. This page type can have up to two editable areas. The c:Content.Content and c:Content.Aside smart tags are placeholders for these editable areas. These are the areas you will be able to edit using the editor tools in the Manage Web Site area. Similar to the other unique templates, this template uses Blog-related Smart Tags to write out most of the page content. Also similar to the other unique page types, there are two instances of the editable areas - one for the main Blog page and one for the blog post item detail page, though presently you cannot actually edit the aside content for blog post item detail pages because it is not accessible from the blog post item management screen. As with the other unique templates, these two sub-page types can have layouts that differ.

See the notes in the Canvas section above for instruction on previewing, editing, and validating.

Media

This tab contains the source code for the media page type template. This page type can have up to two editable areas. The c:Content.Content and c:Content.Aside smart tags are placeholders for these editable areas. These are the areas you will be able to edit using the editor tools in the Manage Web Site area. Similar to the other unique templates, this template uses Media-related Smart Tags to write out most of the page content. Also similar to the other unique page types, there are two instances of the editable areas - one for the main Media page and one for the media episode item detail page, though presently you cannot actually edit the aside content for media episode item detail pages because it is not accessible from the media episode item management screen. As with the other unique templates, these two sub-page types can have layouts that differ.

See the notes in the Canvas section above for instruction on previewing, editing, and validating.

Form

This tab contains the source code for the form page type template. This page type can have up to two editable areas. The c:Content.Content and c:Content.Aside smart tags are placeholders for these editable areas. These are the areas you will be able to edit using the editor tools in the Manage Web Site area. Similar to the other unique templates, this template uses Form-related Smart Tags to write out most of the page content. Unlike the other unique page types, however, there is only one instance of the editable areas because this page type does not have any sub-types.

See the notes in the Canvas section above for instruction on previewing, editing, and validating.

Comment

This tab contains the source code for the comment template. The comment template uses the comment widget and is inserted on page types that allow commenting. This content type does not have any editable areas because it isn't a page type.

See the notes in the Canvas section above for instruction on editing, and validating.