Custom Blocks in 6.1X

For those of you looking to use borderless or different designs for your individual blocks, now you can.

This is a simple example of 2-column page using two borderless blocks....

Borderless Blocks

This Tutorial involves using a couple of different areas in your Dolphin, the html pages and the database.

Dolphin 6.1X versions give you the ability to control how individual blocks are styled on your pages through the database.

If you open your database and go to the PageCompose table, you can see that each block contains a DesignBox item.  (See Below)

Table Page Compose

Notice that in this instance, the DesignBox field is set to 1.  This is the DEFAULT setting and refers to the designbox_1.html file in your tmpl_uni folder.  You'll also notice a designbox_0.html and designbox_2.html file there too.  If you open each, you'll see that designbox_0.html differs from designbox_1.html in a very important way...

designbox_1.html contains the code for the top and bottom borders surrounding the main content of the block.

designbox_0.html  contains only the block content with the borders stripped out.

So, if you want to place a picture or element WITHOUT a border on your page, just change the DesignBox field value to a 0 (which tells the block to use designbox_0.html.

In this way, you have control over how each block on your page is displayed.  You could go even further and create as many different designbox_#.html as you want, each containing different code to reflect how you want that particular block displayed.

One note.  Every designbox with a BORDER will use CSS styles to display the borders properly.  You will need to add or modify the existing css information for every new block you create.

To create new css styles or to modify the existing styles, open your general.css file in your tmpl_uni/css folder and look for ".disignBoxFirst" headings.  You should be able to figure out what's going on simply by looking at how the css is handling the block borders, colors, etc.  You can simply copy and paste the same code and just rename it to .disignBoxFirst1 or something to differentiate it from the rest.

Now you have the ability to create as many different blocks as your imagination can conceive.

Good Luck and Happy Designing!

Quote · 11 Mar 2010

I actually did this by having blocks have no style at all, and having everything set in the HTML code.

Ah, those were the days...

Also, what's up with the advert-like image?

BoonEx Certified Host: Zarconia.net - Fully Supported Shared and Dedicated for Dolphin
Quote · 11 Mar 2010

That image is just the two blocks from my main site page (I used it since it did not have my site name anywhere on it.)

Quote · 11 Mar 2010
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.