An introduction to theming and web design practices in iMIS.

1. Crafting a visually
appealing website
with iMIS
By Andrea Robertson
and Melissa Burpo

2. 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

3. Creating the design

4. Choosing a color scheme
Created by Color Scheme Designer

5. Creating a mockup

6. Copy of the MBR site

7. The new site
redfroggroup.advsol.com/imis15/mbr

8. Working with CSS and browser
development tools
• Inspecting elements
• Changing styles on-the-fly
• Saving your changes to iMIS stylesheets

9. 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

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

11. 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

12. Adding JavaScript widgets to your site
• Finding JavaScript widgets
• Adding widgets to your website using either a
Content HTML iPart or the master page

13. 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

14. Resources
Reference 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

15. Website Screenshots