The General Concept
If you have never written more than a personal two page letter in a word processor and expect to use that as your model for how to construct a web site of more than three or four pages, then you're likely to struggle when it comes to web design. However, if you have written a multi-chapter book or been required to submit a chapter to be incorporated into an organisation's annual report, then there's a chance you'll have encountered your word processor's "template" facility.
A word processor's template has two functions. It defines the various elements that will appear in the document and how they will appear. You may find samples for a letterhead, minutes, resumé, CV, business cards and more in your usual program. The equivalent in WonderCMS is a theme and each will be designed to help built a different kind of site, a blog, a site dedicated to your hobby or a local voluntary organisation to which you belong.
The Theme
Here we see a newly created WonderCMS site with the
"GregCustom" theme installed.
The great thing about a theme (or template) is that you don't need to remember how to match previous headings and the other elements of your content. Just mark it accordingly and the theme adjusts the appearance for you. There's no repeatedly dragging over your text to select it and clicking on toolbar buttons to get your content to adopt your house style and you're guaranteed that every similar element will appear the same elsewhere on your site.
There are two key files in a WonderCMS theme. The first is "theme.php", contols the general structure of the page, by which I mean, for example, whether each page has a distinct header area that brands the site as yours, whether the main site navigation menu runs vertically or horizontally, and whether it appears above or below the header, whether it has a footer or side-bar, intended to contain links to parts of your site that may be buried deep in the menu system. The second file is "style.css". This controls the appearance of the various elements that the theme is designed to contain.
Some Cautions
One trouble you may face is that the theme you pick does not include code for an element you want in your site. Unless you know the situation is unique and will not be repeated, it is best practice to edit the appropriate file in your chosen theme adding any new styling rules as necessary and that does require some knowledge of HTML There's a very basic description of HTML and CSS below and you'll see why, in my review of the Summernote editor, that I feel it really is worthwhile learning a little of CSS if you plan a site of more than a handful of pages.
Content
In a web site the content of each page is held in a separate file or as a single entry in a database. WonderCMS uses the latter approach. You may have scores or even hundreds of related pages to display that form the complete site. These files and entries contain plain text that have added "tags" that tell the browser which text is to be rendered as headings, paragraphs, list items, etc. Most of these tags come in opening and closing pairs that are often nested within each other.
It's stating the obvious that you cannot embed an image, video or audio file in a plain text file. Instead, you insert a tag into the file, that tells the browser the location of the file that holds such material. These various tags form the basis of HTML (HyperText Markup Language).
The snippet of HTML code you see in the illustration comes from that for the page illustrated above. It produces the text to appear within the light grey header area that will appear on every page of the site. The text "Website title" is tagged so it appears as a primary header (h1) and shall be given special emphasis (em). That text is followed by a line break (br). The text following the line break appears without any special treatment over and above that for a primary heading. What this code does not say is how primary headings should appear and what effect the special emphasis will have. There's a little more about HTML tags on the page describing the Default Editor.
Styling
By default, a browser will render a heading in larger type than other text and will appear in bolder type, have a wider following margin. But a site's styling rules can change browser defaults and in a site built withWonderCMS have it rendered in any way the theme's writer wishes.
Where HTML tags are nested styling rules that apply to an outer tag will normally be inherited by the inner tags, and are said to cascade. These styling instructions are written in a language known as CSS (Cascading StyleSheets).
The snippet of CSS code that you see in the illustration is that which determines how that HTML snippet above is rendered by the browser.
The first part determines the margins around three sides of any primary heading appearing within the header area of the page. The lack of definition for the fourth side means this item will inherit the setting from the tag surrounding it. In this case it is the styling for the surrounding header tag that sets background to a light grey and, on wide screens, sets the text to be right aligned. Here's the settings for the primary heading continue with the font to be used, with a generic alternative should, for some reason that font not be available, along with the size it should have. Padding is space to be allowed around the text but inside any border applied to this content. Margin is space between any border and neighbouring content.
The second part determines how the emphasised text should differ from the standard primary heading within the header. There's a different font, size and colour and, in this case, it won't be bold, as is the default for a heading, or other possible font effect. The colour is set to a variable, defined elsewhere, as red.
The GregCustom Theme
The stylesheet used on this site is part of the GregCustom theme. The definitions for all the colours appear in a list at the top of the stylesheet file, making it very easy to change the site's entire colour scheme. Illustrated above are two of the alternative colour schemes that appear in the theme's documentation, code that you can swap in to give the site dark blue, light blue and light green schemes, in some cases with images to use in the header that demonstrate what can be achieved. As you'll see on this site, on narrow windows or mobile devices the header changes to a left aligned format. Call it showing off, if you like!