FlexiPanels CSS for Dreamweaver

Download a free trial of   FlexiPanels CSS for Dreamweaver
Buy FlexiPanels CSS for Dreamweaver
FlexiPanels CSS

Using FlexiSlicer Air application to cut a rounded corner CSS box

This tutorial was made using Dreamweaver and FlexiPanels CSS
box FlexiPanels CSS for Dreamweaver

FlexiPanels CSS for Dreamweaver is a CSS builder that helps you create table-less HTML code for side panels, menu containers or any content zones with a gradient background and rounded corners. Start from a layout picture from your designer or implement any of the 30 ready-made panels and the extension will create the standard compliant DIVs and CSS ready to be implemented in your site, without writing manual code!

Using FlexiSlicer AIR application to cut a rounded corner css box

In this tutorial we will use FlexiSlicer to cut a new skin for FlexiPanels. FlexiPanels creates rounded corners CSS boxes in Dreamweaver. With FlexiSlicer (which is an Adobe Air application) you can prepare the design elements needed for the CSS box starting from a JPG file - much like the Photoshop slicing.

Requirements for the tutorial:

* Dreamweaver (CS3 or CS4)
* FlexiPanels CSS Dreamweaver extension (demo or full version)
* FlexiSlicer Air application (comes with FlexiPanels)
* A rounded corners box design (image)

The result

Using FlexiSlicer you can create new skins or color themes for FlexiPanels - these are basically Rounded corner boxes that you can deploy at any time using Dreamweaver in a HTML page. These skins are added to the gallery available in FlexiPanels:

FlexiPanels interface

and in case you are wondering what FlexiPanels does, it generated DIV and CSS rounded corners code that you can further view and edit in Dreamweaver:

CSS rounded corners code


Tutorial start

The designer prepared for us a box with rounded corners as a JPG file (right click and Save as if you want to use the image for the tutorial):

Box with rounded corners


Installing, locating and using FlexiPanels/FlexiSlicer

You can download a trial of FlexiPanels/FlexiSlicer from here, unzip it and install the .mxp file using the Adobe Extension Manager. Here is a short "How to locate our extensions in Dreamweaver" tutorial. Open FlexiSlicer:

Open Flexi Slicer


Rounded corner CSS box concepts

Before going further and slicing the design, let's have a look at the concepts. Usually a rounded corner css box has 3 areas: a header, a content zone and a footer. The idea is that you could have content on all these areas, for example a title in the header, some description text in the content area and a link in the footer. So basically you have 3 zones where you can add content using Dreamweaver. What FlexiSlicer does is to separate these 3 areas from the main picture and make them ready to receive text (content).

Rounded corner CSS box


Working with FlexiSlicer

Once you clicked on the FlexiSlicer icon on the Dreamweaver bar, a welcome screen will appear where you need to choose if you want to cut the design from a bigger picture or you already have the header/content/footer already sliced (if let's say the designer cut them in Photoshop previously). For this tutorial, we will slice the header/content/footer from a bigger picture, so select the left side option:

Working Mode


Crop the image

Now, if you have a look at the sample rounded corner CSS box image that I showed earlier, you will notice that it has some white background around (I've made it blue below).

Rounded Corner css box canvas

So the first step will be to crop the image to include only the box. First, browse for the image on your machine (click on the "Browse" link):

Browse for image

Cropping is very easy, you just need to move the slicers as close as possible to the box margins. The gray area will be discarded.When you are ready, click on "Crop Selection" button.



Separating the 3 zones (header, content, footer)

Once we have a "clean" box image, the next step is to separate the header, content and footer areas. As I said earlier, you can later add content to these areas in Dreamweaver so we should "mark" them - see the dashes to understand what I mean. Don't worry if you need to add more text, the best thing about the rounded corner CSS boxes generated by FlexiPanels is that you can change the width of the box and make the height fit the content. But more about this later.

Header, content, footer areas

How to separate the 3 areas in FlexiSlicer? Easy, you just need to move the 2 slicing marks as in the screenshot below:


Click "Save Images" once you are ready. This will cut the image and gets you to a new interface where you could actually cut the rounded corners.


Cutting the (rounded) corners

At the previous step we have cut the box image and separated it in one image for the header, one image for the content and one image for the footer. What we need to do in the next steps is to slice each of the three images: we need to slice the corners and the background. First let's have a look at what I mean by corners and background - you can see below the header image that we cut at the previous step:

Header image

I've marked the corners with red shapes:


And the background slice. If you are wondering about the background slice, it will be used on the entire width of the box - but we only need to cut a few pixels.

Background Slice

Here is how the slicing operation looks in FlexiSlicer. You need to move the slicing marks in a way to have the red shapes above created. I did this in the screenshot below - the gray areas will be discarded and what remains are exactly the 4 corners and the background slice. You need to do the slicing for all the box elements (see the Header/Content/Footer menu on the left side).

Slicing elements


Saving the slices

Once you did all the slicing for the header/content/footer, you need to save the slices. You can save them as a skin or color scheme (for the tutorial sake save the slicing as a Skin):

Save as

Let me explain the concepts of "Skin" and "Color Scheme". If you have a look at the FlexiPanels interface you will see there are 2 rows of designs. On the top row you have the Skins which are basically completely different rounded corners CSS boxes designs. For each Skin, you have more Color Schemes - a color scheme is a skin with different colors:

FlexiPanels Interface


Working with FlexiSlicer (advanced)

Once you have the Skin saved you are ready to insert the rounded corner CSS box in your site. You could however make some advanced settings that will be saved as the Skin's default. Click on the "Configuration and Preview" tab:

Slicing elements

Let me explain the new tab. If you remember what I said earlier, basically the header/content/footer are zones where you could insert content (text). In the "Configuration and preview" tab you can make some basic settings for the text inside the box:

  • Set the background height. You can set a size in pixels, or even nicer, set it to "fit content". Fit content means that the background will increase height automatically depending on the text length.
  • Background Resizing. As I said earlier, the nicest thing about FlexiPanels is that you can make the box as wide and as long as you want. And to make things even nicer, you can set the background to stretch or to repeat.
  • Font family, size, bold, italic, underline, color. When you type in Dreamweaver, the text will automatically use the style you define here so you don't need to make individual settings for the text later.
  • Paddings. You can set the default content padding from here.

Configuration Tab


Inserting a Rounded Corner CSS box in a HTML page

Once you have the skin sliced with FlexiSlicer, when you save, it will automatically appear in the FlexiPanels designs gallery. Click somewhere on your page in Dreamweaver (between the <Body> tags), select the design from FlexiPanels and Click on "Save". This will insert the code for the rounded corners CSS box in your page:

CSS rounded corners code

PS: here is a video tutorial on How to use FlexiSlicer.