Style

Lists

  • One
  • Two
    • Two Point One
    • Two Point Three
  • Three
  • Four

Euismod amet leo, cras et massa, eleifend egestas. Urna in nunc, nunc vivamus. Cum arcu pretium, sed sed. In nonummy, tempor molestie id, omnis tellus. A risus dolor, vitae et donec, mauris amet posuere. Donec in, nonummy dolor luctus. Laoreet ligula, pretium nisl eleifend, malesuada tincidunt cursus. Congue velit iaculis.

  1. One
  2. Two
  3. Three
    1. Three.One
    2. Three.Two
  4. Four

Egestas at amet. Pharetra mauris. Mattis quam feugiat, iure ipsum. Vel fringilla, accumsan nam rhoncus, orci diam. Aenean sit sodales, urna porttitor. Nulla enim consequat, amet congue. Mauris vulputate, nonummy vel.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Euismod amet leo, cras et massa, eleifend egestas. Urna in nunc, nunc vivamus. Cum arcu pretium, sed sed. In nonummy, tempor molestie id, omnis tellus. A risus dolor, vitae et donec, mauris amet posuere. Donec in, nonummy dolor luctus. Laoreet ligula, pretium nisl eleifend, malesuada tincidunt cursus. Congue velit iaculis.

Tincidunt varius sequi, integer magna ac, donec curabitur. Rhoncus sed. Lectus vitae augue, mauris tincidunt. Ut nec fermentum, dolor vestibulum. Nunc neque tincidunt, non dictumst tempus. Et id, duis sit arcu, felis porta donec. Proin tincidunt.

Egestas at amet. Pharetra mauris. Mattis quam feugiat, iure ipsum. Vel fringilla, accumsan nam rhoncus, orci diam. Aenean sit sodales, urna porttitor. Nulla enim consequat, amet congue. Mauris vulputate, nonummy vel.

Phasellus lorem aliquam, pede morbi, nulla sed. Urna ut a. Mattis viverra dignissim, suspendisse risus, felis a. Sit nec. Sit egestas condimentum. Tempor quisque sit, commodo justo consequat. Augue fermentum, est vulputate et, purus et. Tincidunt quam enim, ac a pede.

Image in Post

Old Course

Praeterea iter est quasdam res quas ex communi. Cum ceteris in veneratione tui montes, nascetur mus. Nec dubitamus multa iter quae et nos invenerat. Prima luce, cum quibus mons aliud consensu ab eo. Mercedem aut nummos unde unde extricat, amaras. Paullum deliquit, ponderibus modulisque suis ratio utitur.

Praeterea iter est quasdam res quas ex communi. Quam diu etiam furor iste tuus nos eludet? Quam diu etiam furor iste tuus nos eludet? Donec sed odio operae, eu vulputate felis rhoncus. Mercedem aut nummos unde unde extricat, amaras. Cras mattis iudicium purus sit amet fermentum.

Cras mattis iudicium purus sit amet fermentum. Plura mihi bona sunt, inclinet, amari petere vellent. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Ab illo tempore, ab est sed immemorabili. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cum ceteris in veneratione tui montes, nascetur mus.
Quam diu etiam furor iste tuus nos eludet? Me non paenitet nullum festiviorem excogitasse ad hoc.

Pellentesque habitant morbi tristique senectus et netus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Petierunt uti sibi concilium totius Galliae in diem certam indicere.

WooCommerce Elements

WooCommerce Cat

Cum ceteris in veneratione tui montes, nascetur mus.

WooCommerce Product

Shortcodes

Introduction

Included in the WooFramework is a few custom shortcodes that you can use in all our themes. Shortcodes work in posts, pages and even widgets. For extensive overview on all available shortcodes and usage you can check out the WooCodex.

Buttons

These CSS3 buttons look amazing in all modern browsers, and although they won’t look as amazing, they will still work in older browsers.

Colored Buttons

[button]Button[/button]

[button color=”red”]Button[/button]

[button color=”orange”]Button[/button]

[button color=”green”]Button[/button]

[button color=”aqua”]Button[/button]

[button color=”teal”]Button[/button]

[button color=”purple”]Button[/button]

[button color=”pink”]Button[/button]

[button color=”silver”]Button[/button]

Small and Large Buttons

[button size=”small”]Button[/button]

[button]Button[/button]

[button size=”large”]Button[/button]

[button size=”xl”]Button[/button]

Icons Buttons

[button style=”alert” color=”silver”]Button[/button]

[button style=”tick” color=”silver”]Button[/button]

[button style=”info” color=”silver”]Button[/button]

[button style=”note” color=”silver”]Button[/button]

[button style=”download” color=”silver”]Button[/button]

Custom Button

