Customize the content editor web part:

I just noticed this on Heathers blog, it’s a good tip, something that would be customized fairly often.

One thing I will point out is that there is a slight quirk with the content editor web part title.

I will have to dig up one of the customizations I did in the past and get you the class I had to add.

From Heathers Blog:

Ever wanted to change the style of the text within a Content Editor Web Part (CEWP)? Add these custom styles to your style sheet:

CEWP paragraph formatting
div.ms-WPBody {}

CEWP H1 header formatting
div.ms-wpbody p h1, div.ms-wpbody h1 {}

CEWP H2 header formatting
div.ms-wpbody p h2, div.ms-wpbody h2 {}

CEWP H3 header formatting
div.ms-wpbody p h3, div.ms-wpbody h3 {}

CEWP unordered and ordered list formatting
div.ms-wpbody p ul, div.ms-wpbody ul {}
div.ms-wpbody p ol, div.ms-wpbody ol {}

CEWP links formatting
div.ms-wpbody a:link {}
div.ms-wpbody a:visited {}
div.ms-wpbody a:hover {}

*************This may not apply to everyone but it’s something I ran into at one point when customizing the web part titles via the theme.

I wanted an icon and margin on the text, this class needed to be added to the stylesheet in order to accomplish it. This is the “quirky thing” I mentioned above
*************

/* ADDED This class – Sets the margin on the webpart title bar for the content editor. */
.ms-WPTitle span {
font-weight:bold;
font-size:14px;
font-family:Tahoma, Verdana, Arial;
color:#FFFFFF;
text-decoration:none;
margin-left:16px;
}
/* ADDED This class – Sets the margin on the webpart title bar for the content editor (WHEN Details Link is Added/Title is linked). */
.ms-WPTitle span a: link, .ms-WPTitle span a: visited {
font-weight:bold;
font-size:14px;
font-family:Tahoma, Verdana, Arial;
color:#FFFFFF;
text-decoration:none;
margin-left:16px;
}
/* ADDED This class – Sets the margin on the webpart title bar for the content editor. (WHEN Details Link is Added/Title is linked) */
.ms-WPTitle span a: hover {
font-weight:bold;
font-size:14px;
font-family:Tahoma, Verdana, Arial;
color:#FFFFFF;
text-decoration:none;
margin-left:16px;
}
/* ADDED This class – Sets the margin on the webpart title bar for the content editor.(WHEN Details Link is Added/Title is linked) */
.ms-WPTitle span a: active{
font-weight:bold;
font-size:14px;
font-family:Tahoma, Verdana, Arial;
color:#FFFFFF;
text-decoration:none;
margin-left:16px;
}

This entry was posted in General. Bookmark the permalink.

One Response to Customize the content editor web part:

  1. Pingback: Heather Solomon's Blog - Design, MCMS, SharePoint, CSS