Using out-of-the-box themes

You can change the look and feel of the Quick Start Sites by selecting a different Website theme. Each out-of-the-box website theme is automatically paired with a website template. Selecting a new out-of-the-box theme automatically selects the correct correlating template. If you want to modify a particular design for your website, make sure you create a copy of the Website theme before making any changes.

Staff site themes

These website themes were created specifically for staff site functionality, and should not be used with member-facing websites:

Orion

Orion is the website theme applied to your out-of-the-box Staff site. Although Orion is a responsive Staff site theme, RiSE, Reports, and Manage communication templates were not designed to be responsive on mobile devices. The template used with this website theme is Constellations.

The navigation for Orion is collapsible, allowing staff users to utilize the horizontal space of the screen. When collapsed, staff users can hover over the navigation icons to continue navigating through the Staff site. Clicking the navigation toggle (hamburger icon) keeps the navigation expanded, while clicking the arrow icon keeps the navigation collapsed. The navigation toggle is the only available option when the screen resolution is 992px or less.

The navigation setting (expanded or collapsed) is saved in the browser's local storage (localStorage), so until the cache is cleared, the staff user's selection of either expanded or collapsed is remembered each time they log out/in from the Staff site.

The Orion sitemap navigation icons are powered through out-of-the-box CSS classes. Review the following chart to see the available icons.

Use any of the above icons in the top-level navigation by updating the CSS class:

1. Go to RiSE > Site Builder > Manage sitemaps.

2. Choose Staff from the drop-down.

3. Select the navigation item.

4. (Properties tab) Update the CSS class field to contain the desired CSS class.

   

5. Click Save.

6. Click Publish.

Public-facing site themes

The following themes were designed to be implemented on public-facing sites. For example, a member or donor site. The responsive themes were built to work best with responsive websites, such as the Member Responsive Quick Start Site. The themes without Responsive in the title were not built to be responsive.

Responsive themes

Austin Responsive

Similar to the look and feel of the Austin theme, Austin Responsive is visually appealing on mobile, and other hand-held devices. This website theme uses the Cities Responsive template.

Austin Mobile

This theme home page looks the same whether a member is logged in or not. The template used with this theme is Sapling.

Flat White

This website theme uses the Coffee template.

Flat White features a clean, toned-down style, providing a contemporary and professional appearance. Some of the home page content is animated, such as the top navigation fading in or the cards flipping as you scroll down the homepage.

This theme comes with a JavaScript library called AOS.js (animate-on-scroll), which allows the page elements to be animated. You can apply the animated attributes to any page layout to add additional animation. The animated attributes utilized in the Flat White theme can be found in the Coffee website layout (RiSE > Theme Builder > Website layouts). To learn more about the different animation attributes available, see the Animate on Scroll Library.

Download the theme files to begin customizing the Flat White theme for your organization.

Glacier Bay Responsive

This website uses the WST-NaturalHeritageSitesResponsive template.

Great Barrier Reef Responsive

This website uses the WST-NaturalHeritageSitesResponsive template.

London Responsive

This website theme uses the Cities Responsive template.

Mocha

This website theme uses the Coffee template.

The Mocha theme contains bright colors, organic shapes, and hand-drawn icons. Some of the page's content is animated, such as the top navigation fading in or the cards flipping as you scroll down the homepage.

This theme comes with a JavaScript library called AOS.js (animate-on-scroll), which allows the page elements to be animated. You can apply the animated attributes to any page layout to add additional animation. The animated attributes utilized in the Mocha theme can be found in the Coffee website layout (RiSE > Theme Builder > Website layouts). To learn more about the different animation attributes available, see the Animate on Scroll Library.

Download the theme files to begin customizing the Mocha theme for your organization.

Toronto Responsive

This website theme uses the Cities Responsive template.

Non-responsive

Austin

Although not a responsive theme, this Austin theme has a responsive counterpart, Austin Responsive. This website theme uses the Cities template.

Changing banner images in sample content

iMIS provides various templates that help control the layout of a website. For example, the Great Barrier Reef Responsive and Glacier Bay Responsive templates include a home page area with a banner stretched across the width of the home page.

If you are using either of these templates, you can copy and modify the Home Page Full Width Area content record to include your organization's unique image and content.

Adding a homepage banner

Do the following to add a banner to your home page:

