Customizing the logo
Customizing the logo is done by overriding the default AdminWeb css.
Overriding the css classes
The logo is presented in two positions:
-
the 'Log In' page
-
the top navigation bar in the secured administrative section
To override the logo in those positions, you can customize the following css classes
.form-signin .page-header {
background: url("../images/across-logo.svg") no-repeat center top; (1)
padding-top: 75px;
background-size: 75px 75px
}
.navbar.navbar-default .navbar-header {
background: url("../images/across-logo.svg") no-repeat left center
}
.navbar-header {
background: url("../images/across-logo.svg") no-repeat left center;
padding-left: 20px;
background-size: 40px
}| 1 | Set a custom url for the background image. This url contains the path to the new logo. |
In the example, the path to the image is a relative path.
Across will by default serve resources from the resources/views/static directory.
See the reference documentation for more information on static resources.
Adding the css file
To ensure that your css is picked up, you need to register it when the adminWeb template is build.
@Configuration
@RequiredArgsConstructor
public class AdminUiConfiguration
{
@EventListener(condition = "#template.templateName=='adminWeb'") (1)
public void registerCustomCss( BuildTemplateWebResourcesEvent template ) {
template.applyResourceRules(
WebResourceRule.add( css( "@static:/demo/css/adminweb-logo.css" ) ) (2)
.withKey( AdminWebWebResources.NAME + "-logo" )
.replaceIfPresent( false )
.toBucket( CSS )
);
}
}| 1 | The css should be added when the template for adminWeb is build. |
| 2 | The path of the css file is relative to the resources/views directory.
This means that the file is located in resources/views/demo/css/layout-admin-web.css. |