T&Cs apply to all offers on this web site

Typo and Styles

  • 24 Mar 08
  • Written by Tom Thorns

The below styles are to be used as a guide for how to structure your content in order to best utilize the built in typography features that are present in Morph. This style guide will assist you in keeping your sites content structure and layout consistent, by using the appropriate xhtml markup.


This is a Heading 1

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.

This is a Heading 2

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.

This is a Heading 3

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.

This is a Heading 4

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.

This is a Heading 5

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.

This is a Heading 6

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.


One of the things that makes Morph so awesome, is its tight integration with Yahoo’s YUI Grids CSS library. This is mostly evident in the numerous different layout combinations that are possible with Morph, but one of the lesser known features is the ability to take advantage of the grids library in your content. Not only does this let you create sexy page layouts with ease, but also that yours sites coder is cleaner, thanks to the reusable classes that are used throughout.


Example 1: 50% | 50% (default)

This example shows the default 50/50 split and can be used to display two blocks of content side by side, with each taking up half of the available space.

Cillum dolore eu fugiat nulla

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sunt in culpa qui officia deserunt

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.


Example 2: 66% | 33%

This example shows two blocks of content, with the first taking up 66% of the available space and the second taking up the remaining 33%.

Cillum dolore eu fugiat nulla sed do eiusmod

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.

Sunt in culpa qui

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.


Example 3: 33% | 66%

This example shows two blocks of content, with the first taking up 33% of the available space and the second taking up the remaining 66%.

Sunt in culpa qui

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

Cillum dolore eu fugiat nulla sed do eiusmod

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.


Example 4: 75% | 25%

This example shows two blocks of content, with the first taking up 75% of the available space and the second taking up the remaining 25%.

Cillum dolore eu fugiat nulla sed do eiusmod tempor

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.

Sunt in culpa qui

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.


Example 5: 25% | 75%

This example shows two blocks of content, with the first taking up 25% of the available space and the second taking up the remaining 75%.

Sunt in culpa qui

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

Cillum dolore eu fugiat nulla sed do eiusmod tempor

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.


Example 6: 33% | 33% | 33%

This example shows three blocks of content, with with each taking up 33% of the available space.

Cillum dolore eu fugiat

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Sunt in culpa qui officia

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

Qui deserunt mollit

Excepteur sint occaecat cupidatat non proident, sunt in mollit anim id est.


Example 7: 25% | 25% | 25% | 25%

This example shows four blocks of content, with with each taking up 25% of the available space.

Excepteur sit

Excepteur sint occaecat cupidatat non proident, sunt in mollit anim.

Occaecat cupida

Excepteur sint occaecat cupidatat non proident, sunt in est mollit.

Cillum dolor

Excepteur sint occaecat cupidatat non proident, sunt anim id est.

Volup velit

Excepteur sint occaecat cupidatat non, sunt in mollit anim id est proident.


Example 8: 20% | 20% | 20% | 20% | 20%

This example shows five blocks of content, with with each taking up 20% of the available space.

Ecept sint

Excepteur sint occaecat cupidatat non, in mollit anim.

Occa cupat

Excepteur sint occaecat cupidatat, sunt in est.

Cillum dolor

Excepteur sint occaecat cupidatat proident, anim.

Volupta veli

Excepteur sint occaecat cupidatat, sunt in mollit ani.

Sint ocat

Excepteur sint occaecat cupidatat non proident.


Grids Quick Reference:

Below is a list of classes that you can use in your content. View the source code of this page for specific code examples.

.yui-g
50/50 split (default)
.yui-gb
66/33 split
.yui-gd
33/66 Split
.yui-ge
75/25 Split
.yui-gf
25/75 Split
.yui-gc
33/33/33 Split
.yui-g4
25/25/25/25 Split
.yui-g5
20/20/20/20/20 Split

Related tutorials:


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.


Unordered Lists

“An unordered list typically is a bulleted list of items. HTML 3.0 gives you the ability to customise the bullets, to do without bullets and to wrap list items horizontally or vertically for multicolumn lists.


Example 1: Standard styles

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

No class
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Circle class
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Square class
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
None class
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris

Example 2: Themelet styles

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Style 1
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 2
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 3
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 4
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 5
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 6
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 7
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 8
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 9
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 10
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 11
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 12
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 13
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 14
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris
Style 15
  • Tess
  • Andrew
  • Matt
  • Byron
  • Chris

