HOW TO: Customize eMite Login Screen and Menu Bar
Overview
Login screen and Menu bar can be customized by the consultants by updating the logo and color scheme via CSS.
Customize eMite Login Screen
How to Change the eMite Logo
Replace the file /Auth/Scripts/images/img_welcome.png.
Image Resulution: 401px x 139px
File Type: png
To change more styles, modify this CSS file /app/Auth/Scripts/css/style.css and below section:
#welcome .title1 img {
/*width:400px;*/
margin-bottom:10px;
height:139px;
}
How to Change the Login Text
Title 1: Default is "Welcome to <productId>" from \emitecore\WebService\EmiteAuthentication\EmiteAuthentication\Scripts\eMite\Login_ViewModel.js.org) <productId> is from global.config.json setup.productId gets overidden by DashboardTitle config.
To change, add DashboardTitle in config/DashboardAPI/app.config.json (eg: "DashboardTitle" : "Hello World!")
To change more styles, modify this CSS file: /app/Auth/Scripts/css/style.css and below section:
#welcome .title1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:28px;
font-weight:normal;
line-height:25px;
margin:0;
color: #7F7F7F;
letter-spacing: -1px;
padding: 0px;
}
Title 2: "Dashboard" text is hard-coded as title2 = "Dashboard" in (\emitecore\WebService\EmiteAuthentication\EmiteAuthentication\Scripts\eMite\Login_ViewModel.js.org).
To change more styles, modify this CSS file: /app/Auth/Scripts/css/style.css and below section:
#welcome .title2 {
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
font-weight:bold;
line-height:50px;
color:#0266ba;
margin:0;
text-transform: uppercase;
padding: 0px;
letter-spacing: -2px;
}
How to Change the Login Page Background Color
How to Change the Login Page Footer Color
Hard-coded: "(c) 2018 eMite.com. All rights reserved." (\emitecore\WebService\EmiteAuthentication\EmiteAuthentication\Scripts\eMite\Login_ViewModel.js.org)
Color is hard-coded also: <p style="color: #FFF;" data-bind="text:CopyRightText"></p> in \emitecore\WebService\EmiteAuthentication\EmiteAuthentication\Views\Login\Index.cshtml
Customize Dashboard Menu Logo and Header Color
How to Change the Logo
Replace file app/dashboard/Content/images/logo.png
Image Resolution: 29 x 25px
File Type: png
How to Change the Header Color
Go to User Settings.
Click on Style tab.
Set User Header Color or Global Header Color to include the datablock's default header/title color.
