This page requires the Celestial Lite theme, which may not be the current theme of this site!
This is a PHP Snippet. version = pro.
I am currently messing with the Celestial Lite theme from StyledThemes.com. This is based on http://demo.styledthemes.com/celestial-free/.
Defined Styles
<P class=”st-cta-title”>Paragraph, Title Style, Centered</P>
Paragraph, Title Style, Centered
Heading Styles
<H1>Heading H1</H1>
Heading H1
<H2>Heading H2</H2>
Heading H2
<H3>Heading H3</H3>
Heading H3
<H4>Heading H4</H4>
Heading H4
<H5>Heading H5</H5>
Heading H5
<H6>Heading H6</H6>
Heading H6
Block Quote Styles
<blockquote class=”quote-grey”>Block Quote</blockquote>
Block Quote – Grey
<blockquote class=”quote-blue”>Block Quote</blockquote>
Block Quote – Blue
<blockquote class=”quote-green”>Block Quote</blockquote>
Block Quote – Green
<blockquote class=”quote-red”>Block Quote</blockquote>
Block Quote – Red
<blockquote class=”quote-yellow”>Block Quote</blockquote>
Block Quote – Yellow
<blockquote>Block Quote</blockquote>
Block Quote
<blockquote class=”pull-right pull-green”><p>Block Quote – Green</p></blockquote> <P>This is normal text. The block quote should be over to the right, using the “pull-right” style.</P>
Block Quote – Green
This is normal text. The block quote should be over to the right, using the “pull-right” style.
<blockquote class=”pull-left pull-left-yellow”><p>Block Quote – Yellow <cite title=”This is a title”>This is a title.</cite></p></blockquote> <P>This is normal text. The block quote should be over to the left, using the “pull-left” style.</p>
Block Quote – Yellow
This is a title.
This is normal text. The block quote should be over to the left, using the “pull-left” style.
It appears that “pulls” are only available in grey, not in the other colors available to normal block quote styles.
Drop Caps
<div class="dropcap dropcap-red">D</div><div class="dropcap-indent">ropcaps work like this.</div>
Working with Columns
<div class="row-fluid"> <div class="span6" style="text-align: left;"> (text goes here) </div> <div class="span6" style="text-align: right;"> (text goes here) </div> </div>
Column 1 of 2 even columns. This is the result of the “span6” tag, which gives you half the screen.
Column 2 of 2 even columns. This is also the result of a “span6” tag, which gives you half the screen.
<div class="row-fluid"> <div class="span4" style="text-align: left;"> (text goes here) </div> <div class="span4" style="text-align: center;"> (text goes here) </div> <div class="span6" style="text-align: right;"> (text goes here) </div> </div>
Column 1 of 3 even columns. This is an example of “span4”, which gives you one third of the screen. This text is aligned left.
Column 2 of 3 even columns. This is an example of “span4”, which gives you one third of the screen. This text is aligned center.
Column 3 of 3 even columns. This is an example of “span4”, which gives you one third of the screen. This text is aligned right.
<div class="row-fluid"> <div class="span7" style="text-align: left;"> (text goes here) </div> <div class="span1" style="text-align: center;"> (text goes here) </div> <div class="span4" style="text-align: right;"> (text goes here) </div> </div>
Lists
Unordered Lists
<ul class="XXXXX">(list items)</ul>
Ordered Lists
<ol class="XXXXX">(list items)</ol>
Default
- Item 1
- Item 1-1
- Item 1-2
- Item 1-2-1
- Item 1-2-2
- Item 1-3
- Item 2
- Item 2-1
- Item 2-2
- Item 3
class=”square”
- Item 1
- Item 1-1
- Item 1-2
- Item 1-3
- Item 2
- Item 2-1
- Item 2-2
- Item 2-3
- Item 3
- Item 4
Default
- Item 1
- Item 1-1
- Item 1-2
- Item 1-3
- Item 2
- Item 2-1
- Item 2-2
- Item 2-3
- Item 3
- Item 4
class=”decimal-leading-zero”
- Item 1
- Item 1-1
- Item 1-2
- Item 1-3
- Item 2
- Item 2-1
- Item 2-2
- Item 2-3
- Item 3
- Item 4
class=”upper-alpha”
- Item 1
- Item 1-1
- Item 1-2
- Item 1-3
- Item 2
- Item 2-1
- Item 2-2
- Item 2-3
- Item 3
- Item 4
class=”lower-alpha”
- Item 1
- Item 1-1
- Item 1-2
- Item 1-3
- Item 2
- Item 2-1
- Item 2-2
- Item 2-3
- Item 3
- Item 4
<ul class="list-STYLE list-COLOR">(list items)</ul>
- list-arrow1
- Item 2
- Item 3
- Item 4
- list-arrow1 list-red
- Item 2
- Item 3
- list-arrow2
- Item 2
- Item 3
- Item 4
- list-arrow2 list-yellow
- Item 1-2
- Item 1-3
- list-arrow3
- Item 2
- Item 3
- Item 4
- list-arrow3 list-blue
- Item 2
- Item 3
- list-arrow4
- Item 2
- Item 3
- Item 4
- list-arrow4 list-green
- Item 2
- Item 3
- list-circles
- Item 2
- Item 3
- Item 4
- list-circles list-red
- Item 1-2
- Item 1-3
- list-starburst list-yellow
- Item 2
- Item 3
- Item 4
- list-starburst list-blue
- Item 1-2
- Item 1-3
- list-checkmark list-green
- Item 2
- Item 3
- Item 4
Mixed Ordered Styles
- Item 1
- Item 1-1
- Item 1-2
- Item 1-2-1
- Item 1-2-2
- Item 1-3
- Item 2
- Item 2-1
- Item 2-1-1
- Item 2-1-2
- Item 2-2
- Item 2-3
- Item 2-1
- Item 3
Buttons
<button class="btn BUTTON-COLOR BUTTON-SIZE">Button</button>
These styles work for Links too!
<A CLASS="btn btn-large btn-blue" HREF="https://www.spurgeonwoods.com">SpurgeonWoods.com</A>
Form Element Sizing
You can attach buttons to fields!
<div class="input-append"><input class="span8" id="appendedInputButton" size="16" type="text" /><button class="btn" type="button">Go!</button></div>
<div class="input-append"> <input class="span4" id="appendedInputButtons" size="16" type="text" /><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> </div>