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 Embelish Text
There are a couple of classes built into the GregCustom theme that change the way a tag is displayed. The two simplest are described below.
A Separator
Originally intended to be used with a [p] tag to create a space for a footnote, as seen at the bottom of this page, it is now used in various places across the site. You'll see an example attached to both [h2] and [p] tags on the Blockade page, where the re-print of a magazine article starts and above a footnote. It can be used with any tag. Just add the attribute:
As you see, it simply adds a thin line above any tag to which the class is added.
A Warning
Originally created for an isolated case, seen on the Sundry page, where there's a link that takes you to an external site. However, it seemed worthwhile as others might have text that needed special emphasis. It can be used with any tag. Just add the attribute:
As you see, in the default colour scheme, it just renders the text in red. In the other colour schemes it should appear in a unique, suitably contrasting, colour to the norm.
Classes that create Special Structures
"Box-outs"
Frequently used in magazines to hold a "pull-quote" or other background or supporting information in an article. The code to provide them in the GregCustom theme is simple enough:
There is styling code included in the theme to handle various kinds of content including [h2] and [h3] headings, [p] paragraphs and all three types of list ([ol], [ul] and [dl]) which slightly adjust the size of margins and indentation seen when used outside a box-out. On wide screens and windows a box-out will be right aligned and occupy about half the available space. On narrow windows and mobile devices the box-out will display full width. You can force a box-out to occupy the full width on all widths of window/screen by using class="boxoutwide" instead.
You can find examples of box-outs at the top of this page and on the Game of Nations, Media Tags and Site Search pages.
"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.
Related pages: Introduction, Basic Tags, More Text Tags, Media Tags and Special Cases.