Pega 7 Custom Background Color
Hi guyz,
I'm trying to customize the background color and I already added the background color in Component Styles -> Page but only half a filled with the color and the other half is grey.
I appreciate if someone can help me with this.
FYI I am using Pega 7.1.9
Thanks,
Accepted Solution
Pegasystems Inc.
US
There is a CSS text file rule included by the skin, py-enduser71-workarea-overrides. The first selector is:
html {
background: #ececec;
}
You can adjust the background color here to match your custom color.
Common Wealth Bank of Australia
AU
If possible Can you please post a screenshot of your current screen and the details on the component style that has been modified?
Thanks,
Sri
Accenture Inc.
PH
As you can see in the image attach, half is blue (custom background) but the other half is grey.
I already added custom skin rule and I configured page background.
Common Wealth Bank of Australia
AU
Do you need the entire Page Background in blue colour?
Where did you invoke this Page Background style from Harness or from a Section?
How is the layout defined?
Accepted Solution
Pegasystems Inc.
US
There is a CSS text file rule included by the skin, py-enduser71-workarea-overrides. The first selector is:
html {
background: #ececec;
}
You can adjust the background color here to match your custom color.
Common Wealth Bank of Australia
AU
Hi.
I am able to acheive the same concept with entire background changed in red colour.
For the same setup that you have explained.
I have tried the following and it worked for me. I am using Pega 7.1.9 as well.
- Created a Simple Harness
- Added a Section in the Harness
- Added the two column layout inside the section (two-col-sidebar-main).
- In the Skin rule -> Change the container Default (if you want this to be your default colour).
- In the Body Tab, change the background to "Use mixin" option and then select the Page Background in the Mixin.
- As shown below.
This has changed the entire page background to red for me.
Below is the screenshot of my preview harness
Entire page is in red.
Hi.
I am able to acheive the same concept with entire background changed in red colour.
For the same setup that you have explained.
I have tried the following and it worked for me. I am using Pega 7.1.9 as well.
- Created a Simple Harness
- Added a Section in the Harness
- Added the two column layout inside the section (two-col-sidebar-main).
- In the Skin rule -> Change the container Default (if you want this to be your default colour).
- In the Body Tab, change the background to "Use mixin" option and then select the Page Background in the Mixin.
- As shown below.
This has changed the entire page background to red for me.
Below is the screenshot of my preview harness
Entire page is in red.
In your requirement, if you don't need the default colour as red, you can then create a custom container format and use that format in the two-col-bar layout.
Let me know if that helps.
Regards,
Sri
Accenture Inc.
PH
Thanks, Sorry I forgot to explain, The page background should be blue but the content in a container should be blue.
like the one below
but as it turns out the blue background is there but only half of the page and the other half is grey like below.
I want it to look something like below.
Citicorp Services India Private Limited
IN
Hi Sofronio,
If you need the entire page background color to be blue, you need to update the styles for the Layouts which is used in the Harness rule.
For example: The OOTB Case Manager portal uses Screen Layout - Header Left configuration. You have to change the background color style for this Layout in the skin rule.
Could you please try this at your end and let me know whether this helps?
Thanks,
Gowrishankar.