Service Manager – New HTML5 Portal – Basic Customizations 3/5 – Colors and Tiles


In this post series about the Service Manager new Portal customization, I'll analyze how to modify some basic page features, about this topics:

Title
Logo
Colors and Tiles
Icons
New Sidebar Link

Warning: not all the changes are supported! Changes to cshtml pages might be overwritten by product upgrades; Moreover, as a result of problems caused by the change of a few pages, Microsoft support may require replacement of the custom file with the original file. For this reason I'll mark as red not supported changes and as green , supported

This is the default homepage, with a classic Request Offering, on which I am going to do some customization

basic customization

3 Colors. You'll agree with me that is necessary to make some customization on the header area, maybe changing background colors.

articolo2_logo2

I'll use the developer mode as usual to find the css class to modify:

articol3_colori1

Open the file c:\inetpub\wwwroot\SelfServicePortal\Content\CSS\main.ccs and search for .top_bar
Copy the block to the custom.css file:

.top_bar {
background: #0071BC;
color: #fff;
width: calc(100% - 4em );
height: 4em;
position: fixed;
margin-left: 4em;
z-index: 1000;
}

Replace the background color with white and the font color with blue

.top_bar {
background: #fff;
color: #0071BC;
width: calc(100% - 4em );
height: 4em;
position: fixed;
margin-left: 4em;
z-index: 1000;
}

 

articol3_colori2

EDIT: I received lot of request on how to change other colors on the portal. You're right guys, I completely missed it, but hey 🙂 I'm lazy for a reason!

In order to change colors in other sections I followed the same procedure (Edge Developer Mode) and I found that some colors were inserted using the rgb code instead of the ascii code:

articol3_colori3

So I started to search into the main.css the code rgb(37,95,133) and using this website to convert colors from ascii to rgb (I use this http://rgb.to)

Remember to do not change the original main.css file! Trick for lazy people: Copy the entire main.css into the custom.css and do searches and modification into the custom.css 🙂

  • Announcement bottom border

articol3_colori4

.anouncement_section .anouncement_desc {
background-color: #fff;
padding-left: 1em;
padding-top: 1em;
height: 25em;
overflow-y: scroll;
width: 99.5%;
border-bottom: 1px solid rgb(37, 95, 133);
color: #111;
}

  • Announcement Button

articol3_colori5

.top_bar .anouncements.clicked {
background-color: #255F85;
}

and do the same for all the #255F85 occurrences you want to change.

Now let's focus on this two areas cause are little bit different:

articol3_colori7 articol3_colori6

The vertical list is defined  under the class vertical_list. I'm going to change it to use the dark green (#006400 or rgb 0,100,0)

.vertical_list .list_data_item.clicked {
background-color : #ccc;
}

.vertical_list .list_data_item:hover {
cursor: pointer;
background-color: #ccc;
}

.vertical_list .list_header {
background: #006400;
color: #fff;
font-weight: 400;
}

.vertical_list .list_footer {
padding-top: 1em;
padding-bottom: 1em;
position: fixed;
background-color: #eee;
bottom: 0px;
width: 26.5em;
border-top: 1px solid rgb(0, 100,0);
}

Unfortunately this is not enough: the side bar color was actually inserted into the index.js file you'll find in c:\inetpub\wwwroot\SelfServicePortal\Content\JS\ directory:

sideMenuAction = function () {
$('.side_menu').find('.side_nav_home').css('background-color', 'rgb(0, 100, 0)');
}

articol3_colori8

This only works for the nav_home. To change color for other sidebar link you have to open the relatives index.cshtml you found in c:\inetpub\wwwroot\SelfServicePortal\Views\MyActivities\

sideMenuAction = function () {
$('.side_menu').find('.side_nav_activities').css('background-color', 'rgb(0, 100, 0)');
}

articol3_colori9

and c:\inetpub\wwwroot\SelfServicePortal\Views\MyRequests\index.cstml

 sideMenuAction = function () {
$('.side_menu').find('.side_nav_request').css('background-color', 'rgb(0, 100, 0)');
}

articol3_colori10

and same for c:\inetpub\wwwroot\SelfServicePortal\Views\KnowledgeBase\index.cshml

 sideMenuAction = function () {
$('.side_menu').find('.side_nav_help').css('background-color', 'rgb(0, 100, 0)');
}

articol3_colori11

4 Tiles. Unfortunately this customization is not supported, if you want to do it, is on your own risk and be aware to save the cshtml files befor any software upgrade.

To better understand this customization, we'll start from the final result:

articol3_tile1

What I've done is to replace the classic icons (the one's you set through the console when create the Service Offering) with more modern tiles as Request Offering background