Example 3: Nested underordered list

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Home
  • Company
    • About us
    • Meet the team
    • Contact us
  • Products
    • Morph
    • Configurator
    • Themelets
    • Templates
      • Free Templates
      • Commercial Templates
  • Services
    • Design conversions
    • Extension development
    • Copywriting

Example 4: Underordered compound list

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • 27″ iMac

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • iPod Nano

    Elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, lorem ipsum dolor sit amet consectetur adipisicing.

  • Macbook Pro

    Consectetur do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Mac Pro

    Ipsum consectetur dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Ordered Lists

“An ordered list typically is a numbered list of items. HTML 3.0 gives you the ability to control the sequence number – to continue where the previous list left off, or to start at a particular number. The numbering style is left to associated style sheets, e.g. whether nested lists contribute to a compound item number, e.g. “3.1.5”, or whether numbers are rendered as arabic, upper or lower case roman numerals or using the numbering scheme appropriate to the language context.

Style 1
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
Style 2
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
Style 3
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
Style 4
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
Style 5
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday

Definition Lists

“A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term on the left with the definition following on the right or on the next line. The definition text is typically indented with respect to the term.

Example 1: Default definition list

Themelets
Themelets are child themes of Morph, which inherit all of Morph’s underlying functionality and add the visual layer to Morph.
Configurator
Configurator is a Joomla admin component, which provides you with an interface to manage all of Morph’s options.
Framework
A framework is a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into generic modules that can be reused. (Jeff Croft)
FX Range
This refers to Morph’s set of features which are used in conjunction with Joomla’s built in module or page suffix features.

Example 2: Definition list with “listHorizontal” class

Themelets
Themelets are child themes of Morph, which inherit all of Morph’s underlying functionality and add the visual layer to Morph.
Configurator
Configurator is a Joomla admin component, which provides you with an interface to manage all of Morph’s options.
Framework
A framework is a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into generic modules that can be reused. (Jeff Croft)
FX Range
This refers to Morph’s set of features which are used in conjunction with Joomla’s built in module or page suffix features.

Example 3: Definition list with “listVertical” class

Themelets
Themelets are child themes of Morph, which inherit all of Morph’s underlying functionality and add the visual layer to Morph.
Configurator
Configurator is a Joomla admin component, which provides you with an interface to manage all of Morph’s options.
Framework
A framework is a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into generic modules that can be reused. (Jeff Croft)
FX Range
This refers to Morph’s set of features which are used in conjunction with Joomla’s built in module or page suffix features.

Example 4: Definition list with “listVertical zebra” classes

Themelets
Themelets are child themes of Morph, which inherit all of Morph’s underlying functionality and add the visual layer to Morph.
Configurator
Configurator is a Joomla admin component, which provides you with an interface to manage all of Morph’s options.
Framework
A framework is a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into generic modules that can be reused. (Jeff Croft)
FX Range
This refers to Morph’s set of features which are used in conjunction with Joomla’s built in module or page suffix features.

Example 5: Definition list with “listFlat” classes

Control and reset styles

no-margin
Removes all margin from a module.
no-padding
Removes all padding from a module.
no-h3borders
Removes borders from the module heading only.
strip-borders
Removes all borders from the module.
no-h3bg
Removes backgrounds from the module heading only.

Tables are to this day still one of the most abused html tags. For years web designers have used to tables to incorrectly layout their web pages and as a result of this, using tables is often frowned upon in the industry. That said, tables still have their place, yup you guessed it, to display tabular data. Below are some examples of Morph’s built in table styling. Use with caution 😉


Default Joomla Table Style:

The below table is the default way that tables generated by Joomla or 3rd party components and / or modules will look. Examples of this are on the weblinks page, or newsfeeds page within the default Joomla demo content.

Section Table Header Author Hits
Change is inevitable, except from a vending machine. Administrator 8
Error, no keyboard. Press F1 to continue. Administrator 6
Why do psychics have to ask you for your name? Administrator 6
Why is abbreviation such a long word? Administrator 8
Plan to be spontaneous, tomorrow. Administrator 10
Table with only table headers
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data
Table with only row headers
Row Header1 Table Data Table Data Table Data Table Data Table Data
Row Header2 Table Data Table Data Table Data Table Data Table Data
Row Header3 Table Data Table Data Table Data Table Data Table Data
Row Header4 Table Data Table Data Table Data Table Data Table Data
Table with both table and row headers
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Row Header1 Table Data Table Data Table Data Table Data Table Data
Row Header2 Table Data Table Data Table Data Table Data Table Data
Row Header3 Table Data Table Data Table Data Table Data Table Data
Row Header4 Table Data Table Data Table Data Table Data Table Data

