Creating custom themes

Several themes have been created for the Quick Start Sites. You can modify these themes to help identify and personalize your organization’s website.

• Before modifying a theme, find the best one: apply all of the themes to the default Member site in turn, and decide which theme is closest to the final look and layout that you want.
• Always work from your copy of the theme, so that you can begin again. For more information, see Copying a website theme.
• When updating theme files, it is recommended to not rename the .css file names. Renaming the .css files will require you to upload a whole new theme instead of editing the existing theme.
• Make changes only to websites that you create. When a Quick Start Site is updated with each release, the iMIS Upgrader overwrites any changes you made to it.
• Developed toward W3C standards to help meet accessibility requirements
• Take advantage of browser-based developer tools to test and troubleshoot changes before committing them to your style sheets. Press F12 to toggle the Developer Toolbar:

Best practices

Review the following best practices before copying a website theme:

• Themes change and develop with every iMIS update. To avoid losing your changes, be sure to work from a copy of the theme. Working from a copy of a website theme is easier than creating a theme from scratch.
• In addition to working with a copied theme, do not edit the copied theme's style sheet directly. The best practice is to create your own style sheet that contains the customizations you need, making sure the custom style sheet loads after the default style sheet.

Example: You downloaded the Mocha website theme and want to start changing the default colors. Instead of opening and editing 99-Mocha.css, you create a new .css file called zz_[ClientName].css, add the contents of 99-Mocha.css to zz_[ClientName].css, and begin making changes in zz_[ClientName].css. Style sheets are loaded alphabetically, so prepending the new style sheet with zz_ ensures the custom style sheet loads last, which uses the custom styles over the styles in 99-Mocha.css.

Copying an out-of-the-box theme

Do the following to copy an existing iMIS theme:

1. Go to RiSE > Site Builder > Manage websites.
2. Open the Quick Start Sites folder.



3. Select the Member Responsive site.

Note: For this example, the Member Responsive site is used, but the ability to download a theme is accessible from any website.

4. Click the Look and feel tab.
5. Click Advanced Options.



6. From the Theme drop-down, select the theme you want to copy.



Warning! Do not save the website with an incorrect theme selected from the Theme drop-down.

Note: For a preview of the out-of-the-box iMIS themes, see Using out-of-the-box themes.

7. Select Download theme files. The theme's content (images, skins, and CSS) will download to your computer as a zip file.



8. Copy the .css file and paste it in the same folder.
9. Rename the copied file to zz_[ClientName].css.
10. Any CSS changes must be made to the copied .css file. See the best practices for more information.

To learn more about what files you should edit (for example, how to change the colors or fonts), see Creating a custom theme. To learn how to upload a theme back into iMIS, see Making a custom theme available in iMIS.

Themes control many of the aesthetic elements of your website, such as fonts and colors. To create a personalized theme for iMIS, copy an out-of-the-box theme and customize it to fit your organization's needs. If you want greater creative control over the look and feel of your website, you can build a new theme.

When you create a new theme, it must contain the following required elements:

• Theme CSS files
• A .skin file (one or two is best)
• Required images

After the theme is created, you will zip all of the files and images into one folder, then upload the folder to RiSE > Theme Builder > Themes (see Making a custom theme available in iMIS to learn more about this process). Then, to use the new theme in a specific website, you must select the theme in the Look and feel (RiSE > Site Builder > Manage websites > Look and feel tab) definition of the website.

Required elements of a custom theme

Theme CSS files

The theme CSS files control the styles (colors, fonts, headings, button styles, link styles, and so forth) displayed within your website. It is easiest to start from a copy of another theme’s CSS files, but you also have the option to build your own. When designing your custom CSS, test thoroughly to confirm you include the selectors required for iMIS to display as you prefer.

The required base style sheet, UltraWave, is dynamically included in any theme.

To learn more about CSS, visit www.w3schools.com.

A .skin file

Skin files contain property settings for controls such as buttons, labels, and grids. Each theme must have a skin file that includes several required elements so that these controls render correctly in your website.

We recommend that you start with a copy of an iMIS theme’s .skin files and customize as needed (to obtain a copy of the .skin file, you must download the theme). If you upgrade, you should compare your theme’s .skin files with those in a theme provided in the upgrade. Be sure to copy over any missing lines.

Required images

There are several images required for a theme to display properly, including images for icons, user messages, and other elements. Many of the required images are referenced in the .skin files. It is recommended that you copy an images folder from one of the existing themes into your custom theme folder. You can replace or edit any of these images.

Adding a thumbnail image

Associating a thumbnail with a custom theme is not required, but you have the option to do so. Once you select your theme in the Advanced section of the Look and feel tab, your thumbnail will appear in the Website theme section.

To associate a thumbnail with a theme, do the following:

1. Take a screenshot of your theme.
2. Name the image ThemeScreenshotSmall.png.
3. Include the image in the theme folder.

Note: The image must be in the theme folder before you zip the theme folder and upload it to iMIS.



Note: If no thumbnail is provided, a generic thumbnail image is displayed. We recommend resizing the screenshot to 300px by 200px, or 600 px by 400px.

Do the following to upload a custom theme:

1. Put all of the required theme elements in one folder, then zip that folder.

Note: All required elements must be at the root-level in the zipped folder.



2. From the Staff site, go to RiSE > Theme Builder > Themes.
3. Go to New > App Theme.



4. Enter the theme's Name. This automatically populates the Publish file name.
5. Choose the correlating Website template. See Creating RiSE-built website templates for more information.
6. By default, Theme is responsive is enabled. Disable the option if this theme is not responsive, or leave it enabled if it is responsive.
7. From Select file, choose the theme's zipped folder.



8. Click Save.
9. Click the uploaded theme, then click Publish.



10. Apply the theme to the appropriate website.

Custom themes must be edited in a text editor outside of iMIS. After changes are made, you must replace the existing theme located in iMIS with the updated theme.

Tip! When updating your custom theme files, it is recommended to not rename the .css file. Renaming the .css file will require you to upload a whole new theme instead of editing the existing theme.

Do the following to edit and update an existing theme:

1. Go to RiSE > Theme Builder > Themes.
2. Click the theme, then click Download.



3. The theme downloads to your computer as a zip file. Extract the zip folder's contents, then make the necessary updates.
4. Save the changes, then re-zip the folder.
5. Navigate back to iMIS, and go to RiSE > Theme Builder > Themes.
6. Click the theme, then click Edit.
7. From Upload new version, select the updated theme.
8. Click Save.

Do the following to apply a custom theme to a website:

1. Go to RiSE > Site Builder > Manage websites.
2. Select the website, then click the Look and feel tab.



3. From Website theme, select the custom theme.



4. Click Save.
5. Select the website, then click Publish.