Style Guide
As much as possible please use the inbuilt styles and fonts for a more consistent look across the site.
The style guide provides you with a blueprint of the default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.
- How to use images
- How to embed video
- How to use blockquotes
- How to use drop caps
- How to use pull quotes
- How to use headings
- How to use tables
- How to list items
- How to create page anchors/bookmarks
If you have any questions about the style guide and formatting, please get in touch with Mike.
Images
Featured images
The Featured image size is 1800 pixels wide by 1200 pixels high.
Images are critical to maintaining a unified, industry-leading and professional look for Teche.
An effective featured image is professional-looking, visually engaging, and relates to the content of the article.
As the layout of the Teche blog depends on correct use of featured images, only articles with featured images will be published.
What images can I use?
Our first preference is to use bespoke photographs. The LIH Ed Media Producers can help with taking photos, provide training for DSLRs that we have available for loan, or provide guidance for cameras you have available in your faculty or office to ensure a high quality final product.
Our second preference is to use Unsplash for images. Please resize these as required to the correct size of 1800 x 1200.
Gratisography offers more quirky images (if you’re stuck with ‘other laptop photos’).
Any other tips for images?
- A featured image should help to illustrate the content of the article.
- Try to avoid using text as a prominent part of the image, as the article title will be placed over the text when users view the full article.
- As the featured image is responsive (it will change size depending on the user’s device and browser), try to avoid placing prominent subjects or features of the image close to the edges of the image.
- Infographics and clip art are not suitable for the featured image.
If you would like some assistance with featured images, please get in touch with the LIH Educational Media production team.
Images within the body content of the article
These are to help illustrate the content. Try to keep them relevant, and please enter in an appropriate Alt Text Description.
Newsletter images
Newsletter images should be 600 pixels wide by 400 pixels high. These are for the newsletters to be published in the Marketo system.
Embedding videos
To embed from YouTube or Vimeo, click on “Add Media” > “Insert from URL” and fill in the URL. Leave the sizing as is even if it looks odd in the editing window – it will be resized correctly to fit the page.
Headings
Please follow web accessibility heading guidelines when using these headings to structure your content. Examples of the heading styles are below:
H1 Heading One – Not to be used
H2 Heading Two – Use these as your section headings
H3 Heading Three – Use these as your subsection headings
H4 Heading Four
H5 Heading Five
H6 Heading Six
Blockquotes
The blockquote is used to indicate the quotation of a large section of text from another source. It can be as long or as short as you’d like!
Those of us that had been up all night were in no mood for coffee and donuts, we wanted strong drink. We were, after all, the absolute cream of the national sporting press.
Pull quotes
To use the pull quote, you simply need to add a class of pull-right or pull-left to your content. This can be done in the Text editor view. See an example below:
<span class="pull-right">Pull this text right.</span>
This pull quote is just hanging out on the right side of the post. Lorem ipsum dolor sit amet, consectetur.
A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic. The term is principally used in journalism and publishing.
Placement of a pull quote on a page may be defined in a publication’s or website’s style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown.
And this pull quote is pulling text to the left, like a sir. Lorem ipsum dolor sit amet, consectetur.
Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication’s house style pull quotes may be abbreviated for space and/or paraphrased for clarity, with or without indication. There are no hard-and-fast rules for the exact formatting of pull quotes. A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page serving to entice readers.
Drop caps
A drop cap is a decorative element typically used in documents at the start of a section or chapter. It’s a large capital letter at the beginning or a paragraph or text block that has the depth of two or more lines of normal text. You can easily add a dropcap to any paragraph by adding the class dropcap to the first letter of the article as seen below (copy this code into the text editor):
<span class="dropcap">T</span>his is how you add a dropcap.
Highlighting text
To use the highlight, you simply need to add a span with the class highlight. This can be done in the Text editor view. See an example below:
<span class="highlight">This will be highlighted.</span>
Tables
Copy the table code in the text editor if required in an article.
Beatle | Instrument | Song |
---|---|---|
John Lennon | Guitar | A Day In the Life |
George Harrison | Guitar | Old Brown Shoe |
Paul McCartney | Bass | Helter Skelter |
Ringo Starr | Drums | Don’t Pass Me By |
Mixed list items
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
- Ordered list item three
- Unordered list item three
- Ordered list item three
- Unordered list item three
Creating HTML anchors/bookmarks
To create bookmarks like the table of contents at the top of this page, please study this page on HTML links.
Anything else?
If you have any questions about the style guide and formatting, please get in touch with Mike.