How to create an Intranet Welcome Message

I was asked recently to add a welcome message to an Intranet. Microsoft doesn’t provide an out of the box webpart for this, so I thought I’d take a look in the SharePoint App Store, there are a couple but neither of them really did what I wanted.

The design I had been given called for a background image with overlayed text welcoming the person visiting the Intranet. Good morning, good afternoon or good evening. Here is how I made the solution:

First I needed to install the Modern Script Editor webpart and add the App into my Intranet home site (to make the webpart available).

Next, I combined some HTML, Javascript and CSS into a code snippet. Here is the code I used.

 <div class="container">
  <img src="/sites/intranet/siteassets/banner.png" style="width:100%;">
  <h2><div class="welcome"><p id="WelcomeMsg"></p></div></h2>
  <div class="howcanwe">Can we help you with something?</div>
</div>

<script type="text/javascript">
var hour = new Date().getHours();
document.getElementById("WelcomeMsg").innerHTML = "Good " + (hour<12 && "morning" || hour<18 && "afternoon" || "evening")+", " + _spPageContextInfo.userDisplayName;
</script> 

<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Centered text */
.welcome{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Centered text */
.howcanwe{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

I uploaded my background image into the SiteAssets library on the Intranet home site. Google helped me with a few things including the Javascript and CSS.

FinalIy, added a full width section to the top of my Intranet page and inserted the Modern Script editor and pasted in the code. I needed to enable “Enable classic _spPageContextInfo” in the webpart settings for the Javascript to work.