Audience: site owners, developers

I mentioned in my last post that a CEWP or its modern equivalent still have a place in SharePoint. An example is to display a temporary message, like in special occasions such as Halloween or New Year.

Before we get to the code, let me start with a couple disclaimers.

1. Code injection can be dangerous, especially scripts. In this example we’ll only be using a few safe lines of styling (CSS) to decorate the page.
2. There are better options for site-wide customizations, or more permanent needs such as recurring messages
3. The customization relies on a CEWP for classic sites. On modern you’ll need to install a “modern CEWP“.
4. I have only tested the code in Chrome and the new Edge.

Steps to our Halloween banner

1. Get an image, and upload it to a SharePoint library users have read access to. I got mine from Openclipart which allows for unlimited commercial use.
2. Save the CSS below to a text file and upload it to the SharePoint library, after you replace the image link with your own. You can also adjust the height and background color as needed.
3. Insert a CEWP or “Modern CEWP” to your page and link it to the text file. Voila!

<style type="text/css">
body::before {
 display:block;
 width:100%;
 height:80px;
 background: url('https://pathto.sharepoint.com/.../pumpkin.svg');
 background-color: black;
 content:"";
}
</style>

Here is another example where I used #E34602 as background color:

You can also insert text, using the content property:

  <style type="text/css">
body::before {
 display:block;
 width:100%;
 height:80px;
 background-color: #E34602;
 content: "Happy Halloween!";
}
</style>