Question
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
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.
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);
}
}
});