1. From the Staff site, go to RiSE > Page Builder > Manage content.

2. Do one of the following:

   • Create the home page using copied sample content:

     1. Navigate to @/iSamples/MemberR/ContentAreas.

        

     2. Select Organize > Copy to copy the Home Page Full Width Area content record.

     3. Select Organize > Paste to paste the content record to your website's Content Areas folder.

   • Update an existing home page. Locate the Home Page Full Width Area content record if you are already using a copy of an iMIS Quick Start Site (for example, @/yourwebsite/ContentAreas/Home_Page_Full_Width_Area).

3. Select the copied content record and click Edit.

4. Locate the Slideshow, then select Configure.

   

5. Select a new Image, and make any other desired changes to the Slideshow.

6. Click Save & Publish. Publishing time can vary depending on the number of slides in the content item.

iMIS sites use various styling elements to create visually appealing websites; part of this process includes using background images. Background images can be changed by using inline styling on the div that correlates to the area that contains the background image.

For example, in the Donor sample site there is content on the home page with animal pictures in the background. You could change the picture by applying a background-image style to the div:

<a href="[website]Get_Involved_/Volunteer/iSamples/Donor/Get_Involved_/Volunteer.aspx" 
class="feature-link-with-image feature-link-1" 
**style="background-image:url('http://www.mywebsite.com/images/my-background-image.jpg')"**>

Updating homepage background banners

There are also background images on the home page of the Member Responsive site when using the GreatBarrierReef_Responsive theme. Do the following to edit these images:

1. Navigate to RiSE > Page Builder > Manage layouts.

2. Make a copy of the Three33-33-33OverOne-FullWidth layout and open your copy.

3. (Code tab) In the Layout code area, change the background image using inline styling on the FullWidthArea div you want to change, for example:

   <div class="FullWidthArea-StyleBg2" 
   **style="background-image:url('http://www.mywebsite.com/images/my-background-image.jpg')"**>

   📘

   Note

   Make sure there are no spaces in your image path. This can prevent the image from being displayed.

4. Click Save.

5. Update the home page of the Member Responsive site to use your modified copy of the Three33-33-33OverOne-FullWidth layout.

Changing the logo, social media links, and copyright statement

The first elements to change on your website are the highly visible elements that public visitors see and use in the header: logo, social media links, and copyright statement.

Logo

The header logo is contained in a content record: @[theme]\ContentAreas\Header Logo. To add your own logo, edit this content record, remove the contents in the Content Html content item, and replace with your own logo.

The dimensions in pixels for the out-of-the-box themes are as follows:

• Aspen:
  • HeaderLogo - 511 x 55
  • HomeBanner - 1400 x 359
• Aspen2:
  • HeaderLogo - 491 x 55
  • HomeBanner - 1400 x 359
• Birch:
  • HeaderBackground - 1400 x 150
  • HeaderLogo - 482 x 55
  • HomeBanner - 1400 x 424
• Glacier Bay_Responsive
  • HeaderLogo - 120 x46
• Great Barrier Reef_responsive
  • HeaderLogo - 120 x 46
• Mercury:
  • HeaderLogo - 471 x 59
  • HomeBanner - 1003 x 320
• Venus:
  • HeaderLogo - 458 x 56
  • HomeBanner - 1003 x 320
• Mars:
  • HeaderLogo - 482 x 55
• Austin, Austin_Mobile, Austin_Responsive, London_Responsive:
  • HeaderLogo - 122 x 38
• Toronto_Responsive:
  • HeaderLogo - 168 x 46
• Aspen_Mobile:
  • HeaderLogo - 100 x 38
• Everest, Orion - Changing the logo on these themes is currently not supported.

The HomeBanner will resize to fit the space, but the width should be at least 1000 px. If you are using the Slideshow content item, the height should be the same as the Height (px) configured in the content item.

Social media links

The links to the social networking sites in the top (auxiliary) navigation are also defined in a content record: @[theme]\ContentAreas\Social Networking Images.

To change the links to navigate to your own social networking pages, edit the content record and change the links on the icons.

In the HTML editor, replace the href on each <a> tag with the appropriate URL.

Copyright statement

The copyright statement is contained in a content record within your copied site's ContentAreas folder: Footer Copyright. Edit the Footer Copyright instance of the Content Html content item on that page to update the copyright.