CSS Styling Off Canvas Sidebar [#2161419]

Hello i was wondering how to style the sidebar when it is closed as per the attached image

the selector .l-region l-region--sidebar-second seems to target it be it open or closed. I was hoping just to change the css on it when closed to remove the overhang etc.

Can anyone shed any light on this at all for me?

thanks

Comment	File	Size	Author
#1	Capture.JPG	50.13 KB	fadgadget

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

fadgadget CreditAttribution: fadgadget commented 22 December 2013 at 20:02

File	Size
Capture.JPG	50.13 KB

Comment #2

karolus CreditAttribution: karolus commented 27 December 2013 at 14:30

Correct me if I'm wrong, but what you want to do is hide the area with the gray boxes (vertical menu) on the RH side of this layout?

If so, it can be done with adjusting the positioning elements in the _off-canvas.scss file.

Probably, the first thing to try would be this tag (original):

  .js .l-page {
    position: relative;
    height: 100%;
    padding-left: 12%;
  }

Changing the padding-left value to 0 should be all you need to do, but make sure it doesn't interact with any other layout styling modifications you have made.

Comment #3

fadgadget CreditAttribution: fadgadget commented 25 January 2014 at 19:52

thanks karolus. Ive had time off from my drupal websites due to 'drupal induced madness'. Lets see how i get on with your help above.......

mmmmm im not doing too well im afraid karolus :( I copied the _off-canvas.scss file from
public_html/foobar.com/sites/all/themes/omega/omega/css/layouts/off-canvas

to my subtheme
public_html/foobar.com/sites/all/themes/fudtheme/sass/layout/off-canvas

ah! i see what i did there. lets try moving it to the right folder......
public_html/foobar.com/sites/all/themes/fudtheme/css/layouts/off-canvas

and then i added a

background:pink (as a test)

to the css you mentioned above, cleared the cache via drush and alas nothing is changing.

One thing ive noticed though is when editing the new _off-canvas.scss the file address when editting is-

/home/onlineba/public_html/fudbook.com/sites/all/themes/fudtheme/css/layouts/off-canvas/_off-canvas.scss

ie its added /home/onlineba/ before the public_html address. Would i be right in thinking that i havent set some SASS thingy up right on my server?

Thanks

Comment #4

fadgadget CreditAttribution: fadgadget commented 25 January 2014 at 20:07

that all said if i add

.js .l-off-canvas {
background: none repeat scroll 0 0 #FFFF00;
bottom: 0;
cursor: pointer;
left: -70%;
padding-top: 24px;
position: absolute;
top: 0;
transition: left 0.2s ease-in 0s;
width: 80%;
z-index: 99;
}

to
/home/onlineba/public_html/foopoo.com/sites/all/themes/fudtheme/css/fudtheme.hacks.css

it seems to do as i had hoped. Im sure i could work it out from there. Thanks again