Additional styling for the SoSLUG theme

Templates add a consistency of style to web pages via styles sheets. For example by adding a class rule. to a <p> tag, i.e. <p class = 'justify- right' > text can be justified right simply and without specific knowledge of CSS style rules.
The second section shows how, notes warnings and updates can be added to enhance the look of a document, again simply by adding a class rule.

Similarly Javascript can add additional functionality to a page e.g. by automatically adding a Table of Contents (TOC), or to display selected answers on a FAQ page.

Additional theme specific styles - text justification

By adding specific (CSS) classes to the HTML <p> ... </p> tags, allows you to modify the default layout. The following classes enable you to justify a paragraph to the right, center, or justify both left and right margins.
Add the class definition only to the opening tag.

By wrapping the code generated for images, with <p> ... </p> tags, means you can justify these as well

<p class="justify-right" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="justify-center" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

<p class="justify" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Adding notes, warnings and updates

You may want to highlight special notes, warnings or even update the original text. To do this add the chosen class to the <p> ... </p> tags as follows.

<p class="note" >This is a special note to the reader</p>

<p class="warn" >This is a warning to the reader</p>

<p class="update" >This is an update, maybe to a previous paragraph. The style rules have been modified so that the width of boxes are now the same, and take into account the format of a printed page.</p>

Maybe you just want to highlight some text by putting a border around it then add the class="border" to the <p> ... </p> tags

<p class="border" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Lastly style rules can be combined, as the following examples show, though you may have to be a little careful which rules you combine, and in which order! As subsequent rules will override any previous corresponding rules.

<p class="update border" > The rules used here by the associated stylesheet have been tweaked, so at the time of writing, are slightly different to those currently used by SoSLUG. Compare this box with the previous update box for example. </p>

<p class="border justify" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Additional javascript functionality

Creating a Table of Contents (TOC) may be a daunting task for a novice, however by following some simple rules, Javascript can be used to automate this task, and so enable a novice to make use of more sophisticated techniques.

1. First decide which tag you want to index. This may be an h2, h3 or h4 tag, and obviously your page should have one or more of these tags.
2. Each of the selected tags must then be wrapped within its own set of div tags which are numbered consecutively with an id = 'tcnn' where nn is a number. In this example h3 tags have been used (which is also the default). This in effect divides your page into sections.

    <div id="tc1" >
    <h3>first title>
    <'!-- content goes here -->
    </div>
    
    <div id="tc2" >
    <h3>next title>
    <'!-- more content here, and so on. 
    If setting up an FAQ page, then the div tags 
    will also enclose the answer to each question. -->
    </div>

3. Lastly and the very bottom of the web page add the following script tags exactly as shown.
   <script>toc('h3');</script>. if 'h3' is note your chosen tag, then replace it with your chosen tag, either 'h2', or 'h4'.
   

That's all there is to it. Javscript will do the rest. If you haven't already guessed, the TOC for this web page was created automatically,

If you are adding a page to SoSLUG that requires a TOC to be generated automatically, then unless you have the privileges to do so, this will not work. When you submit the page for the first time, you will need to request this functionality be added.

Creating a FAQ page

In the same way that a TOC can be created automatically, so to can a FAQ page, to give them a similar look and feel. In this case the chosen tag will be the header for each question. An FAQ page has been created to compliment these notes, and to demonstrate the format that is used.

The procedure is really no different to setting up a TOC except that this time the code at the end of your web page must include two additional function calls.

    <script>toc('h3');faq('tc1');</script>

Normally the question you specify here will be the first question of the list, however it doesn't have to be. Any question can be used. Only the question selected will be shown, all others will be hidden. To prevent the need for excessive scrolling you should aim to keep the number of questions to about 10, so the the TOC remains visible.