The below styles are added by using the following xhtml syntax your textStyle name being one of the options below


Example 1: Info message

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

This is a paragraph with the class=”info” set using the above format. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Example 2: Tip message

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

This is a paragraph with the class=”tip” set using the above format. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Example 3: Alert message

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

This is a paragraph with the class=”alert” set using the above format. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Example 4: Help message

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

This is a paragraph with the class=”help” set using the above format. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.


Quotes are a useful way for your to add emphasis to a specific block of text. Here are some examples of the built in styling that you can use to make your content easier to scan.


Blockquotes:

“blockquote is a large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s. This element can also have an optional attribute cite that specifies the location (in the form of a URI) where the quote has come from. – Smashing Magazine


Example 1: Default Blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.


Example 2: Blockquote with “quote” class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.


Example 3: Blockquote with “box + style” class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.


Example 4: Left aligned pullquote

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Consectetuer adipiscing elit. Aliquam congue posuere enim. Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Example 5: Right aligned pullquote

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Example 6: Left aligned pullquote with style1

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Example 7: Right aligned pullquote with style2

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Example 8: Left aligned pullquote with style3

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Example 9: Right aligned pullquote with style4

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Example 10: Left aligned pullquote with style5

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Inline Quotes:

Often the words I have a dream are sounded out against the backdrop of the city.


Horizontal rules are a good way to break up your content, making it easier for the person reading to scan through.

Example 1: Default Horizontal Rule

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.


Example 2: Horizontal Rule with “dashed” class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.


Example 3: Horizontal Rule with “dotted” class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.


Example 4: Horizontal Rule with “cut” class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.



We have created an easy way for you to get your images lined up nicely within the content with the correct margin and padding depending on whether it is on the left or right side of the content. The only thing you have to do is add align”=right”or left to the image and the template and css will do the rest of the spacing for you.


Image alignment

This is an example of an image which has been left aligned, using the align="left" image attribute. A class of “.img-left" is automatically appended to the image, to allow for additional css tweaking.

Example 1: Left aligned image

left aligned image Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage.

Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Image credits: Love heart by leovdworp


Example 2: Right aligned image

right aligned image Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage.

Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Image credits: Face of Sun by clshearin


Image captions

The images below are examples of images that have caption enabled. This is done by adding a class of .caption to the image. Image captions are disabled by default, but can easily be enabled & customized in the “plugins > captions” tab in Configurator.

  1. Activate (and customize) the Captions plugin in Configurator (plugins > captions).
  2. Add a class of .caption to your image.
  3. Add some description text (which will be used for the caption) to your image, using the image “alt” attribute, eg: alt="This is my caption text".

Example 3: Left aligned with “img-left caption” classes set

This is an example caption Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage.

Empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Image credits: Dreaming in the grey reality by Vangel_PL


Example 4: Right aligned with “img-right caption” class set

this is the caption

Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Image credits: Red lady by alicja_sto


Image borders

Example 5: Left aligned with “img-left img-border” classes set

left aligned imageCredibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage.

Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities.

Image credits: Love heart by leovdworp


Example 6: Right aligned with “img-right img-border img-style1” classes set

right aligned image Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Image credits: Face of Sun by clshearin


Example 7: Right aligned with “img-left img-border img-style2” classes set

left aligned imageCredibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Generate empowered technology and holistic total linkage. Resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Image credits: Dreaming in the grey reality by Vangel_PL


Example 8: Left aligned with “img-right img-border img-style3” classes set

right aligned imageCredibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage.

Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Image credits: Red lady by alicja_sto


Example 9: Right aligned with “img-left img-border img-style4” classes set

left aligned imageEnthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities.

Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.

Image credits: Face of Sun by clshearin


Example 10: Left aligned with “img-right img-border img-style5” classes set

right aligned imageCredibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage.

Image credits: Dreaming in the grey reality by Vangel_PL

​

Latest News & Gossip