Adding a Class to a Tag

A theme can include code that will give a tag styling that's different to that normally seen. You assign that special styling to the content of a tag by adding a class=" " attribute to the tag and entering a particular name within the quotes, thus specifying that the tag is of a certain class.

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 home page of a newly installed WonderCMS site includes such a link with that class that makes "Click here to Login" appear as such a button. The GregCustom theme does not include such a class and what was a button under the Sky theme becomes ordinary link text under the GregCustom theme.

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.

Side by Side Images

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.

Image Accreditation

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.

"Cards"

Cards is my own term for a styling feature seen, for example, on the Sundry page. There you will find a set of panels with rounded corners and a slightly darker background colour than normal for the site. The panels include a small thumbnail image (200px x 150px). Both the Image and the panel's title act as a link to another page. The panel feature was developed before I had got the site's multi-level menu system working as I wanted and is probably best thought of as acting as an exotic form of menu that trails what is on the page better than any single word.

A set of cards should be placed within [section] tags with the "cards" class. Each card is then held within [article] tags. As you see from the snippet below, the card title is held within [h3] tags with the image inserted before the title text. My practice is to make the descriptive text fully fill the space to the right of the image when the full page width is visible.

I feel the structure works best when the items under the top level menu option are particularly diverse, but would also work to contain a journal entry summary on a site holding a blog.

IDs

One more special case worth mentioning, is that tags may also have an ID (id=" ") attached to them. Like a class, a tag with an ID can have special styling set for it but an ID can only be used once on a page. That's because its primary purpose is to be the target of an anchor, a link, so the link doesn't just take you to the right page but to a specific point on that page.

There are a number of examples on this site. The link to the Winterton Walk seen in the paragraph above is one example, it takes you to the "Across the Dunes" heading within the page, as does "paragraph above" which take you to that paragraph.