Formatting Drupal content

This page is provided as a guide for novice users, unfamiliar with HTML and CSS. It illustrates some very simple editing to show how to enhance the layout of a page. As well as standard HTML, some additional functionality is built into to theme to simplify the task of formatting, and to give the pages a consistent look and feel.

Initially you simply enter the text of your article, at this stage it's a good idea to leave spaces between paragraphs. If the article is very long, then you should include sub headings to introduce different sections (or topics). This will also help ensure the text follows a logical flow. As a general rule if you use the print preview option, every (printed) page should have a sub heading.

Table of contents

Header tags Font family Tables

Lists Forms and input tags Images

Headers

You may start by initially outlining the article with the headers for each section (topic). HTML provides 6 headings of different sizes. Only four are shown here. To create a header simply add the chosen header to your text by enclosing it between an opening and closing tag. The browser will do the rest.

<h1> First Header</h1>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

<h2>H2 Second header</h2>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

<h3>H3 Third header</h3>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

<h4>H4 Fourth header </h4>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

---

Paragraph size and default font family

The next step is to enclose all paragraphs with <p> ... </p> tags. By default paragraphs will be justified left as follows

<p>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 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. </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>

Ordered and unordered lists

This is straightforward HTML. IN the case of ordered lists, the browser takes care of the numbering, so if you reorder items the numbering is automatically adjusted.

The corresponding output in the browser looks like this

---

Images

The code necessary to add images is created by Drupal, and the way images are uploaded and added to a page is described elsewhere.

<img src="/files/webstyle/users/user3/TestImage.jpg" width="600" height="480" alt="TestImage.jpg" />

A toggle function can be added to the (thumbnail) image as shown below. Click on either image or small thumbnail to see the effect of scaling the thumbnail (90px) by 7x (630px).

If you are tempted to use the toggle function then you must remove the height dimension from the code. Compare the "before" code above to the "after" code below

<img src="/files/webstyle/users/user3/TestImage.jpg" width="600" alt="TestImage.jpg" onclick="toggle(this)" />

When uploading images that are to be used with this toggle function, ensure the width of the full size image is set to 630px (pixels). Both the thumbnail and full size image must exist

From a readers perspective, and for printing reasons, the use of thumbnails is generally discouraged.
They should only be used if the page load time becomes excessive, or to create a visual effect.
Changing image sizes dynamically can also disrupt the page layout if you are not careful.

Corresponding thumbnail sizes

---

Tables

Tables must start and end with <table> ... </table> tags. Likewise each row starts and ends with <tr> ... </tr>.

In a simple table the number of columns in each row must be the same. Each table cell starts and end s with <td> ... </td> as shown below.

<table>

<tr><td>row 1 column 1</td>

<td>row 1 column 2</td></tr>

<tr><td>row 2 column 1</td>

<td>row 2 column 2</td></tr>

</table>

---

Forms and input tags

Fieldset name

text box Check box Radio button
Text Area