Posted: 12 Sep 2016 2:25 EDT Last activity: 10 Oct 2016 2:36 EDT
How to remove background color in Screen layouts Slider (Skin)
Hello, Guys ! In the Skin of Application (Menu: Open Application Skin -> Screen layouts -> Style: Header Left ) I can customize Left Panel (Sidebar). When I added Responsive Breakpoint for it "At the dimensions provided below, this panel will be accessible from an icon in the header." it works well. But when Left Panel (Sidebar) appears by pressing the "icon in the header", it has dark background color. The Center Panel has dark background color too at that moment. My question is: How to manage this dark background color from Application Skin ? How to remove it to see original colors and make Left Panel (Sidebar) just slide lift-right by clicking on Icon ? Thanks for your help.
***Updated by Moderator: Vidyaranjan. Removed user added #helpme and Ask the Expert tags. Apologies for confusion, shouldn't have been an end-user option***Tagged SRexists***
The dark background colour used by the side menu is defined in the py-responsive-overrides css rule attached to the pyEndUser skin (Included Styles / Additional Style Sheets) inside a media query. So you would either need to edit this, or comment out that style to remove it.
The darker middle panel is a screen mask, as when the menu is open you cannot interact with the middle panel.
I saved your jquery code in Technical -> Text File as "webwb • LeftSliderHide • js".
Then I added it in my Harness on "Scripts & styles" tab. I don't add any other scripts because I use PRPC 7.1.8 with already included bundle pzpega_ui_jquery in Harness. I checked and found link to my LeftSliderHide.js script and pzpega_ui_jquery.js on source HTML page.
It looks like it's all right, but Left Panel (Sidebar) don't hide when I click on Menu on Left Panel.
Could you advise me, please, what's wrong ?
First you need to check if there are elements with id "sidebar-region-one" (or) "screen-layout-mask" in the DOM. If it does exist then you can check whether its entering our function using console.log statements.
Hello guys, let me join to discussion please.
Both elements are existing in the DOM.
I added @sents’s script in Harness -> Scripts & Styles -> Scripts as js type. I also added some alert() inside it to see if the function was called, but it seems to be not.
The same functionality is already implemented in Pega 7 Designer Studio, when you resize your browser width (
do you have any idea why the script isn't working?
Please suggest how to check whether its entering our function using console.log statements? I think it isn't, because I added some alert() inside the script but it wasn't called.