Working with text

The main rule to follow is: Concentrate on getting the structure right, and the styling will look after itself. So you won’t find many options to let you alter the look of your page – but if you apply the headings etc in a logical way, the style sheet will apply a consistent look across the whole site.

For example: the Emphasis (I) button should only be used where selected words or phrases require emphasis – and not because you happen to like italic text. And the same applies, of course, to the Strong emphasis (B) button, which should only be used where selected words or phrases require even more emphasis.

The following layout rules have been kept to a minimum – simplicity makes for easy editing and a coherent look.

Below, you’ll find examples of how the various HTML tags are styled.

Page titles are <h1> like this.

…and normally, level 1 headings should not be used for anything else, so you won’t ever need to use this one.

<h2> headings look like this.

These should be used for the main sub-divisions of the centre column. And they’re also often used for the main headings in side-column items (where they are styled differently).

<h3> headings look like this.

In theory, it’s considered bad practice (from an accessibility point of view) to skip heading levels. But sometimes needs must!

<h4> headings look like this.

The golden rule is to mark up the text semantically (ie: according to what sort of text it is), rather than to achieve a particular look. People with a visual impairment often use screen-readers to read out the text to them, and one clue to the purpose of a particular chunk of text lies in the html tag that’s used to mark it up.

Lists

Items which are essentially lists should be marked up as either:

  • Unordered lists (like this one and most of the others on this site) or
  • Ordered lists – (numbered) where the order of the items is significant. (See, for example, the step-by-step instructions in the next section.)

Remember: Wingfinger can, if required, change the CSS style sheet to change the way a particular tag (<h2>, <h3> etc) displays across the whole site. But it’s a lot more work to edit each page in WordPress to change the tags – so do, please, try to apply them in a way that’s appropriate and consistent.

Creating links

To do safe email link

‘Please email to find out more.’

  1. Select the email text (office@stampoutpoverty.org).
  2. Replace the email text with <script type="text/javascript"> generate_address( "office", "stampoutpoverty.org" ) </script>.
    Note: how the first bit of email before @ is first item within the brackets and the second bit of email after @ is second item

To do internal links

To do an internal link to the Donate Cash Today page, you would use '/take-action/donate/donate-cash-today' as the link.

‘Please make use of the private Test page.’

  1. Select the link text (ie: Test page).
  2. Click the link button.
  3. Replace the "http://" with the last part of the ‘Permalink’ to the page – which you can copy and paste either from the address bar of the browser or from the Permalink line above the editing window for the appropriate page: "/test-page"

To do download file link

To do a link to download the The-Economic-Consequences-of-the-EU-Proposal-for-a-Financial-Transaction-Tax-3.pdf (??kb) file, you would use 'The-Economic-Consequences-of-the-EU-Proposal-for-a-Financial-Transaction-Tax-3.pdf' as the link.

‘Please download the PDF file (10kb).’

  1. Upload the file to the media library
  2. On the Page/Post select the link text (ie: Word file).
  3. Click the link button.
  4. Enter the required link url
  5. Click add link