Elxis templates tutorial - Rounded corners

In this tutorial we will show how you can display modules with rounded corners in Elxis CMS. You can create rounded corner modules with or without border. First, let's make a small introduction to the CSS Box Model.

The box model

Each html element is like a square box. The outer limits of this box are defined by the border. The space between the border and the box contents is called padding. The left space outsize the border is controlled by the margin. When you set border and padding to an html element using CSS then the whole box dimensions are increasing (or decreasing) by the amount of padding plus border.

Example:
box width: 200px;
box height: 150px;
We apply padding to 20px and border to 5px;

The final box will have width: 250px and height: 200px;

This box is actually a rectangle. We will show you how you can curve the box corners using only CSS and how you can create modules with rounded corners in Elxis CMS.

Curving box corners

The creation of rounded corners boxes with CSS is easy! There is a number of methods that allows you to do so. Some of them use JavaScript to curve box corners, some other not. Elxis recommends you a CSS only based method. In order to have rounded corners in your module you should load these modules in your template using the style -3.

mosLoadMolues('position', -3);
 //or
 elxLoadModule('mod_name', -3); 

When setting style equal to -3, Elxis CMS generates html as follows:

<div class="module-round">
     <div>
         <div>
             <div>
                 <h3>Module title</h3>
                 Module content
             </div>
         </div>
     </div>
 </div> 

As you see from above, Elxis creates a surrounding div having class module in which we have added the suffix -round from the module's parameters. Inside this div Elxis generates 3 more divs one inside the other. Inside the third div is where our module is located. The module's title is surrounding by h3 tags.

Consider these four divs as our box corners. In order to curve this box corners we will place curved images as background to each one of these corners. Off course the box can not be really curved, it is an eye-trick.

Rounded Corners without border

Open your favourite image editing program (gimp, photoshop, paintshop pro, etc) and create a cycle of 40 pixels in diameter. Give this cycle as background colour the background colour of the area in your template where you want to place the rounded corners module. Crop the four quadrants of this cycle and create four images each one having width 20px and height 20px. Name your images as shown bellow:

tl.gif (top left image)
tr.gif (top right image)
bl.gif (bottom left image)
br.gif (bottom right image)
Save these images inside your template's images directory.

Now we need to work on CSS. Open your template's CSS file (usually template_css.css) and add the following code.

/* First div (top left) */
 div.module-round {
     background: #FF0000 url(../images/tl.gif) 0 0 no-repeat;
     margin: 0;
     padding: 0;
 }

  /* Second div (top right) */
 div.module-round div {
     background: url(../images/tr.gif) 100% 0 no-repeat;
 }
  /* Third div (bottom left) */
 div.module-round div div {
     background: url(../images/bl.gif) 0 100% no-repeat;
 }

  /* Forth div (bottom right) */
 div.module-round div div div {
     background: url(../images/br.gif) 100% 100% no-repeat;
     padding: 10px;
     width: auto !important;
     width: 100%;
 } 

Our CSS is ready. The module's content is located inside the forth div element, that's why we added some padding in that div. We also added background colour to the first div, for this example we set it to red. When finish our module will look like this:

Rounded Corners with borders

We will examine now how we can create modules with rounded corners having a border. The method that we will use is like the one we used above without borders, except from the image cropping part. The trick is that we will add the border to the background images and we won't use CSS for the borders. This method makes the display of modules with rounded corners with border a piece of cake! Another interesting part is how we crop our four images. See in the image in the right how this is done. Important: Your image dimensions should be greater than the final module dimensions. For example, if you wish to display this module in your left column having width 200px and height around 300px give this image width 400px and height 500px. The CSS code is the same as above except that we do not need any more a background colour to the first div as we have now a big background image there (tl.gif).