Service Manager – New HTML5 Portal – Basic Customizations 1/5 – Title


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

1. Title. If you need to change the default title, you have to modify the web.confg you'll find in c:\inetpub\wwwroot\SelfServicePortal (or eventually in the directory where you've putted your site if not the default) or through IIS in site's Application Settings:

webconfig1webconfig2

 

 

 

 

All basic parameters, such as, fonts style, objects size, padding, etc. are placed in the principal css file named main.css found in c:\inetpub\wwwroot\SelfServicePortal\Content\CSS\main.css. You don't have to modify the main.css file directly, cause it will be replaced by almost any SCMS portal update: just take the css code declaration you want to modify, copy it to che c:\inetpub\wwwroot\SelfServicePortal\Content\CSS\custom.css and modify that copy.

Open the file and you'll find it wouldn't be easy to understand where to do customizations. In these cases your best friend will be the IE or Edge Developer mode, enabled by pressing the F12 key.

Once on the portal page, press F12 and in a few clicks you'll know the css class and the exact line number where to find what you need:

F12

Open the file main.css and search for top_bar .logo (pay attention at the white space between top_bar and .logo) copy the code to the custom.css and do your modification in the title area

.top_bar .logo {
font-size: 1.67em;
font-weight: 600;
height: 100%;
margin-left: 1em;
padding-top: 0.33em;
max-width:20em;
}

 

 

Comments (0)

Skip to main content