![]()
Card Title
Descriptive text
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.
Caption text
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.
© Image Owner Caption Text
The "Size Rule" Exception
The only time where you might want to break the maximum 900px rule mentioned in the box on the Insert Images 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.
Caption
Yellow open large image message .
"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 panels'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 with [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, besides classes tags may also have an ID (id=" ") attached to them. Like a tag with a class one with an ID can also have special styling attached but an ID can only be used once on a page. That's because it can be used as an anchor a link, so the link doesn't just take you to the right page but to a specific point on the page.