Typography
GavernWP allows to access a lot of additional typography elements created with Shortcodes use. The use is very simple thanks to an additional button in a posts editor.
Below, there are all elements available in theme’s typography. Typography elements can be divided into three main groups:
- typography elements,
- interactive elements,
- elements prepared especially for a particular theme.
Warnings / Infos / Notices / Errors
These elements are used for highlighting text fragments together with their importance / type of information by using appropriate colors.
[warning]Warning or error text example using Shortcodes. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.[/warning] [info]Info text example using Shortcodes. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.[/info] [notice]Notice text example using Shortcodes. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.[/notice]Labels
Labels are useful for marking the importance of the text fragment or a word given. In the case of longer texts, we recommend to use elements from Warnings / Infos / Notices group.
This is a paragraph with the [label style=“1″]labeled text[/label] using the first style.
This is a paragraph with the [label style=“2″]labeled text[/label] using the second style.
This is a paragraph with the [label style=“3″]labeled text[/label] using the third style.
This is a paragraph with the [label style=“4″]labeled text[/label] using the fourth style.
This is a paragraph with the [label style=“5″]labeled text[/label] using the fifth style.
This is a paragraph with the [label style=“6″]labeled text[/label] using the sixth style.
Badges
Badges in their look are similar to Labels, however, you may use them mainly for highlighting shorter texts, e.g. numerical values.
This is a paragraph with the badge [badge style=“1″]12[/badge] using the first style.
This is a paragraph with the badge [badge style=“2″]12[/badge] using the second style.
This is a paragraph with the badge [badge style=“3″]12[/badge] using the third style.
This is a paragraph with the badge [badge style=“4″]12[/badge] using the fourth style.
This is a paragraph with the badge [badge style=“5″]12[/badge] using the fifth style.
This is a paragraph with the badge [badge style=“6″]12[/badge] using the sixth style.
Code listings
We recommend to use an element creating code listings in one out of three styles available for presenting source codes:
[code style=“1″]function helloWorld() {alert(‘Hello World!’);
}[/code] [code style=“2″]function helloWorld() {
alert(‘Hello World!’);
}[/code] [code style=“3″]function helloWorld() {
alert(‘Hello World!’);
}[/code]
Text blocks
Text blocks are useful for generating an element highlighting a particular part of an entry:
[textblock style=“1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [textblock style=“2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [textblock style=“3″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [textblock style=“4″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [textblock style=“5″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [textblock style=“6″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [textblock style=“7″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [textblock style=“8″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [textblock style=“9″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock] [numblock num=“01″ style=“1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.[/numblock] [numblock num=“02″ style=“2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.[/numblock] [numblock num=“03″ style=“3″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.[/numblock]Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. [floated align=“left“]Lorem ipsum dolor sit amet[/floated]
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. [floated align=“right“]Lorem ipsum dolor sit amet[/floated]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. [floated align=“center“]Lorem ipsum dolor sit amet[/floated] Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Quote and Citations
Quotes elements are useful for highlighting the author of a sentence given:
[quote style=“1″ author=“Author“]Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/quote] [quote style=“2″ author=“Author“]Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/quote] [quote style=“3″ author=“Author“]Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/quote] [quote style=“4″ author=“Author“]Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/quote]Lists
Ordered and unordered lists:
item2
item3
[/olist]
item2
item3
[/olist]
item2
item3
[/olist]
item2
item3
[/olist]
item2
item3
[/ulist]
item2
item3
[/ulist]
item2
item3
[/ulist]
item2
item3
[/ulist]
item2
item3
[/ulist]
item2
item3
[/ulist]
item2
item3
[/ulist]
item2
item3
[/ulist]
Buttons
Buttons in many different variations:
Your text Your text Your text Your text Your text Your text Your textThe same buttons as links:
Your text Your text Your text Your text Your text Your text Your textLegends
Elements with legend useful while creating text blocks in a frame provided with an appropriate title.
Raw text
An element useful for generating text without formatting:
Your textTooltips
Tooltips may occur in two forms: a link to a different website with a tooltip or a text connected with the text:
[tip label=“Default style“ style=“1″ href=“URL“]Text of the tooltip[/tip] [tip label=“Style II“ style=“2″ href=“URL“]Text of the tooltip[/tip] [tip label=“Style III“ style=“3″ href=“URL“]Text of the tooltip[/tip] [tip label=“Style IV“ style=“4″ href=“URL“]Text of the tooltip[/tip] [tip label=“Style V“ style=“5″ href=“URL“]Text of the tooltip[/tip]Other typography elements
Elements which could not be groupped to other categories.
Columns allow to place text in multicolumn layout:
[columns] [column]Content for the first column[/column] [column]Content for the second column[/column] [column]Content for the third column[/column] [/columns]You can also adjust the columns width using the width attribute:
[columns width=“50,25,25″] [column]Content for the first column[/column] [column]Content for the second column[/column] [column]Content for the third column[/column] [/columns]Toggle text – elements useful for creating blocks with text to toggle:
Shortcode pageurl allows to place an address to a blog:
[pageurl]A link to a RSS channel:
[rss href=“URL“]Link text[/rss]A link to a PDF document:
[pdf url=“URL“]Text of the link[/pdf]A private note in an entry, visible for an author only:
[note]Your private note[/note]Mail illegible for bots creating data bases for spammers:
[mail]email.to@obfuscate.com[/mail]Content visible for logged in users only:
Related posts:
[related limit=“5″]