From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Crafting a visually appealing website with 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
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