Question
JSC Sberbank of Russia - Ukraine
UA
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***
Accepted Solution
Pegasystems Inc.
GB
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.
JSC Sberbank of Russia - Ukraine
UA
It works.Thank you !
Could you, please, advise me how to automaticaly hide Left Panel (Sidebar) when user click on menu item on it ?
Blue Rose Technologies GmbH
DE
This is the jquery code snippet which is used to hide / display the left pane in designer studio screen. Basically this is accompolished by adding and removing the bodyClass style.
$("aside#sidebar-region-one" || "#screen-layout-mask").click(function(){
var bodyelem= $("body.with-fixed-header");
var bodyClass="left-panel-collapsed";
var resizeElem=$("#sidebar-collapse-left");
if (resizeElem.hasClass("collapsed")){
bodyelem.addClass(bodyClass)
}else{
if(bodyelem.hasClass(bodyClass)){
bodyelem.removeClass(bodyClass);
}
}
});
JSC Sberbank of Russia - Ukraine
UA
Great !
Thank you for help.
Blue Rose Technologies GmbH
DE
Always welcome!!
JSC Sberbank of Russia - Ukraine
UA
Hello, sents
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 ?
Blue Rose Technologies GmbH
DE
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.
SB
UA
Hello guys, let me join to discussion please.
Both elements are existing in the DOM.
The left panel hides only by clicking on mask (div with id “#screen-layout-mask”) and NOT by clicking on any link within the left panel (div with id “#sidebar-region-one”). But the same behavior is to be observed without adding this script. Despite it exists on the page as "script type="text/javascript" src="webwb/leftsliderhide_13906570998.js!!.js" looks like it is simply ignoring.
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 (
SB
UA
Hello sents,
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.