Steps to skin PLM
These instructions assume you're in the root directory of installed v12 Innovator (so the paths are relative to that).
It has been necessary to clear my browser cache and restart the server to get these changes to show.
I recommend free tools Gimp and Inkscape for creating layered favicon.ico and .svg(s), respectively..
Change Browser Tab Identifier Text/Title
Edit ./InnovatorConfig.xml
Change UI-Tailoring: <UI-Tailoring product_name="B+L PLM - Authenticated Session Tab Title"/>
Edit ./OAuthServer/OAuthServer.config. Change the following values:
<add key="ProductName" value="B+L PLM - Login Page Title"></add>
<add key="LocalAuthenticationDisplayName" value="B+L PLM"></add>
Change Login Graphics
Edit ./OAuthServer/OAuthServer.config. Change the following values:
<add key="LogoUrl" value="~/images/BL_Login.svg"></add>
<add key="BackgroundImageUrl" value="~/images/BL_LoginBackground.jpg"></add>
Put B+L login page images (LogoUrl and BackgroundImageUrl files) in .\OAuthServer\wwwroot\images
Change Browser Tab Icon (also used in browser bookmarks and pins)
Add a custom favicon so the tab, even when pinned, is discernible from the other Aras default logo instances (with the "A" icon).
Login Icon: .\OAuthServer\wwwroot\images\favicon.ico
Post-auth Icon: .\Client\images\favicon.ico
Actually Change the LOOK!
Replace the login CSS file with the revamped one:. Currently no easy way to link anther CSS for the login, so we overwrite the existing file. Ideally we would just use sed to tack-on our overrides) OAuthServer\wwwroot\css\login.min.css
For the main interface look and feel we can add our own CSS in the styles directory.
I’m going with BL_ + <simple server identifier> + .css: \Innovator\Client\styles\BL_dev02.css
Now, we need to link the file in: \Innovator\Client\default.aspx
Look for the last existing CSS link, and add after it. CSS uses inheritance, so the last one overrides any previous styles:
<link rel="stylesheet" href="../styles/common.min.css"/>
<link rel="stylesheet" href="../styles/main.min.css"/>
<link rel="stylesheet" href="../javascript/include.aspx?classes=common.css">
<link rel="stylesheet" href="../styles/BL_dev02.css"/>
<link rel="preload" href="../styles/fontsNotoJp.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<link rel="preload" href="../styles/fontsRobotoLt.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
I suggest using Stylus (local CSS overlay) plugin from Chrome, along with Chrome Dev Tools (Elements tab) to identify and then overlay styles. A big one for me is this box not lining up with the pin bar in the current Aras. It drives me nuts.
Here are the styles to make sensible alignment, as well as where to add a very blatant bit of identifier in the header bar:
// Eyes sigh...
.aras-header .aras-header__navigation-button {
width: 2rem;
}
#headerCommandsBar .aras-toolbar__divider {
text-align: center;
}
#headerCommandsBar .aras-toolbar__divider::before {
content: "DEV \2161";
color: #fff;
font-size: 24px;
border: 1px solid;
padding: 0 10px;
border-radius: 50px;
background: #000;
}
Sample result after following all steps
v12 - Authenticated, custom everything from following the above steps.
My D2 icon tells me I'm on my remote dev server, even when pinned and I cannot see the custom title.