info@entebbejunior.com       Tel: +256 414 320558

Content Styling

You can create some beautiful content by using some simple HTML elements. The Gantry Theme Framework offers some neat styles for all HTML elements and a great set of CSS classes to style your content. Basic HTML is very easy to learn and this small guide shows you how to use all styles provided by the Gantry Framework.

Text-Level Semantics


H1 Text

H2 Text

H3 Text

H4 Text

H5 Text
H6 Text

Here is a short demonstration of text-level semanticts. The <p> element creates a new paragraph. It will have some space before and after itself. To turn your text into hypertext just use the <a> element.

You can emphasize text using the <em> element or to imply any extra importance the <strong> element. Highlight text with no semantic meaning using the <mark> element. Markup document changes like inserted or deleted text with the <del> element or <ins> element. To define an abbreviation use the <abbr> element and to define a definition term use the <dfn> element.

Use the <small> element for side comments and small print.

List Examples


There are several list examples that you can use in your design just apply a css class to the UL tag and you will have list styled. There are currently 6 list styles available:

Example Line List
  • Sample list item
  • Sample list item
  • Sample list item

<ul class="line"> ... </ul>

Example Zebra List
  • Sample list item
  • Sample list item
  • Sample list item

<ul class="zebra"> ... </ul>

Example Check List
  • Sample list item
  • Sample list item
  • Sample list item
  • Sample list item

<ul class="check"> ... </ul>

Example Plus List
  • Sample list item
  • Sample list item
  • Sample list item

<ul class="plus"> ... </ul>

Example Minus List
  • Sample list item
  • Sample list item
  • Sample list item

<ul class="minus"> ... </ul>

Example Asterisk List
  • Sample list item
  • Sample list item
  • Sample list item

<ul class="asterisk"> ... </ul>


Example of Unordered List
  • Premium WordPress and Joomla Templates
  • Fast and Slick Theme Framework
  • For Web and Print Projects
  1. <ul>
  2. <li>Premium WordPress and Joomla Templates</li>
  3. <li>Fast and Slick Theme Framework</li>
  4. <li>For Web and Print Projects</li>
  5. </ul>

Example of Ordered List
  1. Premium WordPress and Joomla Templates
  2. Fast and Slick Theme Framework
  3. For Web and Print Projects
  1. <ol>
  2. <li>Premium WordPress and Joomla Templates</li>
  3. <li>Fast and Slick Theme Framework</li>
  4. <li>For Web and Print Projects</li>
  5. </ol>


Description

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
  1. <dl class="dl-horizontal">
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.

Quotations


Inline quotations can be defined by using the <q> element.

The <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.

Someone famous Source Title

  1. <blockquote>
  2. <p>The &lt;blockquote&gt; element defines a long quotation which ...</p>
  3. <small>Someone famous <cite title="Source Title">Source Title</cite></small>
  4. </blockquote>

The <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.

Someone famous Source Title

  1. <blockquote class="pull-right">
  2. <p>The &lt;blockquote&gt; element defines a long quotation which ...</p>
  3. <small>Someone famous <cite title="Source Title">Source Title</cite></small>
  4. </blockquote>
  5. <div class="clear"></div>

Code


To define a short inline computer code use the <code> element.

For a larger code snippet use the <pre class="prettyprint linenums"> element which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.

  1. pre {
  2. margin: 15px 0;
  3. padding: 10px;
  4. font-family: "Courier New", Courier, monospace;
  5. font-size: 12px;
  6. line-height: 18px;
  7. white-space: pre-wrap;
  8. }

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

Buttons


Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

Button class=”" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-outline btn-outline-invert Alternate black outline button, if you want it to be white erase the “btn-outline-invert”
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-huge, .btn-large, .btn-small, or .btn-mini for additional sizes.





Dividers



  1. <hr/>


  1. <hr class="dotted"/>


  1. <hr class="hr-1"/>


  1. <hr class="hr-2"/>


  1. <hr class="hr-3"/>


  1. <hr class="hr-4"/>


  1. <hr class="hr-5"/>


  1. <hr class="hr-6"/>


  1. <hr class="hr-7"/>


  1. <hr class="hr-8"/>


  1. <hr class="hr-9"/>


  1. <hr class="hr-10"/>

Simple Notices


Use the <p> tag with .success, .warning, .info or .error classes.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="success">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="info">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="warning">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="error">...</p>

Addresses


  1. <address>
  2. <strong>Twitter, Inc.</strong><br>
  3. 795 Folsom Ave, Suite 600<br>
  4. San Francisco, CA 94107<br>
  5. <abbr title="Phone">P:</abbr> (123) 456-7890
  6. </address>
  7. <address>
  8. <strong>Full Name</strong><br>
  9. <a href="mailto:#">This email address is being protected from spambots. You need JavaScript enabled to view it. </a>
  10. </address>

Advanced Notices


Architecture is both the process and product of planning

Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

  1. <div class="notice text-center">
  2. <h3 class="notice-title"> . . . . </h3>
  3. <p class="remove-margin notice-subtitle"> . . . . </p>
  4. </div>

Architecture is both the process and product of planning

Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

  1. <div class="notice wt-border text-center"> . . . </div>

Architecture is both the process and product of planning

Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

  1. <div class="notice drop-shadow lifted text-center"> . . . </div>

Architecture is both the process and product of planning

Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

  1. <div class="notice drop-shadow raised text-center"> . . . </div>

Architecture is both the process and product of planning

Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

  1. <div class="notice drop-shadow curved text-center"> . . . </div>

Architecture is both the process and product of planning

Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

  1. <div class="notice drop-shadow curved curved-vt-2 text-center"> . . . </div>

Architecture is both the process and product of planning

Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

  1. <div class="notice drop-shadow curved curved-hz-1 text-center"> . . . </div>

Architecture is both the process and product of planning

Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

  1. <div class="notice drop-shadow curved curved-hz-2 text-center"> . . . </div>