A temporary message on top of your SharePoint Page

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>

Back to blogging!

It’s been almost 6 years since my last blog post…

There are many reasons for the long silence, let me just expand on one.

The period from 2015 to 2017 marked a shift for Office 365, with the move to modern and an explosion of new apps. We found ourselves in a long transition period, with Office 365 promising a lot but not delivering so much initially. Remember the one-column template for modern SharePoint home pages? Surely, because that was the only option 🙂 Remember the shift of SharePoint calendars from classic to modern? Certainly not, because it never happened (we finally got a modern calendar view a few weeks ago, in Microsoft Lists). Loops in Microsoft Flow? Not an option initially. The list goes on.

From a development and customization perspective, there was also some back and forth (who remembers Client Side Rendering?) which left me wondering where to invest next. A side effect of modern + open source was to kill my SPELL initiative. The modern development tools were very different from traditional JavaScript, with the rise of TypeScript. The PnPjs library did exactly what SPELL did – abstract the 365 REST API – except that it was backed by Microsoft and a very strong community. Sure, SPELL had its own strengths and was especially powerful with older SharePoint versions, but who is still on SP 2010 or 2013 today? (oh! The workflows, sure, but that’s a different story).

Fast forward to 2020. Microsoft 365 has come a long way. It reached maturity 2-3 years ago and has become the ubiquitous platform it was meant to be. The past 3 years have been exciting, although they didn’t give me much time to breathe, even less take a week of vacation. Finally I feel I have caught up on (almost) all fronts. That is, until the new wave of announcements next week at the MS Ignite conference

The bright side for me is that both client side development and the “maker”/”citizen developer”/”fusion dev” paths I was promoting 10 years ago, along with a few folks (yes, Marc Anderson was already a community pillar at the time!), those paths have now gone mainstream, and it has become easier to convince people that they just work 🙂

12 years ago I started this blog to share my SharePoint tricks, such as the “HTML Calculated Column” and the “Easy Tabs”. Today we have new technologies, and I have some new tips that I am ready to share. An upcoming topic will be “Property Pane Portals”, a technique I recently came up with to set up SPFx property panes.

Still on SharePoint 2016 and distant from the 365 buzz? I’d love to hear from you. The SPELL product itself is not relevant anymore on modern cloud, but works on SP 2016. More importantly, now is a good time to bridge the gap between classic and modern before you move to the Cloud. Actually one of my first new posts will be about client side solutions built on SP 2016.

Stay tuned! And as an appetizer, if you haven’t checked it out yet, take a look at the Power BI demo I published to the Microsoft Power BI data stories gallery. I’ll have a similar report ready to track MS Ignite next week!