Skip to main content

This content is closed to future replies and is no longer being maintained or updated.
Links may no longer function. If you have a similar request, please write a new post.

Question

 Volodymyr Kanivets (VolodymyrK)
JSC Sberbank of Russia - Ukraine

JSC Sberbank of Russia - Ukraine
UA
VolodymyrK Member since 2013 5 posts
JSC Sberbank of Russia - Ukraine
Posted: Sep 12, 2016
Last activity: Oct 10, 2016
Posted: 12 Sep 2016 2:25 EDT
Last activity: 10 Oct 2016 2:36 EDT
Closed
Solved

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***

To see attachments, please log in.
User Experience
Support Case Exists

Accepted Solution

Posted: 8 years ago
Posted: 12 Sep 2016 6:00 EDT
Marc Alderman (Marc Alderman)
PEGA
Senior Principal Engineer, Technical Support
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.

 

To see attachments, please log in.
Posted: 8 years ago
Posted: 19 Sep 2016 10:54 EDT
Volodymyr Kanivets (VolodymyrK)
JSC Sberbank of Russia - Ukraine

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 ?
To see attachments, please log in.
Posted: 8 years ago
Posted: 19 Sep 2016 18:07 EDT
Sathishkumar Senthilkumar (sathishsenthil)
Blue Rose Technologies GmbH
Pega COE Lead
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);
          }
      }
          
  });

To see attachments, please log in.
Posted: 8 years ago
Posted: 21 Sep 2016 9:54 EDT
Volodymyr Kanivets (VolodymyrK)
JSC Sberbank of Russia - Ukraine

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 ?
To see attachments, please log in.
Posted: 8 years ago
Posted: 26 Sep 2016 10:15 EDT
Sathishkumar Senthilkumar (sathishsenthil)
Blue Rose Technologies GmbH
Pega COE Lead
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. 

To see attachments, please log in.
Posted: 8 years ago
Posted: 28 Sep 2016 7:06 EDT
Dmytro Burdyga (DmytroBurdyga)
SB

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 (
To see attachments, please log in.
Posted: 8 years ago
Posted: 10 Oct 2016 2:36 EDT
Dmytro Burdyga (DmytroBurdyga)
SB

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.
To see attachments, please log in.

We'd prefer it if you saw us at our best.

Pega Collaboration Center has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice