How to change background colour in ESC portal
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-20-2024 07:46 AM
Hi, in Employee service portal, how to update the background color. Can some one help. The first image in highlighted places it is in Grey. But in second image is it white. I want to have it grey. Both instance theme is same
Image 1
Image 2
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-23-2024 07:19 AM
Hi @Chaiatnya
Open the ESC theme (responsive widget or page) , then add the "background: none !important;" in the CSS variable within the appropriate class.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-23-2024 07:47 PM - edited 09-24-2024 06:03 PM
@Chaiatnya
If you want the background to be applied to single page then you can override the value of background color at page level.
1. Open page in designer
2. Override the variable "$background-secondary" or add a background color overrirde with a class
3. Add use that class in container class if you want color to be applied to specific containers of the page.
If you want to page background to be applied to all pages then you can apply via theme.
1. Go to your theme record in portal
2. Open 'ec-theme-global'
3. Override the background color of body
Thanks
Sajal
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-03-2025 09:57 AM
Adding my solution to this.
Problem: Unable to change the background color, even when using Branding Editor
Cause: There is an "!important" property, that overrides any values given to the background color
Solution: Create a custom Style sheet, and connect it to the Portal theme.
- In the Filter Navigator, write: "sp_css.do" and hit Enter.
- Fill out the form:
Name: my-custom-css - CSS:
body {
background-color: $body-bg !important;
}
- Submit or Save.
- Navigate to: Service Portal > Portals
- Open the portal you want to change the background color of
- Open the record in the "Theme" field
- In the related list "CSS Includes", click "New"
- Fill out the form:
Order: 200 - Click on the magnifying glass for the "CSS Include" field
- Click "New"
- Fill out the form
Name: my-css-include
Source: Style sheet
Style Sheet: The one created in step 4 - Submit
- Verify that the the newly created CSS Include is included in the related list, and that it has the highest "Order" value.
Verification: When portal pages for the portal is rendered, the background color is the same as defined as "Page background" in the Branding Editor.