757-463-9120

Snippets

*** Alert ***

This is a collapsible alert box by clicking on the little x in the box.

DefaultYou may want to double check before you proceed further.

*** Alert with Custom Background Colour ***

GreenYou may want to double check before you proceed further.

*** 2 Columns ***

One Half

Add your own content here.

One Half

Add your own content here.

*** 3 Columns ***

Span 4

Add your own content here.

Span 4

Add your own content here.

Span 4

Add your own content here.

*** 4 Columns ***

Span 3

Add your own content here.

Span 3

Add your own content here.

Span 3

Add your own content here.

Span 3

Add your own content here.

*** 6 Columns ***

Span 2

Add your own content here.

Span 2

Add your own content here.

Span 2

Add your own content here.

Span 2

Add your own content here.

Span 2

Add your own content here.

Span 2

Add your own content here.

*** Flexible Column Counts ***

This one has two columns with one as span4 and the other as span8, but you can have any combination of columns as long as the total of columns equal 12 because this theme uses a 12-column grid layout. So this sample below is span4 + span8 = 12

Span 4

Add your own content here.

One 8

Add your own content here.

*** Content Quote ***

Lorem ipsum dolor sit amet, consectetur adipiscing erat a ante etiam eget massa massat.

Someone famous Source Title

*** Adding Colour ***

Lorem ipsum dolor sit amet, consectetur adipiscing erat a ante etiam eget massa massat.

Someone famous Source Title

*** Quote Right Aligned ***

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante etiam eget massa massat.

Someone famous Source Title

*** Quote Left Aligned ***

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante etiam eget massa massat.

Someone famous Source Title

*** Divider – Shadow ***

*** Divider – Double Lines ***

*** Divider – Single Line ***

*** Divider – Dashed ***

*** Divider – Dotted ***

*** Divider – No Style ***

*** Drop Cap ***

A

If you want to change the background colour of the drop cap, simply do inline styling like this:

A

*** Focus Box ***

This is a Focus Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec consectetur ipsum. Suspendisse iaculis metus eu orci semper pretium. Etiam commodo arcu vitae dui viverra tristique. Donec elit eros, mattis eget placerat vel, bibendum quis metus. Vivamus interdum condimentum posuere. Aliquam sollicitudin cursus tellus eu tempus. Maecenas a dolor libero. Phasellus malesuada nunc ipsum, nec placerat arcu.

*** Focus Box with Shadow ***

This is a Focus Box with Shadow

Add your content here.

*** Focus Box Centered ***

This is a Focus Box Centered

Add your content here.

*** Focus Box Short Aligned Left – Default width 40% ***

This is a Focus Box that is Short, Aligned Left

Add your content here.

*** Focus Box Short Aligned Right – Default width 40% ***

This is a Focus Box that is Short, Aligned Right

Add your content here.

*** Changing Border Colour ***
To change colours for your box border, for example the top border, do inline styling. You can also combine other styles such as adding a background with a different border colour, or even changing text colour, etc.

This is a Focus Box Custom Colour

Add your content here.

*** Changing the Background Colour ***
To add a background colour box, use inline styling:

This is a Focus Box with Background

Add your content here

*** Button – Regular ***

*** Button – Large ***

*** Button – Small ***

*** Button – Mini ***

*** Text Link as a Button ***

Text Button

*** Image List Layout ***

You can setup a page with what is called image lists, using an unordered list

    for your layout. You can have as many images as you want by simply adding more

  • to the code below. The sample below is based on the “Meet the Team” page from the live demo site which gives a 3 column layout when using span4 as the class to each
  • tag. As you add more
  • to the source, it simply creates a second row for you as it wraps down.

If you want 4 columns, change the span4 to span3. This is because the theme is based on a 12-column grid layout and so span3 x 4 = 12.

What you add for content is up to you, but some html basic knowledge is needed if you change from the sample snippet below.

  • path to thumbnail Snippets

    Tina Porta

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Tina

  • path to thumbnail Snippets

    Jeremy Lorem

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Jeremy

  • path to thumbnail Snippets

    Justin Delore

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Justin

*** Labels ***

Label

*** Labels with Colour ***

Label

*** Highlight ***

some text

*** Highlight with Colour ***

some text

*** List – Small Circle ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis dictum.

*** List – Leading Zero ***

  1. Fusce adipiscing tellus a lacus pretium mattis.
  2. Aliquam porttitor mattis nisi non sagittis.
  3. Vivamus hendrerit purus eget turpis dictum.

*** List – Upper Alpha ***

  1. Fusce adipiscing tellus a lacus pretium mattis.
  2. Aliquam porttitor mattis nisi non sagittis.
  3. Vivamus hendrerit purus eget turpis dictum.

*** List – Lower Alpha ***

  1. Fusce adipiscing tellus a lacus pretium mattis.
  2. Aliquam porttitor mattis nisi non sagittis.
  3. Vivamus hendrerit purus eget turpis dictum.

*** Image List – Dot ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Dash ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Square ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Arrow ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Square Arrow ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Round Arrow ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Circles ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Grid ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Checkmark ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Image List – Circle ***

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Morbi tempor enim vel leo varius elementum.

