Home > Working withFlexiPanels CSS > Setting up the cutting points in FlexiSlicer

Overview

Once you have the header, content and footer for the Panel as separate pictures, the next point is to set the cutting points for each element. The purpose of this step is to cut as separate pictures the (rounded) corners and a slice of the container background that will be either repeated either streched to match the height of the elements or fit the content.

1. Open the FlexiSlicer interface

In the FlexiPanels CSS Tab click on the FlexiSlicer button to open the FlexiSlicer Interface. There are 2 options to go ahead:

• Cut the Panel elements - header, content, footer - from a bigger layout
• You already have the Header, Content and Footer as separate pictures

 

2. Setting up the cutting points in FlexiSlicer

In this step you should set the markers to cut as individual pictures the (rounded) corners, margins and a slice of the background. These design elements will be embedded in the CSS and used later to create the DIV based panel layout.

You should try to cut the corners, margins and background slices as small as possible to get the maximum space for the Panel Content. The slicing should be reapeated for all the Panel elements - header, content, footer -

3. Preview the new skin and save the new Panel in the gallery

At any point during the markers setting you can save the new skin and also preview the result (click on Update Preview). When you are done, close the FlexiSlicer Interface - this will save your new Panel in the Panels gallery. To use the new Panel, use the regular steps in the Quickstart – using the built in panels gallery documentation.