WiscWeb CMS - Understanding Formatting in the CMS
This document shows how to Understanding Formatting in the CMS.
WiscWeb CMS - Understanding Formatting in the CMS
Understanding Formatting in the CMS
What follows is a very basic overview of the the html elements you can affect with a stylesheet and from within the CMS Text Editor. This KB document cannot be a complete stylesheet primer and need not be one. There are many already existing (a particularly good one, and free, is w3schools.com).
A stylesheet is fundamentally a document that a web browser uses, in conjunction with an html document, to render a web page. Text (called markup) is added to the html that references parts of the stylesheet and the web browser's rendering engine uses them to style the text. This works, believe it or not, exactly how many word processors used to work (excluding, notably, Microsoft Word). It is intuitive that if you want a word to be bold that you put something at the beginning of the word that says, "Start bold here." and then something after the word that says, "Stop bold here." (This is not at all how Microsoft Word works, by the way.). This is where the terms "mark up" come from--text is marked-up to indicate the text's structure and formatting.
This begin-style and end-style is how html and stylesheets work. If you hand-code html in a text editor, one way to make a word bold you would start bold with <strong> and end bold with </strong>. The CMS system hides all this from you, but this is exactly what it does. When you click on the various buttons of the Text Editor what you are actually doing is telling the CMS system to apply markup to your text.
You can see it, too, in the Text Editor by clicking on the Source Code mode button at the bottom of the window, which will shift the view in the editor to display the raw html where you can see the affect of using the Bold button. In fact, you are encouraged to create a Text Area, which you an easily delete of course, and type in a bit of text then use the Toolbar to style the text. Afterward, click on the Source Code mode button and look at the text. You can see the beginning markup always in angle brackets, and the ending markup also in angle brackets but with a / at the beginning of the markup code.
One reason that using the Paste functions can be bad is that several of them paste markup along with the text--markup that you have not specifically chosen. Pasted-markup could conflict, or override, your site's existing stylesheets. This is possible because stylesheets are hierarchical with local style settings (that might be put in with the text you paste) having precidence over containing styles (think nested Russian dolls--each can have its own dress style and color).
A site's structure is largly controlled by the CMS and its Content Classes which you use to create toolbar items, left side or right side elements, etc., which is a significant advantage of using a system like the CMS. But there is large-scale structure, which was just mentioned, and local structure (think headings, lists, and the like) within content classes (e.g., a Text Area). The kinds of elements most of us work with in the CMS are textual rather than structural.
What are these textual elements?
- Fonts and their display
- Headings (technically structural, but often as not used for styling)
The remainder of this KB doc discusses each of these textual elements.
Fonts and their display
Here is the header of the WiscWebCMS Standard Template:
You can see that there are three elements in play: color, fonts, and space. Each of these interact in visual design. If you are creating the html/css yourself you use html and stylesheets to set all of these elements because html and css work in tandem to control the three elements. In the CMS system content classes and stylesheets are used to control these three elements. The Standard Template stylesheet, as you can see, takes a great many decisions out of your hands with respect to styling (which, for many, is a welcome relief to be sure). If you want to control these elements yourself, you will need to craft a stylesheet which will be used to determine how similar elements in your site look. This is something you would do in consultation with the WiscWebCMS developers (to ensure it will all work with the CMS system so your site looks like you want it to look).
In the image above note the seven arrows pointing to the seven different fonts used for the Standard Template and content classes shown. Fonts can have a great affect on a site's design. CSS stylesheets can be used to specify all of the components of text use on a site and in this example there will be sections of the Standard Template stylesheet that specifically defines the font attributes for each of the places where fonts are used.
Generally you do not want to do anything that affects these larger content areas. But you can use the various options in the Text Editor to modify how fonts in your text areas are displayed. What are the things you can affect? The list below will reference the seven fonts in the example above.
- Font Family - Whether the font is a serif font (1. 3. 4. in the example) or sans-serif (2. 5. 6. 7. in the example). Font families are of many, many varieties. Usually for web site work they are limited to "web safe" fonts (see. CSS Web Safe Font Combinations), so called because most operating systems now have these "core" fonts, or similar, installed for use by web browsers. Font Family also covers the differences between fonts of serif or sans-serif families (e.g., the difference between Arial and Helvitica fonts). It is common in stylesheets to specify a Font Family from specific to general (e.g., Hevitica is a specific name while using just 'sans-serif' is a general name, which can set by a user themselves in their web-brower's preferences).
- Font Style - Whether a font is shown as normal, italic, or oblique.
- Font Size - How big or small a font is, obviously, which can be specified in many different ways (pixels, ems, etc. -- pixels is the measure used in the CMS Text Edtior). In the example it's obvious that size is an important part of the design.
- Font Weight - Whether a font is normal, thinner, or heavier in appearance; that is normal, bold, or light. Note in the screenshot the heading for the Text Area is bolded (number 6.) while the text in the Text Area is normal (number 7.).
There are ways in the Text Editor to play with all of these for just the text being entered in the Text Editor whereever the Text Editor is available. The Bold button affects the Font Weight (either normal or bold). The Italics button affect the Font Style (normal or italic).
The Font Name drop down menu affects the Font Family. You really should avoid using this menu since your web site's stylesheet has probably already specified the kind of Font Family that should be used in the various areas of your web site (just like, for example, numbers 6. and 7. in the Standard Template image above, which is text in a Text Area content class using a sans-serif Font-Family named, most likely, "Lucida Sans Unicode"). There are a few added items on the Style menu to help with some situations where the default styling is problematic.
The Font Size dropdown menu lets you modify the font size. Normally you might use sizing to draw attention to a line or create a section heading. There is a commonly used way to do this using html headings (see that section below).
Headings (technically structural, but often as not used for styling)
Headings are not, really, supposed to be used for font sizing. They are meant as structural designations, in the sense of "section headings" or "chapter headings". Again, your site's stylesheets will almost surely have styled all five of the normal headings. To get a sense of a heading you only need look immediately above this paragraph. That is a "Level 4" (i.e., an H4) heading. This KB document has some Level 3 headings at the top. Some of the KB docs use other headings.
You should think of headings as something like the nodes of an outline with Heading 1 being the title, Heading 2 the next level of branches (e.g., chapters in a book), Level 3 being sub-branches off of Level 2 (e.g., sections in each chapter), etc. At the Text Editor level you can specify local headings using the Style drop-down menu:
This Style drop down menu has a few items on it that are not Headings, but which are very useful. For example, if you wanted to add a name with address information in some Text Area, as you type each line and press Return for the next line, by default (that, is, according to the way that the paragraph is styled) the Text Editor thinks you are creating new paragraphs. On the Style drop down menu is an item called Address. Type your address, select it, then click on the Style drop down menu and select Address. You should see the address reformatted without the extra spaces and italicized. You do not need to use this for lists as the Text Editor toolbar has buttons for both ordered (sequenced) and unordered (bulleted) lists which you should use for that purpose.
What if you want to display preformatted text, computer programming code, text that needs to retain character spacing, display unformatted characters, keep inherent line breaks, and so on (think poetry!)? The Style menu has an item for these kinds of uses called Formatted. Note a quirk of the Text Editor should you need to use Formatted. You cannot first type all of the text you want to format with this option, select it, then use the Style menu to select this option as in the address example in the previous paragraph. The Text Editor will add the paragraph spacing after every Return you enter and selecting Formatted will not remove them. To get this to work as it should:
- Type just the very first line for which you want to use Formatted styling.
- Select it.
- Apply Formatted style.
- Move your cursor to the end of that line.
- Press Return and continue with the remaining text.
- When you get to the end of it, press Return two times.
- Type one character.
- Select it.
- From the Style menu select Normal to shift back to the default paragraph formatting.
If you want to emphasize text by changings its size, the better way is to use the Font Size dropdown mentioned above.