Portal Styles and Themes
This article will cover the following:
- Background information on how themes work and are deployed
- Modifying the basic theme such as colours.
- Modifying the images on the portal such as logos.
- Modifying the css on to overwrite specific elements of the portal(advanced).
- Deploying your theme to on Azure Devops
- Modifying the interface in Azure Active Directory B2C
In Azure Devops, during the deployment of the portal the pipeline pulls in a theme from a specified Azure storage blob container and overwrites the default one. The portal first reads theme.css, then app-overwrite.css. app-overwrite.css is the last stylesheet loaded and will overwrite any css what it inside it giving full control over any element on the site.
This example a blob container called "portal-lemonedge" was created which needs to hold a folder called "style".
Modifying the theme
theme.css is a collection of variables that provides a basic framework for modifying the colours and font of elements on the page. Simply change the variables defined in theme.css, of which most are colours. You can preview the changes without having to run the deployment pipeline by modifying the variable in browser by pressing F12 and going to the theme.css style sheet.
Modifying the images
To replace specific images provide images with these exact names. background.png - used background image. big-logo.png - displayed on the loading screen. logo.png (alternatively can be a .gif) - displayed in the top right of the portal. icon.ico - tab icon.
Overwriting css
You can write any css into app-overwrite.css because it is applied last it will overwrite any default CSS. If you wish to use a custom font incluse a .ttf file in this directory and reference it by using the following:
@font-face {
font-family: 'font-name';
src: url('font-name.ttf') format('truetype');
}
Simply replace the 'font name' with the desired font
Deploying your theme
Within the portal release pipeline the following variables will need to set.
PortalStylesContainer - the name of the blob container storing the style folder in the example above the name is lemonedge-portal PortalStylesSASKey - the SAS key to the blob container
Once those variables are set you can run the pipeline and during the deployment the tasks will download your theme and overwrite the default theme just before deploying the portal code.
Modifying the interface in Azure Active Directory B2C
Navigate to the resource group that contains your Azuer B2C Tenant inside Azure Portal. Open the B2C Tenant Settings.
Navigate to Company Branding on the left under the manage section, then click configure.
This menu allows for the setting of basic information such as the banner, and sign in page background image.
For advanced customisation navigate to User flows and select the user flow that is used for your portal login.
Navigate to page layouts, on the top bar the a different page template can be selected.
To create a page using custom HTML you would need to make a custom login page, you can learn more from the following articles.