Adding a Class to a Tag
A theme can include code that will give a tag styling that's different to the default for the theme. You assign that special styling to a tag by adding a class=" " attribute to it and entering a name for that class within quotes. Class names are specific to a theme and may have a different or no effect, if used with a different theme.
Example: The "Sky" theme includes a class "button" that makes the text contained within an [a] tag appear as a large white rounded-corner button. The text on the home page of a newly installed WonderCMS site includes a link with that class that makes the text "Click here to Login" appear as such a button. The GregCustom theme does not include that class and the white button that appears under the Sky theme becomes ordinary link text under the GregCustom theme.
Classes to refine the Display of Images
Align an Image Left or Right
Here's an example that works in the GregCustom theme. Without class="right" the image would fill the entire width of the page as normal. With it, the image aligns to the right and occupies only half the width of the page (unless the window is exceptionally narrow or the page is viewed on a phone screen in portrait orientation).
As you might guess, also available is a class="left" attribute that will align an image to the left.
Give an Image a Caption
Another set of classes related to images are "caption", "captionleft" and "captionright". However, they must be applied to a [p] tag. They are designed to allow a caption to be placed under an image when full width or aligned to left or right. The code takes the form below and you can see a version used near the top of the Web Design page.
Placing Image Side by Side
At the bottom of the same page a pair of images are displayed side by side on a wide screen. The code to produce this effect is:
On narrow screens the images are displayed one above each other, with the first specified above the second. The structure can also be used to contain images with a "caption". Do not use "captionleft" or "captionright". You'll find examples of that on the site's Canalside Cottages page.
Crediting Images
The Canalside Cottages page also includes images with an accreditation with a link to the source. You'll see that involves the use of a "span class="credit" " tag. This makes the text right aligned and a little smaller than any caption text. In this structure caption text is optional.
The "Size Rule" Exception
The only time where you might want to break the maximum 900px rule mentioned in the box on the Media page is when the visitor is expected to want to examine a small part of the image. There are a number of such images on the Winterton Walk page, where the visitor is encouraged to read the text on a notice board. The technique involves a small (900px) image being used to link to a larger version of the same image.
The code I used includes line break [br] and [span] tags. The break tag forces any following content onto a new line. The span tag allows you to give a special effect to text within the caption paragraph. In this case the class="message" attribute will give it the same colour as any accreditation text.
Related pages: Introduction, Basic Tags, More Text Tags, Added Classes and Media Tags.