Crafting a visually appealing website

with iMIS

By Andrea Robertson

and Melissa Burpo

Overview

• Creating the design

• Working with CSS and browser development tools

• Changing the master page layout

• Creating custom content layouts

• Styling Telerik controls

• Adding JavaScript widgets to your site

• Working with Sprites

Creating the design

Choosing a color scheme

Created by Color Scheme Designer

Creating a mockup

Copy of the MBR site

The new site

redfroggroup.advsol.com/imis15/mbr

Working with CSS and browser development tools

• Inspecting elements

• Changing styles on-the-fly

• Saving your changes to iMIS stylesheets

Changing the master page layout

• Moving items within the master page

• Editing the 01-MasterPage.css file

• Content Areas:

– Adding the content area and ContentTemplateArea to the master page

– Creating the content record

Creating custom content layouts

• Creating content layouts that you can use throughout your iMIS site

Styling Telerik controls

• Finding available Telerik skins in the demo site

• Generating stylesheets and images with the Visual Style Builder

• Creating your own styles for Telerik controls

Adding JavaScript widgets to your site

• Finding JavaScript widgets

• Adding widgets to your website using either a Content HTML iPart or the master page

Working with sprites

• Increasing performance by using sprites

• Creating a sprite as a single image

• Using Sprite Cow to generate the CSS

• Using sprites for hover effects

ResourcesReference sites• w3schools.com• Telerik Control Guide• CSS3.info• CSS Sprites: What They Are, Why They’re Cool,

and How To Use Them

Tools• Sprite Cow• CSS3 Generator• Telerik Visual Style Builder• Telerik Demo site• GIMP• Google web fonts

Colors• Color Scheme Designer• COLOURlovers

Widgets and Plugins • Facebook Plugins• LinkedIn Plugins• Twitter Widgets• Flickr Badge• Meetup Widgets

iMIS Community posts• Creating a unique homepage with CSS and

Javascript• Styling your website's primary navigation• Developer style guide

Website Screenshots