Below are some of the style and display options for images as well as an explanation of when you would use each one.
For more information on how to apply these styles to your images, see the images how-to page in the training section of this site. For examples of how they will look on your own pages, please visit the Layouts & Style Guides section.
|"Photo" Style||Lightbox Style
(click on the image)
|1 pixel border||Plain|
- "Photo" Style - For most of the images in the main body of your pages you should use the "photo" style to create consistency between all the pages of the Colorado College website and to give your content a more polished look. Adding the "photo" style when you insert an image into your page will give the image a 3D effect by adding a drop shadow. It also makes the image look more like a physical photograph because it adds a small white frame around it.
- Lightbox Style - This style is very cool and slightly more complicated. It will almost always be combined with the "photo" style and can be used on practically any image that you include in the body of your webpages. When the "lightbox" style is applied to an image, the image becomes clickable. When the image is clicked on, a pop-up layer with a larger image and a caption is displayed over the rest of the webpage to show more detail.
- 1 pixel border - A border can be added to images to give the edge more definition where appropriate. For instance, in the images above you will notice that the ballerina is on a white background, so the white border created around the image by the "photo" style is not noticeable. Combining the "photo" style and a thin border gives the image a more appealing look.
- Plain - Leaving an image completely unstyled is typically not a good idea. It looks rather flat and uninteresting. The feel of the plain images conflicts with that of the other photos across the Colorado College site as well as the feel of the overall design.