Give your content authors new styles

Whilst I’ve seen other blog posts about adding new styles for publishing sites I haven’t seen it mentioned that you can also add them for use in SharePoint foundation & Office 365 content editor web parts.

For this post I’m going to concentrate on adding a new table style, though once you’ve got the hang of it, you can also create new Styles & Markup Styles by using the same principal.

To begin we’re going to be adding new table style to the following menu within the content editor web part, as you’ll see I’ve added a few extra to my site:

Content Editor Table Style

If you haven’t already done so the first step you’ll need to do is add a CSS stylesheet to your style library then register it in your master page as per one of my previous posts.

Next you need to copy and paste the following CSS into your style sheet :

/* Begin Pastol Table */
.ms-rteTable-9
{
-ms-name:"Pastol Table";
display: table;
border-collapse: separate;
border-spacing: 2px;
border:1px #EBEBEB solid;

}

.ms-rteTableHeaderRow-9 {
color: #6D6F72;

}

.ms-rteTableHeaderFirstCol-9 {
border: medium none;
background-color: #DAEFFF;
padding-right: 5px;
text-align: left;
letter-spacing: normal;
font-weight: 500;
font-size: 12pt;
padding: 5px 12px 5px 12px;
background-image:none;
color: #6D6F72;

}
.ms-rteTableHeaderLastCol-9 {
border: medium none;
background-color: #DAEFFF;
padding-right: 5px;
text-align: left;
letter-spacing: normal;
font-weight: 500;
font-size: 12pt;
padding: 5px 12px 5px 12px;
background-image:none;
color: #6D6F72;

}
.ms-rteTableHeaderOddCol-9 {
border: medium none;
background-color: #DAEFFF;
padding-right: 5px;
text-align: left;
letter-spacing: normal;
font-weight: 500;
font-size: 12pt;
padding: 5px 12px 5px 12px;
background-image:none;
color: #6D6F72;
}
.ms-rteTableHeaderEvenCol-9 {
border: medium none;
background-color: #DAEFFF;
padding-right: 5px;
text-align: left;
letter-spacing: normal;
font-weight: 500;
font-size: 12pt;
padding: 5px 12px 5px 12px;
background-image:none;
color: #6D6F72;

}
.ms-rteTableOddRow-9 {

}
.ms-rteTableEvenRow-9 {
background: #F5FAFA;
color: #797268;

}
.ms-rteTableFirstCol-9 {
font-size:8pt;
padding-left: 12px;
padding-right: 12px;
padding-top:4px;
padding-bottom:4px;

}
.ms-rteTableLastCol-9 {
font-size:8pt;
padding-left: 12px;
padding-right: 12px;
padding-top:4px;
padding-bottom:4px;
}
.ms-rteTableOddCol-9 {
font-size:8pt;
padding-left: 12px;
padding-right: 12px;
padding-top:4px;
padding-bottom:4px;

}
.ms-rteTableEvenCol-9 {
font-size:8pt;
padding-left: 12px;
padding-right: 12px;
padding-top:4px;
padding-bottom:4px;

}
.ms-rteTableFooterRow-9 {
color:white;

}
.ms-rteTableFooterFirstCol-9 {
border: medium none;
background-color: #DAEFFF;
padding-right: 5px;
letter-spacing: normal;
font-weight: 500;
font-size: 12pt;
padding: 5px 12px 5px 12px;
background-image:none;
color: #6D6F72;

}
.ms-rteTableFooterLastCol-9 {
border: medium none;
background-color: #DAEFFF;
padding-right: 5px;
text-align: left;
font-weight: 500;
font-size: 12pt;
padding: 5px 12px 5px 12px;
background-image:none;
color: #6D6F72;

}
.ms-rteTableFooterOddCol-9 {
border: medium none;
background-color: #DAEFFF;
padding-right: 5px;
letter-spacing: normal;
font-weight: 500;
font-size: 12pt;
padding: 5px 12px 5px 12px;
background-image:none;
color: #6D6F72;

}
.ms-rteTableFooterEvenCol-9 {
border: medium none;
background-color: #DAEFFF;
padding-right: 5px;
letter-spacing: normal;
font-weight: 500;
font-size: 12pt;
padding: 5px 12px 5px 12px;
background-image:none;
color: #6D6F72;
}

The new table style will then be available within the Design tab of table tools, within both the content editor web part and publishing pages.

To add further table styles, you just need to edit the table name on line 4. Then update each class so instead of having 9 appended, it has a unique number (1-4) are already used by Microsoft’s OOTB styles.

Once these changes have been made you can add your own custom styles.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s