Spry

Style the Sliding Panels widget

The SprySlidingPanels.css file provides the default styling for the Sliding Panels widget. You can, however, easily customize the widget by changing the appropriate CSS. The CSS rules in the SprySlidingPanels.css file use the same class names as the related elements in the widget’s HTML code, so it’s easy for you to know which CSS rules correspond to the different sections of the Sliding Panels widget. Additionally, the SprySlidingPanels.css file contains class names for widget behaviors.

The SprySlidingPanels.css file should already be included in your website before you start customizing.

 To change the widget’s styling, use the following table to locate the appropriate CSS rule in the SprySlidingPanels.css file, and then alter the rule according to your liking.

Rule

Description

Example of properties and values to change

.SlidingPanels

Added to the outer container of the widget, and determines the size of the opening through which you view content. Generally, the size of the opening should match the size of your content panels.

width: 100%; height: 400px;

.SlidingPanelsContentGroup

Added to the first inner tag that contains all the content panels, and defines the size of the content panel container. Setting the width, height and float of this panel determines how the panel moves: horizontally, vertically or diagonally, as Spry always determines the shortest path to the selected panel.

position: relative; width: 100%;

.SlidingPanelsContent

Added to the individual content panels of the widget, and determines their size. Generally, the size of the content panels should match the size of main widget container.

width: 100%; height: 400px;
Note: Because of differences in browser implementation, the Sliding Panels widget cannot process margin and padding properties when they’re on the widget’s structural elements. To use margin and padding properties in the content panel, apply the properties to a tag within the content panel, not on content panel tags.