1. At first, search for the block in the main.css, copy it to the custom.css, and modify it in this way:

.tile {
display: block;
height: 12em;
width: 26em;
margin-top: 1em;
position: relative;
float: left;
margin-right: 1em;
background-color: lightgrey;
}

.tile .title .text {
overflow: hidden;
float: left;
font-size: 1.25em;
font-weight: 400;
text-overflow: ellipsis;
height: 1.25em;

}

Then open the file c:\inetpub\wwwroot\SelfServicePortal\Views\Home\ServiceRequestDetails.cshtml and search for the codo to draw the tiles

@if (requestOfferings.Count != 0)
{
<div class="fav_help_articles section">
@if (soDetails.ContainsKey("DisplayName")) {
<hr>
<div class="row sub_heading">@Resources.SelfServicePortalResources.AvailableRequests</div>
}
<div class="tile_container">
@for (int i = 0; i < requestOfferings.Count; i++)
{
Dictionary<string, object> requestOffering = requestOfferings[i] as Dictionary<string, object>;

<div class="tile" data-toggle="tooltip" title="@requestOffering["BriefDescription"]">
<form action="/Home/Makeform" id="formLink" method="post">
<div class="row title">
<div class="text">@requestOffering["Title"]</div>
<div class="col image">
@if (requestOffering["ImageBase64"].ToString().Length == 0)
{
<img src="@placeholderbase64string" alt="@requestOffering["Title"]" style="width:3.5em; height:3.5em;" />
}
else
{
<img src="@requestOffering["ImageBase64"].ToString()" alt="@requestOffering["Title"]" style="width:3.5em; height:3.5em;" />
}
</div>
</div>
<div class="row description">
<div class="text">@requestOffering["BriefDescription"]</div>
</div>
@if (requestOffering["fav"] == "true")
{
<span class="icon-HeartFillLegacy icon-fill icon"></span>
}
else
{
<span class="icon-HeartLegacy icon-fill icon"></span>
}
<input type="hidden" name="BMEId" id="BMEId" hidden value="@requestOffering["BMEId"]" />
</form>
</div>
}

</div>
</div>
}

and I'll modify it in this way:

@if (requestOfferings.Count != 0)
{
<div class="fav_help_articles section">
@if (soDetails.ContainsKey("DisplayName")) {
<hr>
<div class="row sub_heading">@Resources.SelfServicePortalResources.AvailableRequests</div>
}
<div class="tile_container">
@for (int i = 0; i < requestOfferings.Count; i++)
{
Dictionary<string, object> requestOffering = requestOfferings[i] as Dictionary<string, object>;

String img=requestOffering["Title"].ToString()+".jpg";
<div class="tile" style="background-image: url('../Content/images/@img')">
<form action="/Home/Makeform" id="formLink" method="post" style="opacity: 0.8; background-color:white">
<div class="row title">
<div class="text">@requestOffering["Title"]</div>

</div>
<div class="row description">
<div class="text">@requestOffering["BriefDescription"]</div>
</div>

<input type="hidden" name="BMEId" id="BMEId" hidden value="@requestOffering["BMEId"]" />
</form>
</div>
}

</div>
</div>
}

In this way i declared

  1. a new variable img with the content of the Request Offering title, plus .jpg
  2. the tile's background will contain a file uploaded into the directory c:\inetpub\wwwroot\SelfServicePortal\Content\images with the name of the RO title.

So if the Request Offering is named "New Hire", the background file should be named "New Hire.jpg"

 

Comments (4)

  1. Thomas says:

    Thank you very much for the useful information. How exactly did you change the selected sidebar item color?
    Thanks in advance.

    1. Hi Thomas, you’re very welcome! I just updated the post to introduce how to change the sidebar item color. Have a good day 🙂

  2. Cduncan13 says:

    How do you change the color for the bar that drops down to notify you that you have successfully update/created your request?

    1. Hi Chase, you have to change the “background-color” in the “.toss_notification” declaration in custom.css

Skip to main content