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:
View More
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.
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>
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>
This is italic<i>title</i>
This is underlined text<u>title</u>
- Item here
- Item here
- Item here
- Item here
<ul><li>Item here</li><li>Item here</li></ul>
- Item here
- Item here
- Item here
- Item here
<ol><li>Item here</li><li>Item here</li></ol>
<a href="#" class="red-link">Link Here</a><a href="#"><img src="sites/files/u1/arrow-button.gif" /></a><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>
<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>
<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>
This is a blockquote
<blockquote>This is a blockquote</blockquote>
<div class="quote">Coment<span>Author – company</span></div>
| 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 | ||
|
||
| tr class="odd" | ||
| tr class="even" | ||
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)
