Style Guide


Headings

Styling is provided for headings from <h1> to <h4>. For the purpose of articles you should use only the <h3> to <h4> for sub-headings.

h1

h2

h3

h4

Lists

Basic styling is provided for ordered and unordered lists. Use where applicable.

    Unordered List

  • Lions
  • Tigers
  • Bears

    Ordered List

  1. First Instruction
  2. Second Instruction
  3. Third Instruction

Block Quotes

A block quote should contain at least one block level element. cite should be used to properly give credit to the source.

<blockquote cite="http://www.url-citing-your-source.com">
  <p>A block quote should contain at least one block level element. cite should be used to properly give credit to the source.</p>
</blockquote>

Top


Inside of blog posts you have access to a basic four column grid for laying out content. You will need to add html tags and classes to utilize it.

Each row will only allow for two grid columns and each row also should be wrapped with a container div <div class="clearfix">.

Below are a few possible combinations of how you can utilize the grid. Also keep in mind that columns stack as block level elements on smaller viewports based on the css written for seochat.

Quarter Column
Three Quarter Column
<div class="clearfix">
  <div class="col-quarter example text-center">Quarter Column</div>
  <div class="col-three-quarter example text-center">Three Quarter Column</div>
</div>
Third Column
Two Third Column
<div class="clearfix">
  <div class="col-third example text-center">Third Column</div>
  <div class="col-two-third example text-center">Two Third Column</div>
</div>
Half Column
Half Column
<div class="clearfix">
  <div class="col-half example text-center">Half Column</div>
  <div class="col-half example text-center">Half Column</div>
</div>

Top


The following is a list of the color classes and their meanings for seochat. Each color class has a color object, background color object, and a light color background object. Please keep in mind when styling content for seochat that each color relates to a specific kind of content on seochat. Use accordingly.

seochat Base Color Objects

The accent color used in the seochat logo. Use these objects when you want to highlight or emphasize seochat branding

  • Base color object. Use class .basecolor
  • Background color object for base color. Use class .basecolor-bg
  • Light Version for background color object of base color. Use class .basecolor-bg-light

Note: Use .accent-type to make type white and provide better contrast when a background object is used on an element where type will be inside of it. Use with discretion!


Forums Color Objects

Color used to signify that content is forums related. Use these objects when you would like to highlight the forums.

  • Forums color object. Use class .forums
  • Background color object for forums color. Use class .forums-bg
  • Light Version for background color object of forums color. Use class .forums-bg-light

Color used to signify that content is Social Media related. Use these objects when you would like to highlight seochat and it’s relationship with social media.

  • Social color object. Use class .social
  • Background color object for social color. Use class .social-bg
  • Light Version for background color object of social color. Use class .social-bg-light

Article Color Objects

Color used to signify that content is related to seochat Articles. Use these objects when you would like to highlight seochat Articles.

  • Article color object. Use class .articles
  • Background color object for article color. Use class .articles-bg
  • 85% transparent version for background color object of article color. Use class .articles-bg-light-small
  • 50% transparent version for background color object of article color. Use class .articles-bg-light
  • 5% transparent version for background color object of article color. Use class .articles-bg-light-extra

Top


Featured Images

The figure to the right has the correct native size for all featured images. Featured images should be sized to 730px by 488px. All images should be compressed before uploaded to the wordpress admin panel. Below are some online tools for compression.

default featured image

Top


Social Media Links

If you would like to add social media links inside of your post there is markup you can add that will display icons as links for Facebook, Google +, and Twitter. Use the example below to create social links in your post.

<ul class="inline-social text-center">
  <li><a class="twitter fontawesome"  href="https://twitter.com/your-twitter-handle"><span class="screen-reader-text">Twitter</span></a></li>
  <li><a class="facebook fontawesome" href="https://www.facebook.com/your-facebook-url"><span class="screen-reader-text">Facebook</span></a></li>
  <li><a class="google fontawesome" href="https://plus.google.com/your-google+url"><span class="screen-reader-text">Google +</span></a></li>
</ul>

Top


For code examples you are provided with markup for syntax highlighting. Wrap any code in <pre class="prettyprint linenums lang-html"></pre> to add syntax highlighting to a block. Make sure to change your opening and closing tags to HTML entities to ensure your block displays correctly.

Top