lighterside

Want to change the background colour / image on your SharePoint Wiki Pages? Well it’s easier than you think. And don’t be scared because it involves adding a web part and some code – if I could do it – so could you!!

For some background info on Wiki Pages, refer to my previous blogs Wiki Pages for Organograms and Profile Pages and Using Wiki Pages for Business Process Mapping

Adding a different background colour:
Edit your wiki page > Insert > Web Part > Media and Content > Script Editor > Add:
Add Script Editor

Now edit the Script Editor by clicking on the dropdown on the right of the web part > Edit Web Part > Edit Snippet:
Edit Script Editor

The screen will open where you need to insert the code to change the background colour. Paste the code here (remember to change the hex colour code to the colour you’ve chosen > Click on Insert > Click on Apply:
Code for Background Colour

Save the Wiki Page. Keep in mind that the colour will be affected by the theme applied to your site. That was easy, right?!

Adding a different background image:
First you need to upload the image to an existing image library, in this example I’ve used my site assets library. Make sure that ‘everyone’ has read access to these images.
1. Upload the image to your SharePoint site
2. Copy the URL to your image by clicking on the image until only the image is visible > copy URL
3. Edit your wiki page (and follow the same steps as above)
4. Insert Tab > Web Part > Media and Content > Script Editor > Add
5. Edit Web Part > Edit Snippet
6. Add the following code:
Code for Background Image
7. I’ve added “!important” to override any existing styles SharePoint might want to apply on this page. On O365 I also had to make my Image URL relative (by replacing the server/site with ../ ) before it would work.
8. Click on Insert > Click on Apply

Read more:
If you know the RGB, use the RGB to HEX conversion tool, if you’re not sure, you can use the HEX (HTML) colour picker from W3Schools and also refer to the 216 cross-browser colour palette.
Read more on the W3Schools site about the position / repetition of images

Voila!!

And that’s a wrap for today! Enjoy.

Eat Sleep SharePoint Repeat

Advertisements