Here is a quick and simple trick on how to get some customization out of your web part titles.  The out-of-the-box styling of SharePoint web part titles is pretty basic.  This tutorial will help you spice up those titles in no time.  Adding a little flair never hurt, right?

What are web part titles?

Essentially, web part titles are just HTML headings.  Every time you drop a new web part onto your page, you are given the option to display or to hide a web part title.  We’re going to add a little bit of customization to the title, if you choose to display it.

Here is our current web part title with some content underneath it.

How do I customize the web part title?

Just grab the CSS below, and add it to your CSS file.  If you are unfamiliar with how to do that, check out this blog post about branding SharePoint navigation to learn how.

/*============================*/

/* Web Part Title

/*============================*/

h2.ms-webpart-titleText { padding-bottom: 8px; position: relative; }

h2.ms-webpart-titleText span { color: #000; font-size: 26px; font-weight: normal; }

h2.ms-webpart-titleText:before,

h2.ms-webpart-titleText:after { content: ""; background: #e1e1e1; display: inline-block; vertical-align: middle; height: 2px; position: relative; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }

h2.ms-webpart-titleText:before { width: 20px; right: 5px; }

h2.ms-webpart-titleText:after { width: 100%; left: 5px; }

h2.ms-webpart-titleText:hover:before,

h2.ms-webpart-titleText:hover:after { height: 5px; background: #0072C6; }

Final Product

After adding the CSS, you should be left with something similar to this!

Now your web part title has a little more flair.  For more SharePoint branding tips, check out my recent blog post about adding breadcrumb navigation to SharePoint page layouts.  Stay tuned for more upcoming blog posts about branding SharePoint!

Save yourself time, effort, and money with our ready-made SharePoint intranet. Check out IntranetPro.