Custom Service Portal Loading Page – From Awful to Awesome

featured

Learn how to customize the default Service Portal loading page

By Jeff Pierce, Service Portal Practice Manager @ Cerna Solutions

I love everything Service Portal has to offer. I mean, who doesn’t? I’m quite impressed by all the thought and design that went into it. But like everything good, nothing is perfect.
Exhibit A – The Service Portal Loading Page:

If you’re an optimist, you may look at this and think: simple, minimal, or even… arid? I’m a realist, I have other words come to mind: barren, bleak, desolate, and stark (not the ‘House of’ kind). Now consider the fact that this page is anything but configurable, and I’ve gone from unimpressed to annoyed.

What are we to do? Pretend it’s not there? Look away every time we load our portal? No, I can’t. I won’t.

Where do we start?

So I put my inspector gadget hat on and dug my heels in. I noticed something… If you watch the element inspector closely as the page loads, you might spot this (if you’re quick):

See that h4 element?

<h4 ng-if="firstPage" class="ng-scope" data-ng-animate="1">...</h4>

That’s the element that is putting the message and spinning icon on the page. Where is the variable firstPage being set? Heck if I know. But now I’ve got this tiger by the toe.
By looking at this, I can tell that the most unique thing about the element is the ng-if attribute. Therefore, I can use a CSS attribute selector to attack that thing with some style.

h4[ng-if="firstPage"] { ...styles will go here... }

The Styles

Our options are limited with only that one element to go on. But I’m still going to push this as far as I can without spending too much time on it. I’d like enlarge the message and icon, center it, color the page, and include a site logo. So here are all the CSS properties I’m going to throw at this.

position: absolute; 
top: -10px;
left: 0;
width: 100%;
height: 100%;

I want this element to take up the entire screen, so I’ll use absolute positioning to position it relative to the document body. The other properties are used to cause this element to stretch the entire width and height of the page. By default, there is a little padding at the top of the screen caused by the ‘padding-top’ class on the main page element, so I use top: -10px; to take care of that empty space. This is important if you’re going to fill the page with color.

text-align: center;
padding-top: 10%;
font-size: 3em;
color: #fff;

I don’t like how small that message and icon are, or how it’s tucked up in the corner like it is. So, I’m centering it with text-align, pushing it away from the top with a relative padding. I’m making it bigger with font-size, and coloring it white with color.

background: #1E9479 url('my_logo.jpgx') no-repeat center;
background-size: 35%;

The background property is a mouthful. The first value is the color with which I’ll fill the page. The second value is the name of an image in the image table. Remember to add the ‘x’ to the end of the image’s file extension. You might be wondering why, but I’ll leave you in suspense.
With the third value, I’m telling it to print the image only once. The fourth is positioning it in the center. The background-size property is used to relatively size the image.

Throw all this jazz into one of your portal’s css files:

h4[ng-if="firstPage"] {
 position: absolute;
 top: -10px;
 left: 0;
 width: 100%;
 height: 100%;
 text-align: center;
 padding-top: 10%;
 font-size: 3em;
 color: #fff;
 background: #1E9479 url('my_logo.jpgx') no-repeat center;
 background-size: 35%;
}

Note: In Kingston and later, you may need to use this as your selector:

h4[ng-if="main.firstPage"]

The Result

Remember to do a hard refresh of your browser to reset the cached CSS.

Oh yeah! That looks so much better! I think even Erlich would be proud.

Now, keep in mind that you may need to adjust those CSS properties a bit depending on the image and colors you choose. But as you can see, it’s actually pretty easy. I hope you have fun with this and get a chance to do something awesome to your otherwise lackluster portal loading screen.

Aloha,
Jeff

Connect with me on LinkedIn.