• Cameras
• Desktops
  • PC
  • Mac
• Laptops & Notebooks
  • Macs
  • Windows
• Tablets
• Phones & PDAs
• T-Shirts

Create a Rounded Border With Freestylebox!

It really is very easy to create the box style shown on the left - you just have to know how to do it! There are two ways you can approach this, and I'm going to show you them both. Choose the method that suits you the best. Both methods involve editing the source code, but there's no need to be afraid. The two methods are: Create a style in the Opencart stylesheet which can then be used for other "boxes" with a simple call in the editor. Create the style for the individual box within the editor ​1. Create the style using a stylesheet First you need to open the file catalog/view/theme/yourtheme/stylesheet/stylesheet.css in a text editor. Replace yourtheme with the name of the the theme your store is using. Add the following code at the bottom of the file: .freestylebox {    min-height: 150px;    padding: 10px;    margin: 5px;    border-top: 2px solid #f00;    border-left: 2px solid #f00;    border-right: 2px solid #f00;    border-bottom: 2px solid #f00;    -webkit-border-radius: 10px 10px 10px 10px;    -moz-border-radius: 10px 10px 10px 10px;    -khtml-border-radius: 10px 10px 10px 10px;    border-radius: 10px 10px 10px 10px;    -webkit-box-shadow: 0px 2px 2px #DDDDDD;    -moz-box-shadow: 0px 2px 2px #DDDDDD;    box-shadow: 0px 2px 2px #DDDDDD;    background: #ffc; }

Save the file, and upload it to it's original location (you can play around with the settings as you see fit).

The next thing to do is to create your new Freestyle box. Go to Extensions | Modules and edit Freestylebox.

Create a new box by clicking the (+) icon next to the Add Module Tab

Make sure you have selected 'No Style, No Heading' in the Style section, then click on the Source button in the text editor : 

Type 

<div class="freestylebox">Content</div>

in the content area, then click the Source button again. Highlight (doubleclick) the word Content in the editing area, and create your own masterpiece.

Don't forget to set the layout, postion and sort order of your freestyle box, then click Save. Click the link at the top right hand side of the page to check out your work.

Alternatively, you can

2. Create the style within the editor.

Create your new Freestyle box. Go to Extensions | Modules and edit Freestylebox.

Create a new box by clicking the (+) icon next to the Add Module Tab

Make sure you have selected 'No Style, No Heading' in the Style section, then click on the Source button in the text editor : 

This time, type 

<div style="min-height: 150px;

background: #ffc;">Content</div>

in the content area (note the change to 'style =' from 'class=', then click the Source button again. Highlight (doubleclick) the word Content in the editing area, and create your own masterpiece.

Don't forget to set the layout, postion and sort order of your freestyle box, then click Save. Click the link at the top right hand side of the page to check out your work.

This method gives you the flexibility to have different styles of Freestyle box on the same page.