Playing with Theme Formatting

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>
D
ropcaps work like this. This is a red one. I am adding text here to make it long enough to wrap to see if the whole of the additional text is indented.
D
ropcaps work like this. This is a blue one. I am adding text here to make it long enough to wrap to see if the whole of the additional text is indented.
D
ropcaps work like this. This is a grey one. I am adding text here to make it long enough to wrap to see if the whole of the additional text is indented.
D
ropcaps work like this. This is a green one. I am adding text here to make it long enough to wrap to see if the whole of the additional text is indented.
D
ropcaps work like this. This is a yellow one. I am adding text here to make it long enough to wrap to see if the whole of the additional text is indented.

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>
Column 1 of 3 uneven columns, span7. This is a bit more than half the screen, technically seven twelfths of the page wide. That’s pretty wide, when you think about it. As long as they add up to 12, they don’t have to be the same size!
Column 2 of 3 uneven columns, span1. This one is really, really skinny!!
Column 3 of 3 uneven columns, span4. This is one third the width of the page. It’s a very nice width.

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
  1. Item 1
    1. Item 1-1
    2. Item 1-2
    3. Item 1-3
  2. Item 2
    1. Item 2-1
    2. Item 2-2
    3. Item 2-3
  3. Item 3
  4. Item 4
class=”decimal-leading-zero”
  1. Item 1
    1. Item 1-1
    2. Item 1-2
    3. Item 1-3
  2. Item 2
    1. Item 2-1
    2. Item 2-2
    3. Item 2-3
  3. Item 3
  4. Item 4
class=”upper-alpha”
  1. Item 1
    1. Item 1-1
    2. Item 1-2
    3. Item 1-3
  2. Item 2
    1. Item 2-1
    2. Item 2-2
    3. Item 2-3
  3. Item 3
  4. Item 4
class=”lower-alpha”
  1. Item 1
    1. Item 1-1
    2. Item 1-2
    3. Item 1-3
  2. Item 2
    1. Item 2-1
    2. Item 2-2
    3. Item 2-3
  3. Item 3
  4. 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
  1. Item 1
    1. Item 1-1
    2. Item 1-2
      1. Item 1-2-1
      2. Item 1-2-2
    3. Item 1-3
  2. Item 2
    1. Item 2-1
      1. Item 2-1-1
      2. Item 2-1-2
    2. Item 2-2
    3. Item 2-3
  3. Item 3

Buttons

<button class="btn BUTTON-COLOR BUTTON-SIZE">Button</button>
btn-large
No class specification
btn-small
btn-mini
No class
btn-blue
btn-taupe
btn-green
btn-yellow
btn-red
btn-dark
btn-link

These styles work for Links too!

<A CLASS="btn btn-large btn-blue" HREF="https://www.spurgeonwoods.com">SpurgeonWoods.com</A>

SpurgeonWoods.com

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>