Using sample themes and master pages

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

  • Never change the core style sheets 00-Reset.css and 10-UltraWave.css. All derivative themes inherit from these files, and any changes you make to them are lost on upgrade. Instead, override the base styles in your 99-[theme].css.
  • 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. See Copying a website 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.
  • 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.

    Install the Firebug add-on to see a wealth of information about the structure of the website and the styles it is using. Turn on the element inspector and click a piece of content to see the styling that it is implementing.

You can change the look and feel of the Quick Start Sites by selecting different combinations of a Master Page and its matching theme. If you want to modify a particular design for your website, make sure you create a copy of the master page and theme before making any changes. See Managing websites for more information.

Note: iMIS themes give you a head start on developing your website. To provide you an idea of how things could look, we have used numerous pictures, illustrations, and images that we purchased under a limited license for ASI's use. The icons can be used on your website, but if you reuse any of the other images, you will need to buy a license. We acquire the majority of our images from iStockPhoto and most are available in the range of $15-$50; much less than the cost and labor of creating them on your own. If you have any questions, please contact us.

Warning!  

If possible, avoid customizations to out-of-the-box themes or (master pages). If you do need to make changes, make the changes in a copy of the theme. Any customizations performed to the out-of-the-box files will be overwritten after an upgrade.

iMIS provides basic designs for iMIS Quick Start Sites. You can use these designs as starting points for customizing your Web sites.

This combination of master page and theme is used out-of-the-box and parts of it are responsive. RiSE, Continuum, and Manage communication templates were not designed to be responsive on mobile devices.

The set of city-named themes support RiSE sites and can be used interchangeably with the Cities master page.

The set of responsive city-named themes support RiSE sites and can be used interchangeably with the Cities_Responsive master page.

The set of tree-named themes support RiSE sites and can be used interchangeably with the Forest master page.

The set of planet-named themes support RiSE sites and can be used interchangeably with the Planets master page.

The Mountains master page was created specifically for staff functionality. It should not be used with member-facing websites.

The Sapling master page was created for mobile devices.

UltraWave and Universal Design

The Quick Start Site themes and master pages (see Using Quick Start Sites) build upon a new underlying template called UltraWave. UltraWave incorporates structure and styling for Universal Design. Universal Design seeks to make web content barrier-free, making sites accessible to all challenged users. Challenged users include not only the millions of physically or cognitively impaired, but also seniors, non-native speakers, and those in other countries and cultures (localization).

Universal Design has benefits beyond helping websites meet the myriad of web accessibility standards: it also aids in breaking technology and human barriers. Universal Design is the foundation for transforming pages and content into outputs and displays your members may need, including print presentation, net book usage, and even cell phone applications.

Features of the template include:

  • Developed toward W3C standards to help meet accessibility requirements
  • Clean, minimal design uses neutral shades and layout
  • Offers a streamlined set of stylesheets and skins
  • Easily customized with logos, fonts, and colors
  • Designed to be easily rebranded by your organization

Working with website themes

iMIS Member and Donor sites include a style guide that allows users with administrative privileges to see the impact of changes to site themes from one central location. Content editors are able to preview their site themes and changes. Theme designers who choose to dive deeper into stylesheets are able to see their work in a single central location. There is no longer a need to navigate to several different pages or content records to see the effects of customization.

The style guide displays the basic HTML elements in an attractive, easy to navigate manner. Content includes headings, paragraphs, links, images, lists, block quotes, user messages, and emphasis classes. This helpful guide is available at Manage > Style Guide > Base Elements.

Themes control the layout, font, and colors of your iMIS sites. The Quick Start Sites come with a set of themes designed for RiSE sites.

Creating a copy of a theme also ensures that you do not compromise your ability to access a working backup. Follow these steps to copy a theme, which is easier than creating a theme from scratch.

Note: Themes change and develop with every iMIS update. To avoid losing your changes, be sure to work from a copy of the theme.

  1. Copy an out-of-the-box theme and master page to be unique to your new site:
    1. Locate the theme folder (such as \Austin), which defaults to C:\Program Files (x86)\ASI\iMIS\Net\App_Themes.
    2. Copy, paste, and rename \Cities to your new site name, for example, \ABC.
    3. Locate the master page (such as Cities.master), which defaults to C:\Program Files (x86)\ASI\iMIS\Net\Templates\MasterPages.
    4. Copy, paste, and rename Cities.master to your new site name, for example, ABC.master.
  2. Go to RiSE > Site Builder > Manage websites.
  3. Edit your site to use your new theme files:
    1. Highlight your site (ABC).
    2. Edit the Site Look and feel to point to your new theme files:
      • MasterPage/Template: select ABC
      • Theme: select ABC.
    3. Click Save and Publish.

The first elements to change on your website are the highly visible elements that public visitors see and use in the header: logo, social networking links, welcome banner, and the favicon.

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 HTML Content Item, and replace with your own logo.

Note: Alternatively, you can change the logo in the CSS. The logo is set in 99-[theme].css by the selector #masterHeaderImage. Change the background image and the dimensions to match your own logo.

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.

Example:  

