Support Contact:
Phone: +40 (21) 310.63.42; Forums:

How to create a CSS box with rounded corners with FlexiPanels CSS and Dreamweaver

I think in 99% of the cases, if you are a Dreamweaver user and deal with design implementations work starts by getting the layout from the designer and you are supposed to make the site code that replicates exactly the layout. And designers can be picky! Nowadays you are supposed to create table-free code using DIVs and CSS, which can be a headache sometimes, especially if the designer threw in some rounded corner boxes and containers. So basically you have to cut the design elements probably using Photoshop and handcode the DIVs, but is there a better way to do this? What if you could do all this using just Dreamweaver and a Dreamweaver extension called FlexiPanels CSS? What if with the extension would lay out the CSS compliant code for the boxes and also help you cut the design? Let me show you how to do that.

This tutorial was made using:

FlexiPanels CSS

FlexiPanels CSS 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!
See more

The result

Let’s start with the result – let’s say the layout you got from the designer looks like the one below and you need to build the code for the 3 boxes in the center (this layout sample is provided curtoasy of JustDreamweaver).

Layout from the Designer

Lay down the container for the 3 boxes

First thing to do would be to create the very basic container for the 3 boxes.

Container for the 3 boxes

You can copy-paste the code below, which is very basic.

<div id=”container” style=”width:1200px”>

<div id=”box1″ style=”float:left; padding:10px; width:300px”>1</div>

<div id=”box2″ style=”float:left; padding:10px;width:300px”>2</div>

<div id=”box3″ style=”float:left; padding:10px;width:300px”>3</div>


<div style=”clear-both”></div>

Let’s cut the left green box from the layout

Now, the good news is that FlexiPanels CSS comes by default with FlexiSlicer, and Adobe Air based tool that cuts and crops images making them ready for the FlexiPanels CSS. Just make sure you have Adobe Air installed (it’s free).

Open FlexiSlicer from within FlexiPanels CSS

Here are the instructions on how to open FlexiSlicer (follow steps 1 to 4). The first step is to crop the green box from the bigger layout, then we will separate the feader, content and foother of the box.

Crop Panel (your green box)

The first screen will ask you if you want to crop the Panel from a bigger layout or if you already have the header, footer and content pictures separatelly. Click on “Crop the Panel from a bigger layout” and enter a new name for the skin, lets say “greenbox”.

Crop the Panel from a bigger layout

This will get you to the FlexiSlicer first step, where you should browse for your layout image and crop the green box. Make sure the crop follows exactly the box margins and once you are satisfied, click on “Crop Selection” button.

Crop Selection

Separate the box Header, Content and Footer

Next on the agenda is to separate the header, content and footer. Once you clicked on “Crop Selection”, the wizard will get you to the next step where you should move the markers to define the cutting points to separate the 3 elements. Top marker should be just below the header, and bottom marker should be just below the content. In this particular case, we don’t really have a footer for the box, so we will set the marker just below the text.

Set the markers to separate Header, Footer and Content areas

Click on Save Images when you are done, this will cut the images and open the main FlexiSlicer application

Preparing the header

Ok, at this point, you have the header separated, and we will need to create the DIVs that will allow you to replace the text written by the designer (This is the left box) with the proper text (static and even dynamic from the database).

Preparing the header

There are 2 challenges at this point: cut the header corners and make space for the content that should be there. There are 2 types of markers – the markers that cut the coners and the markers that cut a slice of the background. Of course, as the designer dummy text is there, will have to get around it. You will need to cut the corners as small as possible (to leave the maximum space for the text content) and slice the background in a region without text. Here is how the cutting markers look initially:

Cutting markers - initial position

And here is the ideal position: (background slice should be as smoll as possible so it loads faster, and the bottom marker can be at the bottom line as we don’t have rounded corners there)

Cutting markers - final position

Preparing the content and footer

Click on Content and Footer in the Left side menu and repeat the operations. For the futter, pay attention on the round corners :) Once everything is done, click on save skin on the header menu.

Set the style for the box content

At this point you are almost ready! Let’s go to the Configuration Tab and set the default styles for this new Panel. The green box that came from the designer has around 195 pixels width and 120 height, and the text is white for the header and gray for the content.

FlexiSlicer Configuration Tab

Let’s make the header height around 25 pixels, font familly Arial, size 16 and color white. In the text area write “This is the left box” – using the same text as the designer did will help you check how close the final result is from the layout the designer sent in. Switch to Content Configuration from the left menu, make the text gray, size 12 and set the height to 90px (don’t worry if you have more text, the code will resize accordingly to your content, just set the background resize to repeat). In the Footer configuration set the height to 25 pixels and delete the text from the textarea.

Preview the changes and save the new skin

While you are in the Configuration Tab, you can preview your settings by clicking on update preview. You can see how the result will look like when you insert it in a HTML page in the preview window in the right side. Once you are satisfied with the changes, click on Save Skin. Just to make a review on what we did so far, we cropped the box (panel) from the general page layout, we separated the box header, content and footer and we defined the default content style. We now need to use FlexiPanels CSS to create the DIV code that will display the panel elements in the page just like in the design.

Open FlexiPanels CSS

First thing first: click on the container we have created in part 1, where you should place the green box, then open FlexiPanels CSS. Here are the instructions on how to open FlexiSlicer CSS (follow steps 1 to 3).

Browse and select the green box panel from the gallery

When you saved the panel skin in the steps above, the box was actually automatically added to the panels gallery in FlexiPanels CSS. Now you just have to retieve the new panel and make some settings – FlexiPanels CSS will create the entire DIV structure for you. Once you find your design in the gallery, click on it and on the right menu set the panel width at 195px.

FlexiSlicer Select Panel

Customize the content style (optional step)

While we did some default settings for the height and font style in FlexiSlicer for the text conten, it’s very easy to make more adjustments before inserting the panel in the page. Switch to the Configuration Tab and make any changes you might need.

Inserting the panel in the page

When you are ready, click on the Insert button. This will create the DIV layout, CSS file and save the pictures you have previously prepared. All you need to do now is to add the content! Happy coding!

Facebook comments:

3 Responses to “How to create a CSS box with rounded corners with FlexiPanels CSS and Dreamweaver”

  1. Ciprian says:

    unfortunately the trial doesn’t work… Actually I do not understand why you have a trial version if it doesn’t work anyway?

  2. admin says:

    The trial kit has been updated and should work now!


  3. ciprian says:

    indeed! it works and the plugin is really interesting and easy to use!

Leave a Reply