Creating Frames for images using CSS Classes
Image Border Class creation
img (this is the HTML tag for any image on your page)
img.border (Border is the class that will be attached to the image once selected from the style area in the CMS)
.border (is a class accociiated with any element not just images.)
Border Class Properties
The border-style property specifies what kind of border to display.
The border-color property is used to set the color of the border. The color can be set by:
You can also set the border color to "transparent". eg. border-color: #ff0000;
The border-width property is used to set the width of the border.
|background-color||Sets the background color within the box/borders eg. background-color: #ff000000;|
sets the amount of space between the image and the border
Padding is set in pixels ie padding: 4px;
|margin||Sets the distance outside the box/borders to the next object or text e.g. margin: 4px;|
Examples and Codes
Here is a small collection of examples to illustrate Frames and borders that can be applied to images through out your site. By using the Class Properties from above.
Please feel free to copy the code and adjust to your liking past it into your style sheet. and then the styles will be available from the styles drop down bocx in your content editor.