<a href="http://www.facebook.com/geointernational" target="_new"> <img id="FacebookLogo" style="border-width: 0px;" alt="Visit our Facebook page" src="[Theme]/images/facebook.png" /> </a>

The favicon is the little icon that displays next to the website in your bookmarks and on the browser tab in modern browsers. Changing it to your organizations’ icon is simple: create an icon sized either 32x32 or 64x64 pixels and name it Favicon.ico. Then overwrite the original file C:\Program Files (x86)\ASI\iMIS\Net\Favicon.ico.

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.

The next step in customizing your theme is to change to colors that support your branding and style. You will make these changes in both CSS and in images.

All theme-specific color and styling is located in 99-[theme].css. To find all color references that you might want to change, search the CSS file for these strings:

  • color
  • border
  • background

We also recommend using your browser development tools to help you identify which styles you need to update for your color changes.

A few of the theme’s use sprites to control some of the site colors. A sprite is a single image that combines several commonly used images into one file. CSS then defines which part of the image displays for various purposes. Because your server only has to load a single image instead of several, using sprites reduces load time for your website. To improve performance, the new Quick Start Sites use sprites when possible. The image below shows a sprite used in the theme Aspen, and labels where each image is used.

You can either edit the sprite provided (which is easier), or create your own:

  • When editing the provided sprite, keep all elements in their original pixel coordinates, so that you do not have to edit the related CSS.
  • The .png version of the sprite is located in images/[theme]_sprite.png. You can edit this image in your favorite image editor, but we do not recommend editing in MS Paint, as you will lose the background transparency.
  • Your theme’s \Resource folder also includes a .psd source file of each sprite. You can edit the .psd with Photoshop or GIMP, a free image editor that can edit and save images in .psd and Web-safe formats.
  • If you edit the .psd, save your new image as a .png, and place it in the images folder of your theme.

For greater design control, you also have the option of creating your own sprite. If you choose that option, you may also need to update your theme CSS for the new coordinates of the sprite. To help you with this process, we recommend the following resources:

  • Sprite Cow calculates the pixel positions of the various images inside your sprite.
  • CSS Sprite Generator lets you upload a zip file of images and get back a sprite file with the corresponding CSS.

The Member site uses a pair of home pages: one that appears to guests (unauthenticated view) and another that appears to those who have signed in (authenticated view). You can change one or both of them, or drop one entirely and have one home page appear to all.

  1. Go to RiSE > Page Builder > Manage content.
  2. Create a new content record for your unauthenticated home page.
  3. Copy the AuthScript code to your new home page:
    • Edit the unauthenticated home page content record @\iSamples\Member\Home.
    • Locate the HTML content item named AuthScript.
    • Select Move To and select your unauthenticated home page.
    • Edit your unauthenticated home page and move the AuthScript content item to the top of the content record.
    • Save and Publish your home page.
  4. Make your site’s home page link to your new home page.
    • Go to Site Builder > Manage sitemaps.
    • Select your website.
    • Edit the default navigation item (flagged with a golden star) and select your new home page for Content or URL to Link to.
    • Save and Publish your sitemap.

    Note: To have your own home page behave like the default home page (switch to the authenticated home page when the user signs in), you need to add the code-bearing HTML content item.

  1. Go to RiSE > Page Builder > Manage content.
  2. Edit your unauthenticated home page content record.
  3. Locate the HTML content item named AuthScript.
  4. Select Configure and switch the editor’s view from Design to HTML, to view the code.
  5. Edit the path to be the published path of your new authenticated home page:

    6. path = "~/Mbr/Home/[theme]/MemberHome.aspx";

    You can drop to a single home page. Do either of the following to use only one home page:

    • Remove the script that opens the authenticated home page. Go to Page Builder > Manage content and Edit the unauthenticated home page @\[site]\Home, then delete the HTML content item named AuthScript.
    • Substitute your own page entirely. Go to Site Builder > Manage sitemaps and set your desired content record to be the default home page of your website.

Note: To have your own authenticated home page appear as soon as the user signs in, you need to edit the code-bearing HTML content item that calls it.

iMIS provides various master pages that help control the layout of a website. The Cities and Cities_Responsive master pages include a home page area with a banner stretched across the width of the home page.

If you are using the Cities or Cities_Responsive master page, you can copy and modify the Home Page Full Width Area content record to include your organization's unique image and content.

The Member demo website is used as an example in these instructions.

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

  1. From the Staff site, go to RiSE > Page Builder > Manage content.
  2. Copy or modify the Home Page Width Area content record. Do one of the following:
    • Copy the content record located at @/iSamples/Member/ContentAreas/Home_Page_Full_Width_Area, and paste the content record to your website's Content Areas folder.
    • Locate the Home Page Full Width Area content record if you using an iMIS-copied Quick Start Site (@/website/ ContentAreas/Home_Page_Full_Width_Area).
  3. Select the content record and click Edit.
  4. Select Configure on the Slideshow content item.
  5. Make the desired changes. For more information about the Slideshow content item, see Slideshow.
  6. Click Save & Publish. Publishing time may vary depending on the number of slides in the content item.

Note: Choose an image that looks great at very wide resolutions, as the image will always stretch the full width of the browser. For best results, use landscape-sized images 1000-1400 pixels wide.