Thinking & Doing


Feed

I’m going to shift gears a bit from my normal posts and jump into a little bit of the nuances of SharePoint’s CSS…  SharePoint’s Rich Text Editor (RTE) is a great tool as it gives your content authors the freedom to modify the look and feel of their text.  Granted, this laizze-faire approach is okay in certain environments, and in others a bit more control is required.  One way of controlling user’s markup is to give them specific styles that they can use.  For the uninitiated, these styles live under the ‘Markup Styles’ button as shown here:

image


Of course, to make these your own, all you have to do is override the appropriate classes.  For instance, if I wanted to change Heading 2 to display in gray font, I would simply add the following class to my custom CSS (or theme, or masterpage, or content editor web part; you get the idea, just put it wherever you’re referencing your CSS)  [Also, I should note that you can match the names from SharePoint’s GUI in the CSS with the ‘-ms-name’ reference]. 

H2.ms-rteElement-H2 {color: #CCCCCC;}

Likewise, if I wanted to change ‘Colored Heading 2’ to display in red it would be:

H2.ms-rteElement-H2b {color: #FF0000;}

Seems easy and straightforward, and it’s not a trap or a trick, it’s really that easy!  However, our astute-readers will notice that when I select either of these headings, the font-size is in percent.  While that method of sizing may make perfect sense to a designer or developer, to the end user that isn’t very helpful.. How are they supposed to know what that 150% is even based off of?  Alright, so let’s go ahead and make this a nice pixel-size based font, so my class changes would be these right?

H2.ms-rteElement-H2 {font-size: 16px;}

H2.ms-rteElement-H2b {font-size:16px;}

Wrong…Silly CSS and tons of Microsoft classes everywhere.  As it would turn out, Microsoft has a bit of  a web created with these rte classes.  So to make all of the changes I’ve discussed in this post, my final code would be:

h2,
.ms-WPBody H2,
.ms-WPBody H2.ms-rteElement-H2,
.ms-rteElement-H2
{
    -ms-name:"Heading 2";
    font-size: 16px;
    font-weight: normal;
    text-align:left;
    color:#cccccc;
}
.ms-WPBody H2,
.ms-WPBody H2.ms-rteElement-H2b,
.ms-rteElement-H2b
{
    -ms-name:"Colored Heading 2";
    font-size: 16px;
    font-weight: normal;
    text-align:left;
    color:#ff0000;
}

Granted, that’s a few more selectors than you were probably expecting, but there’s quite a bit going on with all of the different CSS sheets and classes floating around out there.  You’ll also notice that this code will ‘match’ against most web parts and the use of Header classes.  This isn’t necessary to get the rte bits to work, but I included it as it will keep all of my ‘heading’ elements consistent.

image


Following a similar formula, you could also add your own classes, like ‘Heading 5’ and ‘Colored Heading 5’.  Simply copy/paste my more recent code snippet above and modify the 4’s to 5’s.  Please note, these new classes will appear at the bottom of the RTE styles list (in other words, they would display beneath Heading 4/Colored Heading 4.

SYNDICATION