*** Definition List ***

Definition List Title
This is a definition list division.
Definition
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet eros non massa viverra eu semper nulla pellentesque. Suspendisse potenti.
Gallery
Donec nec erat non nibh tincidunt posuere. In sodales porta urna eget faucibus. Quisque eu ipsum dolor, at pellentesque diam. Vestibulum vitae mi adipiscing lorem fringilla condimentum. Fusce et nisi est, at euismod odio.
Gravatar
Nam urna ante, porta vel lacinia a, gravida eu magna. Nunc vitae ipsum leo. Phasellus hendrerit quam in tortor elementum sed luctus lectus varius. Etiam neque tortor, pretium et commodo eget, dignissim ac tellus. Class aptent taciti sociosqu ad litora torquent per conubia

*** Portfolio Single Layout ***

Based on the single portfolio item view with a widgetkit gallery, the sample snippet below is based on the live demo site’s portfolio single layout for a portfolio item.

*** Code ***

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec urna imperdiet sapien suscipit sagittis. Nulla molestie dignissim ante rhoncus ultrices. Sed aliquet et nulla a aliquam. Vivamus viverra justo neque, a egestas mauris vehicula et. Quisque ullamcorper ac purus non hendrerit. Nulla tellus massa, tempus in eleifend sit amet, ultrices ac neque. Sed sagittis suscipit nisl ac luctus. Morbi eros nisi, tempus ac erat eget, semper varius nibh. Vivamus dapibus consequat purus id consequat.

Showcase Photographs

This is just one layout possibility that you can do for a portfolio item.
Every portfolio will be different for each person so get creative!

  • path to thumbnail Snippets
  • path to thumbnail Snippets
  • path to thumbnail Snippets
  • path to thumbnail Snippets

*** Pricing Tables ***

These are going to be a little more work involved but also to take it slow as you add your own content. What is important to know is that each row needs a div with the class=”row-fluid” before you begin adding your span divs (columns). The actual column of content is a

    list with each item on it’s own

  • list.

This sample snippet is based on the live demo site which shows 4 pricing columns, which are span3 containers each. Remember that this theme is designed on a grid layout of 12 columns, so when you decide how many pricing columns you will have, all must total 12. For the snippet below, there are 4 columns: 4 x span3 = 12

If you want just three pricing columns, then you will need to remove one of the span3 divs in the code below and then change the remaining span3′s to span4′s because 3 x span4 = 12 (3×4=12)

Making one pricing column stand out like the demo needs some inline styling which I have included in the 3rd column snippet below. You will see the inline styling added to the st_price-list

  • item as:

 

style=”margin-top: -18px; background-color: #96c82c; font-size: 2.5em;”

*** The Code Snippet ***

  • Standard
  • $1999/month
  • 3 Free Themes
  • 3 Pro Themes
  • 3 Months Email Support
  • Video Tutorials
  • Free Theme Updates
  • Business
  • $2999/month
  • 5 Free Themes
  • 5 Pro Themes
  • 6 Months Email Support
  • Video Tutorials
  • Free Theme Updates
  • Professional
  • $3999/month
  • 10 Free Themes
  • 10 Pro Themes
  • 12 Months Email Support
  • Video Tutorials
  • Free Theme Updates
  • Premium
  • $4999/month
  • All Free Themes
  • All Pro Themes
  • 12 Months Support
  • Video Tutorials
  • Free Theme Updates

*** Progress Bar ***

Changing the bar’s width is done with the inline style selector of width.

Single Bar at 60%

*** Progress Bar with Custom Colour ***

Green at 60%

*** Stacked Progress Bars ***

35%
20%
15%

*** Multiple Progress Bars ***

You can have as many bars as you want by adding each snippet to a new line and make any custom colour changes that you want.

Blue at 20%
Green at 40%
Orange at 60%

*** Tables with Headings ***

Below is a snippet that gives you a 2 column, 2 row table layout with the default colour of grey for your header.

Heading One Heading Two
Some content here Some content here
Some content here Some content here

*** Tables with a Custom Header Background Colour ***

Below is a snippet that gives you a 2 column, 2 row table layout with a custom colour for your header.

Table Heading Heading
Some content here Some content here
Some content here Some content here

*** Widgetkit Gallery ***

You have the option of using the image list layout to create a gallery, but with the added features of Widgetkit to give you a nice thumbnail overlay and popup lightbox for viewing images.

Remember that this theme is built on a 12-column grid layout. So you can decide how many columns to have in your gallery. I recommend creating your thumbnails from the full sized image, and then uploading them to your Media Library. I also recommend making your thumbnails the same size for consistent layout.

If you want more than one row for your gallery, simply copy the code below to a new line in your editor text view. This sample snippet below gives you a 4 column/1 row gallery.

  • path to your thumbnail image Snippets
  • path to your thumbnail image Snippets
  • path to your thumbnail image Snippets
  • path to your thumbnail image Snippets

**** Spotlight ****

data-spotlight=”on”

*** Light Box ***

data-lightbox=”group:mygroup1; titlePosition:over; padding:0″

Sharefacebook Snippetstwitter Snippetslinkedin Snippetsemail Snippets

Leave a reply