Question
Accenture Inc.
PH
Last activity: 29 Jan 2016 1:54 EST
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,
-
Like (0)
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
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
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?
Accenture Inc.
PH
Hi,
Yes I need the entire page in blue colour.
I invoke page background from harness.
I am using the two column layout.(Sidebar-Main)
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
Sofronio,
Could you please provide screenshots showing the configuration details from your skin?
Thanks!
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.