/build/static/layout/Breadcrumb_cap_w.png

User Console Login Page - Customization Ideas

User Console Login Page

Rather than using the default User Portal login page verbiage, I recommend customizing the page to share useful information with your end-users.

Examples of useful customizations:

  • Corporate video announcements
  • Flash demo for new products
  • Solutions to common problems
  • Service level agreements (help desk tickets, printer outages, etc.),
  • Company news
  • Known IT issues (Exchange Server down)
  • News aggregator
  • Patching and reboot schedules
  • Any system maintenance or downtime anticipated
  • HTML Calendar such as Google Calendar
  • Polls  (http://polldaddy.com/signup-free/)
  • Twitter Feeds (https://twitter.com/settings/widgets/new/user)
Basically, anything you can write in HTML and Markdown language can be posted on the User Console landing page.

Default Login Page


As you can see, the default "code" is very basic:
Welcome to the User Console. The "Downloads" tab contains software available for you to download and install. You can search on software by title, vendor, or label. Please only download and install software that you require.<br/><br/>You must login in to the User Console to browse software. Please enter your organization's common user name and password below to login. If you have problems logging into the site, or cannot find software that you require please contact the IT Staff.

Screenshot of the default verbiage:



Customizing the Login Page

By "dressing up" the Login page, you can make the site more usable, useful, and even impactful.  Another benefit is the ability to make the page look more like other websites your end-users are comfortable with - to make user-facing sites more consistent.  Of course, once a user logs in, the clarity design will take over.  But at least while their end-user is on the login page, the experience can be consistent with whatever other sites the customer might have.

Below, I've included several examples of page customization code (and screenshots of the associated look-and-feel), as well as a description of how that particular snippet is useful.

Basic Improvement - Examples

<html>
<body>
<p>
<hr />

<h2 align="center"style= "background-color: #F5F5F5  ;color: #0085C3  ;"> <b><span style="color:#006600;">All IT systems should be <em><strong>operating normally.</em></strong></b></span></p></h>
</p>
<h5>
<hr>
The "<strong><span style="color:#000000;">Downloads</strong></span>" tab contains files, apps, and scripts that are available for you to download and install.  You can search for software by title, vendor, or label.  Please only download and install software that you require.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Knowledge Base</strong></span>" tab hosts articles on interesting topics, typical end-user issues, and other company information.  Please check the Knowledge Base for a relevant article <em><strong>before </strong></em>submitting a ticket.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Helpdesk</strong></span>" tab is where you can submit tickets, or requests, as well as update previously-created tickets.</p>
<p>
</h>
<br>
You must login in to the Portal to access these features, using the same credentials that you use to login to your PC.  If you have problems logging into the site, or can't find software that you require please contact the <a href="mailto:ron_colson@dell.com?subject=User%20Portal%20Issue"><u><strong><span style="color:#000000;">IT Staff.</u></a></strong></span></p>
<hr />

<h3 align="center"style= ;"> <b><span style="color:#F5F5F5;">If you are experiencing an IT-related issue, please <a href="http://k1000.tallymac.local/userui/ticket_list.php?__SPRESTORE"><u></b><span style="color:#000000;">submit a ticket.</u></a></span></p>
<hr />
</body>
</html>



And this:

<html>
	<body>
		<p>
		<hr />
		
			<h2 align="center"style= "background-color: #F5F5F5  ;color: #0085C3  ;"> <b><span style="color:#ff0000;">The Exchange Email Server is <em><strong>Down for Maintenance.</em></strong></b></span></p></h>
		</p>
		<h5>
		<hr>
			The "<strong><span style="color:#000000;">Downloads</strong></span>" tab contains files, apps, and scripts that are available for you to download and install.  You can search for software by title, vendor, or label.  Please only download and install software that you require.</p>
		<p>
			 </p>
			The "<strong><span style="color:#000000;">Knowledge Base</strong></span>" tab hosts articles on interesting topics, typical end-user issues, and other company information.  Please check the Knowledge Base for a relevant article <em><strong>before </strong></em>submitting a ticket.</p>
		<p>
			 </p>
			The "<strong><span style="color:#000000;">Helpdesk</strong></span>" tab is where you can submit tickets, or requests, as well as update previously-created tickets.</p>
		<p>
		</h>
		<br>
			You must login in to the Portal to access these features, using the same credentials that you use to login to your PC.  If you have problems logging into the site, or can't find software that you require please contact the <a href="mailto:ron_colson@dell.com?subject=User%20Portal%20Issue"><u><strong><span style="color:#000000;">IT Staff.</u></a></strong></span></p>
		<hr />
		
			<h3 align="center"style= ;"> <b><span style="color:#F5F5F5;">If you are experiencing an IT-related issue, please <a href="http://k1000.tallymac.local/userui/ticket_list.php?__SPRESTORE"><u></b><span style="color:#000000;">submit a ticket.</u></a></span></p>
		<hr />
</body>
</html>



While these kinds of edits are useful, the attention you could draw to the urgent notice at the top might not have been quite as attention-grabbing as you might like.  There are certainly additional steps you could take, like embedded videos or widgets, larger fonts, Javascript pop-ups, and so on.  But even these, in many cases, left something to be desired.  Quite often KACE customers would request the ability to change the background color of the entire page - a change that has always required the purchase of Remote Professional Services (RPS) to accomplish.  But, now you have the ability to make this change yourselves.  So, with that in mind, I've shown some examples with different background colors, below.

Customizing the Login Page - New Techniques

Here, I've included some examples of page customization code (and screenshots of the associated look-and-feel), as well as a description of how that particular snippet is useful:

<html>
<body style="color: black; background-color: rgb(0, 102, 0);"
 alink="#000099" link="#b20838" vlink="#990099">
<p>
<!-- start weather widget code -->
<A ID="top"> </a>
<h2 align="center">
<!--Weather for McAlester-->
<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=74501&bannertypeclick=wu_blueglass" target="_blank"><img src="http://weathersticker.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KNUQ&ForcedCity=McAlester&ForcedState=OK" alt="Click for McAlester, Oklahoma Forecast" height="90" width="160" /></a> 
<!--Weather for Round Rock-->
<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:78664.1.99999&bannertypeclick=wu_blueglass" target="_blank"><img src="http://weathersticker.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KEDC&ForcedCity=Round Rock&ForcedState=TX" alt="Click for Round Rock, Texas Forecast" height="90" width="160" /></a> 
</h>
</p>
<p>
<hr />

<h2 align="center"style= "background-color: #F5F5F5  ;color: #0085C3  ;"> <b><span style="color:#006600;">All IT systems should be <em><strong>operating normally.</em></strong></b></span></p></h>
</p>
<h5>
<hr>
The "<strong><span style="color:#000000;">Downloads</strong></span>" tab contains files, apps, and scripts that are available for you to download and install.  You can search for software by title, vendor, or label.  Please only download and install software that you require.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Knowledge Base</strong></span>" tab hosts articles on interesting topics, typical end-user issues, and other company information.  Please check the Knowledge Base for a relevant article <em><strong>before </strong></em>submitting a ticket.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Helpdesk</strong></span>" tab is where you can submit tickets, or requests, as well as update previously-created tickets.</p>
<p>
</h>
<br>
You must login in to the Portal to access these features, using the same credentials that you use to login to your PC.  If you have problems logging into the site, or can't find software that you require please contact the <a href="mailto:ron_colson@dell.com?subject=User%20Portal%20Issue"><u><strong><span style="color:#000000;">IT Staff.</u></a></strong></span></p>
<hr />

<h3 align="center"style= ;"> <b><span style="color:#F5F5F5;">If you are experiencing an IT-related issue, please <a href="http://k1000.tallymac.local/userui/ticket_list.php?__SPRESTORE"><u></b><span style="color:#000000;">submit a ticket.</u></a></span></p>
<hr />
</body>
</html>



And this:

<html>
<body style="color: black; background-color: rgb(255, 0, 0);"
 alink="#000099" link="#b20838" vlink="#990099">
<p>
<!-- start weather widget code -->
<A ID="top"> </a>
<h2 align="center">
<!--Weather for McAlester-->
<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=74501&bannertypeclick=wu_blueglass" target="_blank"><img src="http://weathersticker.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KNUQ&ForcedCity=McAlester&ForcedState=OK" alt="Click for McAlester, Oklahoma Forecast" height="90" width="160" /></a> 
<!--Weather for Round Rock-->
<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:78664.1.99999&bannertypeclick=wu_blueglass" target="_blank"><img src="http://weathersticker.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KEDC&ForcedCity=Round Rock&ForcedState=TX" alt="Click for Round Rock, Texas Forecast" height="90" width="160" /></a> 
</h>
</p>
<p>
<hr />

<h2 align="center"style= "background-color: #F5F5F5  ;color: #0085C3  ;"> <b><span style="color:#ff0000;">The Exchange Email Server is <em><strong>Down for Maintenance.</em></strong></b></span></p></h>
</p>
<h5>
<hr>
The "<strong><span style="color:#000000;">Downloads</strong></span>" tab contains files, apps, and scripts that are available for you to download and install.  You can search for software by title, vendor, or label.  Please only download and install software that you require.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Knowledge Base</strong></span>" tab hosts articles on interesting topics, typical end-user issues, and other company information.  Please check the Knowledge Base for a relevant article <em><strong>before </strong></em>submitting a ticket.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Helpdesk</strong></span>" tab is where you can submit tickets, or requests, as well as update previously-created tickets.</p>
<p>
</h>
<br>
You must login in to the Portal to access these features, using the same credentials that you use to login to your PC.  If you have problems logging into the site, or can't find software that you require please contact the <a href="mailto:ron_colson@dell.com?subject=User%20Portal%20Issue"><u><strong><span style="color:#000000;">IT Staff.</u></a></strong></span></p>
<hr />

<h3 align="center"style= ;"> <b><span style="color:#F5F5F5;">If you are experiencing an IT-related issue, please <a href="http://k1000.tallymac.local/userui/ticket_list.php?__SPRESTORE"><u></b><span style="color:#000000;">submit a ticket.</u></a></span></p>
<hr />
</body>
</html>



As you can see, the color change is much more of an attention-grabber.  So, not only could you change the regular background color to something more like your other user-facing websites, but you could use the color changing in this sort of way instead:  green is good, red means something is wrong, etc.  You should also notice the live weather widgets I added and customized to whichever locations I wanted them to display weather information for.

Much more can be done with this page:  embedded videos, twitter feeds, etc.  The list is endless.  One of my favorite examples to suggest is that you create a video teaching your users how to login and use the User Console - searching for KB Articles, installing Downloads, creating Tickets, and so on - and post it to the login page!

Here's an example with weather widgets, twitter feed, and an angry bear that scrolls across the page from side-to-side!  The background color is taupe, in case you were wondering.



There's even a pop-up message to really grab their attention:



p.s.  You don't need to be a web wizard to do any of this.  I actually know very little HTML code.

Comments

  • Updated with better quality screenshots. - ronco 4 years ago
  • Good post. Very useful!! - mnazer 4 years ago
    • mnazer,

      Glad you found it useful! I'd be interested in hearing what you and others do with your login pages.

      p.s. Don't forget about that rating thingy at the top of the page, if a post is useful. :) - ronco 4 years ago
  • I like that you can change the color! Whoever figured out how to do that deserves some kind of award! :D - ondrar 4 years ago
  • Hello ronco,
    thats amazing! One question, how can I change the dell kace logo? I've tested with your code, everything changed - except the dell logo.
    Thanks for this blog! - svmay 4 years ago
    • svmay,

      In the K1000 webui: Settings > General Settings, scroll down to Logo Overrides section. We have a KB article that details the picture sizes that will work, etc.

      What are the specifications for logo overrides on the K1000 Settings/General tab? (111715)

      https://support.software.dell.com/k1000-systems-management-appliance/kb/111715 - ronco 4 years ago
      • Are this settings for the login page too? Because at this point I have three selection options. 'userconsole', 'report' and 'agent alert' - all of this have the company logo. - svmay 4 years ago
  • svmay,

    The User Console part is what you were asking about. If you're not seeing your company logo in when accessing the login page within your browser, I suggest that you might need to clear cache, etc. in your browser, and try again. - ronco 4 years ago
    • No Sorry, I mean before I logged in I have the start page - your first screenshot in this blog - and I want to change the Dell Kace logo at this site (for example; that it looks like sreenshot 2). When I'm logged in I see my company logo thats right - I would set it on the login page, before I logged me in. So you had set it to an lighthouse - I would set it to my company logo - is this possible? - svmay 4 years ago
      • svmay,

        Both logos are the same (and set/changed in the same place). The logo ON the login page AND the logo in the top-left-hand corner, once you login to the User Console. If you are seeing yours once you login, but ours before you login there's something going on with your browser/computer. - ronco 4 years ago
  • ronco,

    I think you don't understand me. I have set all logos that I can set to my company logo. Nevertheless, on the login screen I have the dell kace logo. And I would change that - svmay 4 years ago
  • svmay,

    Yes, I understand. What I am saying is that whatever logo you set under User Console (in General Settings) should be seen both on the User Console login page AND in the top-left-hand corner of the User Console once you login. In the latest version, this setting also replaces the Dell KACE logo on the admin console login page. - ronco 4 years ago
    • oh ok.. It isn't in my kace. I have the logo only (after login) on the top-left-hand corner of the UserConsole. At loginsite - I have the dell kace logo. What should I do now to change that? Thankful for ideas - thanks! - svmay 4 years ago
      • svmay,

        That's what I was saying about browser caching. Try a different computer (that you've never accessed the User Console in). You can also try deleting your browser cache, history, etc. on your computer. - ronco 4 years ago
      • ronco,

        ok - Thanks for your help! I report here after I've tried this. - svmay 4 years ago
      • ronco,

        I've deleting my browser chache, history, etc. - without success..
        I've try a different pc - without success..

        The 'Dell Kace' logo at the login page and the company logo after login.. - svmay 4 years ago
  • svmay,

    Ok, you'll need to contact KACE Support then. - ronco 4 years ago
    • Ok - Thank you anyway ronco - Let's see what the support will do - svmay 4 years ago
      • svmay, are you logging into the admin side of the console? you have to go to the user console to see your logo. If you have "admin" or "adminui" appended to your web address you will not see your logo, just the Dell Logo. - bstutz 4 years ago
      • No I know, but I had the dell logo at the userui page.
        Anyway, the dell support had fixed it for me. Now it works fine! :) - svmay 4 years ago
  • Thanks ronco, I'm going to attempt your color change technique now. Question, has any one found a way to enlarge the text? We're in a testing phase at the moment and my entire test group had that request. - kenmccall76 4 years ago
    • kenmccall76,

      Absolutely! You can see how I enlarged my text in the banner that denotes "The Exchange Email Server is Down for Maintenance". - ronco 4 years ago
This post is locked

Don't be a Stranger!

Sign up today to participate, stay informed, earn points and establish a reputation for yourself!

Sign up! or login

Share

 
This website uses cookies. By continuing to use this site and/or clicking the "Accept" button you are providing consent Quest Software and its affiliates do NOT sell the Personal Data you provide to us either when you register on our websites or when you do business with us. For more information about our Privacy Policy and our data protection efforts, please visit GDPR-HQ