Slide me some content

All YJSG based templates come with 3 sliding panels that you can use to populate your content. Sliding panels are completely responsive and are visible on all devices. Their locations are:

• Page top above header - contains 5 modules grid with module positions names tpan1 - tpan5
• Page bottom below footer - contains 5 modules grid bpan1 - bpan5
• Page left side - contains 1 module position with name sidepanel

Top Panel

Bottom Panel

Side Panel

Panels settings

Panels can be activated all at once or individually. To activate sliding panel just publish your module in any of module positions mentioned above. Panels settings including the width adjustments for modules in top and bottom panel, can be found in template manger
under the tab name Layout .

Panels styling

Panels are very easy to style and they do not contain any images.
Default panels style is located in site_root/templates/yjsg_based_template/css/yjsg_layout.css .
Panels default background color is white but it can be changed with few simple CSS rules.

/* top panel container */
#yjsg_toppanel_slide {
background:#0ebcd1;
color:#fff;
border-bottom:1px solid #098594;
}
/* top panel open/close button */
#yjsg_toppanel_open {
background:#0ebcd1;
color:#000;
border:1px solid #098594;
}
/* side panel container */
#yjsg_sidepanel_slide{
}
/* side panel open/close button */
#yjsg_sidepanel_open{
}
/* bottom panel container */
#yjsg_botpanel_slide{
}
/* bottom panel open/close button */
#yjsg_botpanel_open{
}

The above code would result in following top panel style