Site Style Guide

comments | Print this pagePrint | Email this pageShare

WYSIWYG/HTML Legend:

 

Styles

noborder-right

This class should be applied to images to align themto the right without a border.

noborder-left

This class is exactly the same as the noborder-rightclass but will align the image to the left.

imgborder-right

This class should be applied to images to align themto the right with a 1 pixel grey border.

imgborder-left

This class is exactly the same as the imgborder-rightclass but will align the image to the left.

quote

This class should be applied to text.

It will enlarge the text and apply a "quote" graphic to the top left corner of the text (see example below)

fjslkfjsd idjfsldjf slks djf sldjfsjfijfsijfsok fo kfsokf sfjlskf sijfkl sfjefijslk elsjfekls

quote-right

Exactly the same the quote class but the quote will bealigned/floated to the right and the width of the quote area is restricted to 200 pixels.

quote-left

Exactly the same as the quote-right class but the quote is aligned/floated to the left.

more-link

This class should be applied to links and to display the following style:

dotted

This should be applied to text and will output a lightgrey dotted border at the bottom of text. Useful as a separator for element blocks.

clear

This class can be ignored as it's only needed for sitedevelopers when laying out content.

mce_plugin_drupalbreak_break and mce_plugin_drupalbreak_pagebreakshould be ignored.

NOTE: For any of these styles to showcorrectly you must select the "full HTML" input format, which is shown belowHTML compatible textareas.


Headings

Heading 1

<h1>title</h1>

Heading 2

<h2>title</h2>

Heading 3

<h3>title</h3>

Heading 4

<h4>title</h4>
Heading 5
<h5>title</h5>
Heading 6
<h6>title</h6>
Paragraph

This is a paragraph text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce aliquet mi eget dolor. Nulla facilisi. Proin dignissim. Nam cursus. Vivamus non lorem et lacus scelerisque porta. Nullam tincidunt tortor. Integer mauris arcu, iaculis non, pretium ut, varius id, metus.

<p>Paragraph Text</p>
Text VariantsThis is bold<b>title</b>
This is italic<i>title</i>
This is underlined text<u>title</u>
LinksThis is a link<a href="http://linkname.com">Link Name</a>
CaptionThis is a caption, usually used below a figure<cite>This is a caption</cite>
Command TextHere is the command text, usually used to explain something in a different color<i>Command Text</i>
Cutline TextHere is a cutline text, usually used for a short explanation of an article <b>Text here</b>
Separating LineThis is a separating line<hr />
Superscripted TextThis is asuperscripted textThis is a<sup>superscripted text</sup>
subscripted TextThis is asubscripted textThis is a<sub>subscripted text</sub>
Un-ordered list
  • Item here
  • Item here
  • Item here
  • Item here
<ul><li>Item here</li><li>Item here</li></ul>
ordered list
  1. Item here
  2. Item here
  3. Item here
  4. Item here
<ol><li>Item here</li><li>Item here</li></ol>
link with arrow buttonLink Here <a href="/" class="red-link">Link Here</a><a href="/"><img src="/sites/files/u1/arrow-button.gif" /></a>
Blog Entry Link

Test Blog 1

April 23, 2008 by admin
Sed enim. Pellentesque sapien. Phasellus in urna a magna accumsan ultricies. Cras eu sem. Pellentesque blandit metus ac justo. Integer placerat nisi ac pede. Aliquam erat volutpat. Aenean ullamcorper, ipsum nec tristique aliquam, massa magna mollis lorem, tempus lobortis tellus arcu ac purus. Vivamus in felis.
<div class="view view-blog"><div class="view-content view-content-blog"><div id="node-24" class="node blog clear-block"><div id="blog-teaser"><h3><a title="Test Blog 1" href="/blog/2008/04/test-blog-1">Test Blog 1</a></h3><div class="blog-content clear"><div class="blog-username">April 23, 2008 by <a title="View user profile." href="/users/admin">admin</a></div><div class="blog-image"><a href="/blog/2008/04/test-blog-1"><img src="/sites/files/u1/couple-placeholder.jpg" class="left" /></a></div><div class="blog-teaser clear"> Sed enim. Pellentesque sapien. Phasellus in urna a magna accumsan ultricies. Cras eu sem. Pellentesque blandit metus ac justo. Integer placerat nisi ac pede. Aliquam erat volutpat. Aenean ullamcorper, ipsum nec tristique aliquam, massa magna mollis lorem, tempus lobortis tellus arcu ac purus. Vivamus in felis. </div><div class="teaser-comment-count"><span><a href="/blog/2008/04/test-blog-1">2 Comments</a></span> | <span class="terms">Posted in:<ul class="links inline"><li class="first taxonomy_term_8"><a class="taxonomy_term_8" title="" rel="tag" href="/category/tags/drupal">drupal</a></li><li class="taxonomy_term_7"><a class="taxonomy_term_7" title="" rel="tag" href="/category/tags/testing">testing</a></li><li class="last taxonomy_term_4"><a class="taxonomy_term_4" title="" rel="tag" href="/category/tags/branding">branding</a></li></ul></span></div></div></div></div></div>
Articles or latest discussions
<div class="blog-recent"><div class="view-field view-data-title"><h3><a href="/blog/2008/04/test-blog-1">Article Title</a></h3></div><div class="username">by<a title="View user profile." href="/users/admin">admin</a> on April 23, 2008</div><div class="blog-teaser"> Sed enim. Pellentesque sapien. </div><div class="blog-bottom"><div class="blog-comment-count"><a href="/blog/2008/04/test-blog-1">2 Comments</a></div></div></div>
nested sidebar menus<div id="left-sidebar"><div id="block-user-1" class="clear-block block block-user"><h2>admin</h2><div class="content clear"><ul class="menu"><li class="collapsed"><a href="/node/add">Create content</a></li><li class="leaf"><a href="/users/admin">My account</a></li><li class="collapsed"><a href="/admin">Administer</a></li><li class="leaf"><a href="/logout">Log out</a></li></ul></div></div></div>
blockquote
This is a blockquote
<blockquote>This is a blockquote</blockquote>
This is a pull quote
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nibh. Maecenas facilisis ligula eget ante.----- Mick Jagger - Roling Stones Co.
<div class="quote">Coment<span>Author - company</span></div>
Tables
Header (th tag)
row 1 column 1 row 1 column 2 row 1 column 3
row 2 column 1 row 2 column 2 row 2 column 3
class="highlight" on row (tr class="highlight")
class="product" on tr tag
class="highlight_bullet" on td tag


(class="head")
row 1 column 1 row 1 column 2 row 1 column 3
row 2 column 1 row 2 column 2 row 2 column 3
class="highlight" on row
class="product" on tr tag Product Link
  • class="highlight_bullet" on td tag
  • class="highlight_bullet" on td tag
tr class="odd"
tr class="even"
images

Some text here to check it out how shuld a image appear in left side with text lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nibh. Maecenas facilisis ligula eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nibh. Maecenas facilisis ligula eget ante.

<img src="/sites/files/u1/couple-placeholder.jpg" class="left" /><p>text here</p>





<img src"/sites/files/u1/couple-placeholder" class="right" /><p>text here</p>





<img src="/sites/files/u1/couple-placeholder.jpg" class="left-noborder" /><p>text here</p>

Specific Guidelines:

All links should be set to open in the same window as a general rule.For internal hyperlinks, add everything on the URL immediately following the .com (ie. /support/style-guide)