Description
This article only applies to WebCenter 16.0 and newer versions.
Since WebCenter 16.0, it is possible to use a full screen background image on the WebCenter Login page, which automatically adapts to your screen size. When using such an image, you might want to further simplify the Login page and remove any distractions.
This article describes how you can hide the header and footer bars on the WebCenter Login page in case a full screen background image is used, by using Static Text customization.
Procedure
Follow these steps:
Set a Background Image for your Login page on the Customizations page. Make sure to enable Use full screen background image. Your image should be of a decent resolution, but not too large or it might load slowly. For example: 1920x1080 px (72ppi). Here's a sample image to get you started.
Upload a new HTML file in the Static Text section for Login Welcome Message or Login Marketing Message. You can use this sample. The HTML file should contain following CSS styles, if you already have a static text customization in place, simply add these styles to your CSS:
Optionally, modify any values you would like to further change.
WebCenter 18:
.feedbackArea,.loginArea {margin-top:70px !important;} .wcr-page-footer, .wcr-login-footer, .WcrPageContent .navbar-default, .navbar-login {display:none !important;} .w .login-page .big-background-image{top:0px !important;}WebCenter 16:
.feedbackArea,.loginArea {margin-top:70px !important;} .wcr-page-footer, .wcr-login-footer, .WcrPageContent .navbar-default, .navbar-login {display:none !important;} .login-page .big-background-image {top:0px !important;}
The result will be a Login page with a full screen background image and no header or footer (click to enlarge image):
| Article information | |
|---|---|
| Applies to | WebCenter 16.0 and newer |
| Created | 21-Jun-16 |
| Last revised | 11-Jan-19 |
| Author | DEKE |
| Case Number | |
1 Comment
Lavallée, Thierry
Here a new version of the page updated to remove navbar and footer and center the login form
.feedbackArea,.loginArea{margin-top:70px;} .wcr-page-footer, .wcr-login-footer, .WcrPageContent .navbar-default, .login-page .navbar, div.col-xs-12.col-sm-8 div.feedbackArea {display:none !important;} .login-page .big-background-image{top:0px !important;} html, .login-page, .container.login-container, .container.login-container > div, .container.login-container > div > .container-fluid, .container.login-container > div > .container-fluid .row.clearfix, .container.login-container > div > .container-fluid .row.clearfix .col-xs-12.col-sm-4 {height: 100% !important;} .container.login-container, .container.login-container > div, .container.login-container > div > .container-fluid, .container.login-container > div > .container-fluid .row.clearfix, .container.login-container > div > .container-fluid .row.clearfix .col-xs-12.col-sm-4 {display: inline-block; vertical-align: middle; float: none; width: 100%; margin: 0; padding: 0;} .container.login-container > div > .container-fluid .row.clearfix .col-xs-12.col-sm-4 .loginArea {display: inline-block; vertical-align: middle; margin: auto !important; position: relative; top: 50%; left: 50%; height: 200px !important; margin-top:-100px !important; width: 300px !important; margin-left: -150px !important; }