Custom Design Boxes - Each block on page can be different.

I posted this at some point, but the post is difficult to find as it was quite some time ago. So i am reposting it here.

Although not documented, dolphin allows for custom design boxes. That is each block on the page can be styled and colored differently from other blocks on the page.

One of my mods called Block Tools allows you to change the design box number for page blocks, but the actual design is up to you.

Below are the instructions on how to do this.

NOTE: These instructions are for the base templates and CSS. If your running a custom template then you should do this in your custom templates folder instead of the base folder.

First in templates/base/ make a copy of designbox_1.html and name it designbox_4.html

Edit designbox_4.html and rename the css class names so they look like this.

<div class="disignBoxFirst4">
<div class="boxFirstHeader4"><div class="dbTitle4">__title__</div>__caption_item__</div>
<div class="boxContent4">__designbox_content__</div>
__bottom_item__
</div>

save the file and upload to your server.

That creates a new design box to use. Now you need to add css for it so you can change its colors.

now edit templates/base/css/general.css and add this to the bottom.

.disignBoxFirst4 {
position:relative;
border:1px solid #0D3966;
margin-bottom:10px;
background-image:url('../images/head_cutting.gif');
background-repeat:repeat-x;
background-color:#000000;
}
.boxFirstHeader4 {
height:17px;
padding:3px 0px 0px 8px;
font-size:12px;
font-weight:bold;
color:#FFF;
text-align:left;
border-bottom: 1px solid #0D3966;
}
.boxFirstHeader4 a,  .boxFirstHeader4 a:link,  .boxFirstHeader4 a:active,  .boxFirstHeader4 a:visited {
text-decoration: none;
color: #FFF;
}
.boxFirstHeader4 a:hover {
text-decoration: underline;
color: #FFF;
}
.boxContent4 {
overflow:hidden;
font-size:13px;
padding:10px;
}

.disignBoxFirst4 .boxFirstHeader4 .dbTitle4 {
position: relative;
float: left;
}


Now all you need to do is edit the database table sys_page_compose, find the page block you want to change and change the designbox field from 1 to 4

My block tools mod also allows the design box number to be changed from within admin without having to manually edit the database. That can be used instead of the database edit above.

If you manually edit the database instead of using my tools, then you will need to also clear the DB cache.

hello deano first i would like to thank you for your mods and

the assistance you give to everyone in the forums quite freely .. there are 2 things I could do with assistance with ..

firstly i implemented your face book pic mod to remove drop down box and replace with login picture which is great show up on sign up page ..

is there a way to show it in the log in box on home page or did i just make the image to big for box 50px 50px ??but the drop down didnt disappear .i am using the latest script

secondly i would like to know if you have a fix to get the upload picture link which is in the profile picture holder box when a profile is new but when you upload a picture the picture covers the area where the upload picture link is.. how can i put the upload link above the small pictures ..?

once again i would like to say thanks on behalf of every one you have assisted with your knowledge help and assistance ..

THANK YOU

My facebook connect support forum should have been used for your first question. http://www.boonex.com/unity/forums/topic/Deanos-Facebook-Connect-Support.htm

You second question you should have started your own topic on. Unless you already did. Which i believe you did but have not yet received a workable answer.

Posting off topic in a forum causes disorganization of the forums and should not be done. Forum questions and answers should remain within the topic of the forum. Posting off topic also affects the search results causing topics that are not really relevent to appear in the search results.

Answer to your first question. Whenever code changes are made that affect the page blocks, the cache needs to be cleared. So try that. If still no go, then post in my support forum where the question belongs and i will assist there.

As for your second question. I do not have an answer for that because i do not know.

Thank you Deano. I had a feeling you will have the answer to that issue.

You are doing the most amazing job on the forum and helping a lot of people around the world.

All the best.

Yuval

Deano thank you for this... Does this mean that I can have a different back ground image on different pages of my website? Or does this code mean that my blocks from admin/ page builder can be different?

Please Advise

No. Custom design boxes. Not custom pages. So the design boxes only. Means each design box on the page can have different header, border, background and text colors. One box could have square corners other could have rounded corners. Some with a solid header color, or a gradient header or no header at all.

This is not for page configuration. The template can be altered if you required a different background on different pages. But that's an entirely different process and not within the scope of this topic.

 Got it.. thank you Deano... I do not want to muddy up this conversation page by asking you to elaborate when you say:

"The template can be altered if you required a different background on different pages. But that's an entirely different process and not within the scope of this topic." 

So do I just start another question within the forum for this topic as I have been searching for this conversation.

How can it be done for PROFILE INFO blocks???  

I guess except CSS codes, every other process is same.

The procedure is the same for EVERY block that is in the page builders.

The key words here are page builders. If the block is not in the page builders then you can't use this method.

Other blocks that are not in the page builders will have to be hunted down manually. Some use a template, others are generated in code. This tutorial does not cover that.

I am hoping by dolphin 8 every page and block will be in the builders.

 i want to change some info blocks on profile page, so shud i change some css code frm forms_adv.css too?? like following image

Thank you for this 

Hi Deano, this is great - thanks.

I have a question though, maybe you know something about?

At the moment, this will only work on pageblocks that are accessible using page builder?

Is there a way to change pageblocks that appear on pages that are not on the pagebuilder list?

What I would like....

Something like this, but where I can select a whole module, and then any pages within that module will show a selected block. That way, I can theme all my blocks according to each module...

Is this something you could develop? If so, I would pay for it.

Is it possible to UPDATE all the design boxes to be all the same, using a query in phpmyadmin, similar to how to update all the page widths at the same time?

Thanks

Yes.

UPDATE `sys_page_compose` SET `DesignBox`='5' WHERE `DesignBox`='1'

Green = New Design Box Number.

Red = Old Design Box Number. Dolphins default box type is 1. So this should be set to 1.


Then of course as with all manual database changes you must clear the dolphin cache.

As always Deano, you are a legend!

Many thanks

For further customization of each module each one will need be virtualized. 

If you look here it explains a little more:

http://www.boonex.com/forums/#topic/Need-to-style-template-modules-separately-Look-here.htm