Frequently Asked Questions (FAQ's) about SoSLUG content layout
The answers to the questions below relate to functionality that has been built into the SoSLUG theme, either in the form of CSS rules, or with the aid Javascript. The aim is to make it easier for novice users to layout content
How do I centre, justify, or right justify text?
Simply add a class rule to the paragraph <p> ,or <div> tag if you want one than one consecutive paragraph reformatted. E.g
<p class="justify"> <p class="justify-right"> <p class="justify-center">
How do I add notes, warnings or updates to a web page?
Add a class rule to the paragraph <p> ,or <div> tag if you want one than one consecutive paragraph included.
<p class="note"> <p class="warn"> <p class="update">
I want highlight some text by changing the background colour?
Simply add the following class rule to either the paragraph or div tag, if you want more than one paragraph highlighted
<p class="border">
How do I create a Table of Contents (TOC)?
This can be done automatically by using Javascript, and following some simple layout rules. However the procedure outlined below assumes this functionality has been built into your page template.
- 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.
- 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.
- Lastly and the very bottom of the web page add the following script tags exactly as shown.
<script>toc('h4');</script>. if 'h4' is not the tag used for each question, then replace it with your chosen tag, either 'h2', or 'h3'.
<div id="tc1" >
<h4>first question<h4>
<'!-- put answer content here -->
</div>
<div id="tc2" >
<h4>next question<h4>
<'!-- put answer here, and so on. The div tags
must also enclose the answer to each question. -->
</div>
Help! more than one question is being displayed
You have forgotten to close one of the div tags, belonging to the first question being displayed.
How do I set up a page of Frequently Asked Questions (FAQ's)
This procedure is similar to the setting up of a TOC. In fact the TOC becomes the list of questions. Simply add the following script at the very bottom of your web page. IN this example 'h4' tags have been used for the questions.
<script>toc('h4');faq('tc01');</script>
When I view source of a TOC or FAQ page the code hasn't changed. Why?
The you use view source the browser only shows the original code. If you want to see the changes Javascript has written, then select the file Save as option and save the page. Now you can view the changes in your favourite text editor.
Is there any limit to the number of questions on an FAQ page?
In theory no. In practice however, the script limits the total number of questions to 99. if you have more than about 10 questions though, then you may find having to keep scrolling back to the questions a nuisance. Ideally both the questions, and the selected answer, should fit within the need to scroll; which is why the other questions are hidden.
Can I reorder or add additional questions?
Yes. FAQ's are generated dynamically each time the page is loaded. The numbering is not fixed, each question is numbered in the order it is found.
I have a large FAQ page how can I split this up?
Try and structure the questions into smaller groups, e.g. novice, intermediate, advanced questions and create separate FAQ pages for each group. The last question on a FAQ page may be More questions? where the answer includes a link, or lines, to other FAQ pages.
What is the advantage of adding a TOC to a page?
If your page is very long, users may not want to read the whole article to find what they are looking for, especially if a very long article only has a single heading! By splitting the page into sections, with appropriate headers, means the user can quickly scroll to what they are looking for. This may be preferable to splitting the article into a number of pages.
By thinking about where to place headers will also help structure the document in a logical order. For example, you may start by outlining the article with just the headers, then fill in the content later.
What is the advantage of having FAQ pages?
Your website probably has some form of menu to logically structure the sites content. Despite this, it may not be obvious in which section a page belongs. For example you may have a page describing the setup of a printer, and a menu structure, part of which, is divided into hardware and software sections. Irrespective of which section you decide to place the article, the FAQ is How do I install a printer By including a link in the answer will direct the user to the article, irrespective of where it appears in the menu structure. used judiciously, FAQ pages provide an additional way of linking pages together, supplementing the menu structure (not replacing it!)
- 171 reads