[button color=”#f0f0f0″ border=”#555″ style=”info” text=”dark” class=”my-button”]Button[/button]

[divider]

Info Boxes

Info boxes are nice to use if you need to inform your site visitors of something in a more visual manner.

[box type=”info”]This is an info box[/box]

[box type=”note”]This is a note box[/box]

[box type=”tick” style=”rounded” border=”full”]is is a tick box[/box]

[divider_flat]

[box type=”download”]This is an download box[/box]

[box type=”alert”]This is an alert box[/box]

[divider]

With this shortcode you can easily show related posts by tag. This only works on posts which have tags that exist on other posts.
[related_posts limit=”3″]
[divider]

Social Buttons

[sixcol_one][twitter][/sixcol_one]

[sixcol_one][linkedin_share url=”http://woothemes.com/” style=”top”][/sixcol_one]

[sixcol_one][pinterest url=”http://woothemes.com/” design=”vertical”][/sixcol_one]

[sixcol_three_last][fblike style=”button”][/sixcol_three_last]

[divider]

Social Icons

[social_icon float=”left” url=”http://facebook.com/woothemes/” profile_type=”facebook” title=”View our Facebook Page”] [social_icon float=”left” url=”http://twitter.com/woothemes/” profile_type=”twitter” title=”View our Tweets”] [social_icon float=”left” url=”#” profile_type=”delicious” title=”View our Delicious Bookmarks”] [social_icon float=”left” url=”#” profile_type=”youtube” title=”View our Youtube Channel”] [social_icon float=”left” url=”#” profile_type=”flickr” title=”View our Flickr Stream”] [social_icon float=”left” url=”#” profile_type=”linkedin” title=”View our LinkedIn Profile”] [social_icon float=”left” url=”http://feeds.feedburner.com/WooThemes” profile_type=”rss” title=”View our RSS Feed”] [social_icon float=”left” url=”#” profile_type=”googleplus” title=”View our Google Plus Profile”]

[divider]

Horizontal Rule

You can easily break up your text on a page or post by adding either a horizontal rule or a divider (same as hr only no border).
[hr]

[divider]

Columns

Columns are an easy way to style your post or page with multiple columns, from two columns to six columns. You can make columns span more one column to mix column widths also.

[twocol_one]

Two columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/twocol_one]

[twocol_one_last]

Two columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/twocol_one_last]

[divider_flat]

[threecol_one]

Three columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/threecol_one]

[threecol_one]

Three columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/threecol_one]

[threecol_one_last]

Three columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/threecol_one_last]

[divider_flat]

[threecol_one]

Three columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/threecol_one]

[threecol_two_last]

Three columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/threecol_two_last]

[divider_flat]

[fourcol_one]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fourcol_one]

[fourcol_one]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fourcol_one]

[fourcol_one]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fourcol_one]

[fourcol_one_last]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fourcol_one_last]

[divider_flat]

[fourcol_one]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fourcol_one]

[fourcol_one]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fourcol_one]

[twocol_one_last]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/twocol_one_last]

[divider_flat]

[fourcol_one]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fourcol_one]

[fourcol_three_last]

Four columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fourcol_three_last]

[divider]

[fivecol_two]

fivecol_two
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fivecol_two]

[fivecol_one]

fivcol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fivecol_one]

[fivecol_two_last]

fivecol_two_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/fivecol_two_last]

[divider]

[sixcol_one]

sixcol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/sixcol_one]

[sixcol_two]

sixcol_two
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/sixcol_two]

[sixcol_three_last]

sixcol_three_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

[/sixcol_three_last]

[divider]

Quote

Add a styled quote to your page or post and float it left or right with or without box.

[quote]Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.[/quote]

[divider]

Icon Link

Add a styled link with an icon

You can go ahead and [ilink style=”download” url=”http://www.woothemes.com”]Download[/ilink]

[divider]

Custom Link

You can add custom styled lists using Fontawesome

  • Bulleted lists (like this one)
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs
  • …and many more with custom CSS

[divider]

Typography

[dropcap]T[/dropcap]his is an example of a [abbr title=”WordPress rocks!”]WordPress[/abbr] page, you could edit this to put [highlight] information[/highlight] about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and [typography size=”16″ font=”Lobster” size_format=”px”]manage all of your content inside of WordPress[/typography].

[divider]

Tabbed Content

[tabs style=”boxed”]

[tab title=”First Tab”]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.[/tab]

[tab title=”Another Tab”]Another Tab content goes here.[/tab]

[tab title=”Last Tab”]Last Tab content goes here.[/tab]

[/tabs]

Content Toggle

[toggle hide=”yes” border=”yes” style=”white”]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.[/toggle]

[divider]

Leave a Reply

Your email address will not be published.