Overview

Use this document as a way to quickly understand the structure of the
Dif Broker website. It explains styles and elements used in theme.

 

The default content editor is capable of doing all the basic text editing. But to add Dif Broker specific customized elements you need to alter the HTML code generated by content editor. To edit generated code click on source button on your content editor.

Content Editor in Firefox and Below Internet Explorer.

 

Styles and elements used in theme are explained below. Before going further some points to consider.

Do not copy & paste source

Never copy and paste source code or formatted text from other websites to content editor. It can break the entire webpage and disturb look & feel of website.

Maintain look & feel

Maintain the look and feel of the Dif Broker website. Avoid random colors and styles which are not consistent with Dif Broker website's theme.

 

Dif Broker website color palette: Easily make use of two color schemes, grayscale and Dif colors. Grayscale colors provide quick access to commonly used shades of black while Dif colors include various colors choosen for Dif Broker website.

@gray-darker:  #222
@gray-dark:    #333
@gray:         #555
@gray-light:   #777
@gray-lighter: #eee
.bg-dif-orange:  #fb7625
.bg-dif-green:   #379393
.bg-dif-khaki:   #f4f4f0

 

All HTML headings, <h2> through <h6>, are available. .h2 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Headings

h2. Page heading

h3. Section heading

h4. Sub-Section heading

h5. Small heading
h6. Smaller heading
<h2>h2. Page heading</h2>
<h3>h3. Section heading</h3>
<h4>h4. Sub-Section heading</h4>
<h5>h5. Small heading</h5>
<h6>h6. Smaller heading</h6>

Secondary header

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h2. Page heading Secondary text

h3. Section heading Secondary text

<h2>h2. Page heading <small>Secondary text</small></h2>
<h3>h3. Section heading <small>Secondary text</small></h3>

Helper classes

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
<a href="#">Go to link <span class="glyphicon glyphicon-chevron-right"></span></a>

Glyphicons

Use below available icons to emphasize links or text.

  • glyphicon glyphicon-plus
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-search
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-earphone

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

<a href="#" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-download-alt"></span> Download File
</a>

Lists

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

Checked

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Facilisis in pretium nisl aliquet
<ul class="list-unstyled  list-checked">
  <li>...</li>
</ul>

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language">HTML</abbr>

 

Use any of the available button classes to quickly create a styled button.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Dif button orange -->
<button type="button" class="btn btn-dif">Open Account</button>

<!-- Dif button green -->
<button type="button" class="btn btn-dif-green">Open Account</button>

Anchor element

<a href="#" class="btn btn-dif-green" role="button">Primary link</a>
<a href="#" class="btn btn-dif-green disabled" role="button">Link</a> 

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

<a href="#" class="btn btn-dif btn-lg">Open Account</a>
<a href="#" class="btn btn-dif">Open Account</a>
<a href="#" class="btn btn-dif btn-sm">Open Account</a>
<a href="#" class="btn btn-dif btn-xs">Open Account</a>

 

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

Data Tabel

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table data">
  ...
</table>

 

Blockquotes

For quoting blocks of content from another source within your document.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Special Callouts

Display special attention seeking information with special callouts.

Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="bs-callout bs-callout-default">
<strong>Note: </strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</div>

<div class="bs-callout bs-callout-warning">
<strong>Note: </strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</div>

<div class="bs-callout bs-callout-info">
<strong>Note: </strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</div>

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
<div class="well">...</div>
Look, I'm in a small well!
<div class="well well-sm">...</div>
Look, I'm in a smaller well!
<div class="well well-sm small">...</div>

 

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h3>-<h6> with a .panel-title class to add a pre-styled heading.

Panel heading without title
Panel content

Panel title

Panel content
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

 

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Four directions

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

 

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Live demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Four directions

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>