#42WeekHitchhikersGuide – Ok, so enough theory for now. Let’s get to some fun stuff you can achieve in SharePoint – without being a developer / designer, or have coding skills. Today we’ll add some colour behind your SharePoint Web Part Title Bars.

Week:  5 of 42, 37 left

This week’s best line from Douglas Adams’ The Hitchhiker’s Guide to the Galaxy Series: “Listen, three eyes,” he said, “don’t you try to outweird me, I get stranger things than you free with my breakfast cereal.”

Firstly I have to admit. I have no idea how I got it right to write a blog each day for 365 days, this challenge is a blog a week and I’m 2 blogs behind. I’m embarrassed to say the least. 🙁

Important to note:

You will need to insert a script editor on a page and add code. Yup. I am NOT saying do this on an Intranet landing page. Check first with your IT team if this is allowed on your team sites? Ability to add script might even be removed on your sites. I also not saying go crazy on your departmental site and change the web part title bars to Periwinkle blue. Just because you can, doesn’t mean you should. Have fun but don’t overdo it….

SharePoint Team Site Landing Pages:

In this example I am not working on the new look and feel of the Modern Team Sites. Read more here.

This script works on these pages for both On-premise and SharePoint Online:

As  you’ll notice – it’s a bit boring – as soon as you add a couple of web parts, it kinda gets lost on the page. Even though my site is colourful – the web part title bars have no colour:

This post will show you how to add a snippet with code, to colour the web part title bars (again – I am not saying go crazy with colours – that could do more damage than any good, I’m using bright funky colours as an example):

Add the Script Editor:

  1. Edit the page
  2. Click in a zone at the bottom of your page below all the other web parts
  3. Insert Tab > Web Part > Media and Content > Script Editor > Add

Once the web part is added, edit the web part to add the code. In the top right corner of the web part is a dropdown – select “Edit Web Part”. Then click on Edit Snippet (read here for more on Script Editors). Add the below code in the ‘text box’ and click on Insert to finalize. Remember to change the Hex codes to the colours you would like to use.

[code lang=”css”]
<style type="text/css">

.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
background: #EC1E82;
color: #ffffff;
padding-left: 2px;
font-size: 1.2em;
}

</style>
[/code]

This is what the code consists of. To get the colours you need, use this handy RGB to Hex converter (SharePoint refers to colours as Hex Codes):


Need some inspiration on colours to use? Try Design Seeds and have a look at my blog, 15 Crazy ideas with Promoted Links & Design Principles – links below.

Resources:

Now, as part of my blog challenge I would like to feature someone every week. Whether it be advice, tips & tricks or a code snippet they’d like to share. This week’s Babel Fish is brought to you by Louise Salemink. A good and crazy friend of mine.

“Assumptions are swearwords, never assume you know your user. Also never assume that your user knows themselves.”

– Louise Salemink

Till next week. Know where your towel is and always be thankful for the fish 🙂

Disclaimer: I learn new things every day. I change my opinion every day. I am far from an expert on any of the topics I blog on. I invite your comments, additions, corrections and greater insights. If you get value from my musings, please tell me & give me feedback. Like and share my posts if you feel more people can obtain value from this. After all – the WWW has supplied us with a free education system that should be used.