*** 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.

*** Call to Action ***

Widget Title: This is Your Call to Action

Widget Content:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis suscipit libero, non mattis justo condimentum sed. Nam convallis feugiat nibh, eu pulvinar dolor pretium asagittis ac lacus ut!

*** Contact page Snippet ***

Replace the form shortcode with your own that looks similar to this:
[contact-form-7 404 "Non trouvé"]

*** For your Contact Page ***

Welcome to the Celestial Reloaded contact page. Ultimately everyone will have their own contact page in mind, but for the purpose of this demo website, I put together a sample contact page and form using basic HTML, inline columns, and a forms plugin. This form is not active, but is here to represent one of many layout possibilities available to you.

Our Office

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus eros vitae est bibendum lobortis mattis nibh ornare. Fusce at eros dui.

Telephone: (555) 555-1234
Fax: (555) 555-5678

Address
55555 Your Street,
Vancouver, British Columbia
Canada V5E 4M3

Contact Form

[contact-form-7 404 "Non trouvé"]

*** Contact Form 7 Form Code ***

Your Name (required)
[text* your-name 0x class:input-large]
Your Email (required)
[email* your-email 0x class:input-large]
Subject
[text your-subject 0x class:input-large]
Your Message
[textarea textarea-714 0x class:input-xxlarge]
[submit « Submit Comment »]

*** 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*** Front Page Image Boxes ***

This is a snippet from the live demo site of Celestial Reloaded for one of the boxed images with content:

responsive

Fully Responsive

Celestial is a fully responsive WordPress theme for you to enjoy viewing your website in your favourite mobile device. I’ve incorporated the popular Twitter Bootstrap framework to give you more flexibility whether you are on a desktop or an iPhone.

*** 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.*** Individual ***
    image 3

    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

    *** Group ***

    • image 3

      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

    • image 2

      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

    • image1

      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.

    *** List Colours ***
    Add these classes of choice to your

      • tag:

    * default colour is grey

    red
    blue
    green
    yellow

    Example:

    *** 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

    ***Meet the Team page Snippet ***

    Pages Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis commodo lectus, ut volutpat felis consectetur sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Aliquam erat volutpat. Etiam in nulla ac diam ultricies placerat eget luctus quam. Sed et mi eget nisl viverra pulvinar. Maecenas rutrum dictum leo nec gravida. Etiam sit amet nisl sed orci consequat euismod in nec augue dignissim.

    • image 3

      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

    • image 2

      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

    • image1

      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

    *********** Adding a second Team Row *************

    To add another row of team members, copy and paste the code above starting with this:

    Plus everything in this container as you see above

    *** 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!

    • Lightbox Image
    • Lightbox Image
    • Lightbox Image
    • Lightbox Image

    *** 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 = 12If 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.

          • Lightbox Image
          • Lightbox Image
          • Lightbox Image
          • Lightbox Image

          **** Spotlight ****

          data-spotlight= »on »

          *** Light Box ***

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