Sean Wallbridge
Some time ago, I had Luke (Thanks Luke) put together a web part page with 3 content editor web parts. Then I had him create a header for every base/included SharePoint 2010 Wiki html style so that we could then work on styling each of the elements and seeing them all on one palette. I figured I’d share that effort here, in case it helps someone save some time in the future.
What it Looks Like
The following is the current base styles we have set for our internal Intranet, based on our Master Page and CSS implemented. Note that other than adding 4 more Callouts (nice job Keith, Stylin!), we haven’t needed more than the base styles Microsoft provides in the v4.master page/core styles.
How To Use The Mumbo Jumbo Below
So the idea is that you create a basic web part page. Add to it three content editor web parts, one per style set (so Styles, Markup Styles and Table Styles) and then copy the html code snippets provided below into the appropriate content editor web parts so you can see the current styles as they exist today. Then start working away at your CSS to change it to suit and see your results on one single “palette” page.
And Here’s the Styles and HTML all ready to be pasted
Styles
Paste the HTML from below into the first content editor web part, called ‘STYLES’
<p><span class="ms-rteStyle-Normal"></span></p>
<p class="ms-rteStyle-Normal"><span>Normal</span></p>
<p><span class="ms-rteStyle-Highlight">Highlight</span></p>
<p class="ms-rteStyle-Byline"><span>By Line</span></p>
<p class="ms-rteStyle-Tagline"><span>Tag Line</span></p>
<p class="ms-rteStyle-Comment"><span>Comment</span></p>
<p class="ms-rteStyle-References"><span>References</span></p>
<p class="ms-rteStyle-Caption"><span>Caption</span></p>
<p><span class="ms-rteStyle-Byline"></span> </p>
Markup Styles
Paste the HTML from below into the first content editor web part, called ‘MARKUP STYLES’
<h1 class="ms-rteElement-H1">Heading 1</h1>
<h2 class="ms-rteElement-H2">Heading 2</h2>
<h3 class="ms-rteElement-H3">Heading 3</h3>
<h4 class="ms-rteElement-H4">Heading 4</h4>
<h1 class="ms-rteElement-H1B">Colored Heading 1</h1>
<h2 class="ms-rteElement-H2B">Colored Heading 2</h2>
<h3 class="ms-rteElement-H3B">Colored Heading 3</h3>
<h4 class="ms-rteElement-H4B">Colored Heading 4</h4>
<p> </p>
<p>Horizontal Rule</p>
<hr/>
<p class="ms-rteElement-P"> </p>
<p class="ms-rteElement-P">Paragraph</p>
<p class="ms-rteElement-P"><br type="_moz"/></p>
<p class="ms-rteElement-P">Callout 1<br type="_moz"/></p>
<div class="ms-rteElement-Callout1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, elementum et molestie sit amet, lobortis sit amet elit. In mi felis, tempor blandit dapibus vel, posuere a quam. Sed vulputate odio et neque egestas quis lobortis orci gravida. Donec nisi massa, malesuada ac commodo id, feugiat sed velit. </p></div>
<p>Callout 2<br type="_moz"/></p>
<div class="ms-rteElement-Callout2" style="text-align: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, elementum et molestie sit amet, lobortis sit amet elit. In mi felis, tempor blandit dapibus vel, posuere a quam. Sed vulputate odio et neque egestas quis lobortis orci gravida. Donec nisi massa, malesuada ac commodo id, feugiat sed velit. </div>
<div style="text-align: left"> </div>
<p> Callout 3</p>
<div class="ms-rteElement-Callout3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, elementum et molestie sit amet, lobortis sit amet elit. In mi felis, tempor blandit dapibus vel, posuere a quam. Sed vulputate odio et neque egestas quis lobortis orci gravida. Donec nisi massa, malesuada ac commodo id, feugiat sed velit. </div>
<p> Callout 4</p>
<div class="ms-rteElement-Callout4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, elementum et molestie sit amet, lobortis sit amet elit. In mi felis, tempor blandit dapibus vel, posuere a quam. Sed vulputate odio et neque egestas quis lobortis orci gravida. Donec nisi massa, malesuada ac commodo id, feugiat sed velit. </div>
<p> Callout 5</p>
<div class="ms-rteElement-Callout5"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, elementum et molestie sit amet, lobortis sit amet elit. In mi felis, tempor blandit dapibus vel, posuere a quam. Sed vulputate odio et neque egestas quis lobortis orci gravida. Donec nisi massa, malesuada ac commodo id, feugiat sed velit. </p></div>
<p> <br type="_moz"/>Callout 6</p>
<div class="ms-rteElement-Callout6" style="text-align: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, elementum et molestie sit amet, lobortis sit amet elit. In mi felis, tempor blandit dapibus vel, posuere a quam. Sed vulputate odio et neque egestas quis lobortis orci gravida. Donec nisi massa, malesuada ac commodo id, feugiat sed velit. </div>
<div style="text-align: left"> </div>
<p> Callout 7</p>
<div class="ms-rteElement-Callout7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, elementum et molestie sit amet, lobortis sit amet elit. In mi felis, tempor blandit dapibus vel, posuere a quam. Sed vulputate odio et neque egestas quis lobortis orci gravida. Donec nisi massa, malesuada ac commodo id, feugiat sed velit. </div>
<p><br type="_moz"/>Callout 8</p>
<div class="ms-rteElement-Callout8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, elementum et molestie sit amet, lobortis sit amet elit. In mi felis, tempor blandit dapibus vel, posuere a quam. Sed vulputate odio et neque egestas quis lobortis orci gravida. Donec nisi massa, malesuada ac commodo id, feugiat sed velit. </div>
Table Styles
Paste the HTML from below into the first content editor web part, called ‘TABLE STYLES’
<p>Default Table Style - Light</p>
<table width="100%" class="ms-rteTable-default" cellspacing="0" style="font-size: 1em"><tbody><tr class="ms-rteTableHeaderRow-default"><th class="ms-rteTableHeaderFirstCol-default"></th>
<th class="ms-rteTableHeaderOddCol-default"></th>
<th class="ms-rteTableHeaderEvenCol-default"></th></tr>
<tr class="ms-rteTableOddRow-default"><th class="ms-rteTableFirstCol-default"></th>
<td class="ms-rteTableOddCol-default"></td>
<td class="ms-rteTableEvenCol-default"></td></tr></tbody></table>
<p> </p>
<p>Table Style 1 - Clear</p>
<p> </p>
<table width="100%" class="ms-rteTable-0" cellspacing="0" style="font-size: 1em"><tbody><tr class="ms-rteTableHeaderRow-0"><th class="ms-rteTableHeaderFirstCol-0"></th>
<th class="ms-rteTableHeaderOddCol-0"></th>
<th class="ms-rteTableHeaderEvenCol-0"></th></tr>
<tr class="ms-rteTableOddRow-0"><th class="ms-rteTableFirstCol-0"></th>
<td class="ms-rteTableOddCol-0"></td>
<td class="ms-rteTableEvenCol-0"></td></tr></tbody></table>
<p> </p>
<p>Table Style 2 - Light Banded</p>
<p> </p>
<table width="100%" class="ms-rteTable-1" cellspacing="0" style="font-size: 1em"><tbody><tr class="ms-rteTableHeaderRow-1"><th class="ms-rteTableHeaderFirstCol-1"></th>
<th class="ms-rteTableHeaderOddCol-1"></th>
<th class="ms-rteTableHeaderEvenCol-1"></th></tr>
<tr class="ms-rteTableOddRow-1"><th class="ms-rteTableFirstCol-1"></th>
<td class="ms-rteTableOddCol-1"></td>
<td class="ms-rteTableEvenCol-1"></td></tr></tbody></table>
<p> </p>
<p>Table Style 3 - Medium Two Tones</p>
<p> </p>
<table width="100%" class="ms-rteTable-6" cellspacing="0" style="font-size: 1em"><tbody><tr class="ms-rteTableHeaderRow-6"><th class="ms-rteTableHeaderFirstCol-6"></th>
<th class="ms-rteTableHeaderOddCol-6"></th>
<th class="ms-rteTableHeaderEvenCol-6"></th></tr>
<tr class="ms-rteTableOddRow-6"><th class="ms-rteTableFirstCol-6"></th>
<td class="ms-rteTableOddCol-6"></td>
<td class="ms-rteTableEvenCol-6"></td></tr></tbody></table>