Giving Box Headers their own Icons? Anyone?

Ok what im trying to do is give those headers (actions, profile photo, general info and so on) their own icons at the left. How do I do this?
Any help is appreciated!

It can be done as dolphin has a feature that will allow it, but it's time consuming.

Each page block within dolphin can have it's own design box. Using this feature, not only can you add a unique icon to each block, you can completely change the entire look of the block.

First you would need to copy the template file designbox_1.html and name it designbox_X.html where X is a unique number not currently in use. Then in the database table sys_page_compose you find the block and change it's DesignBox from 1 to the number you used for X in the template name. Then you can make that template look anyway you want. Then do another one for each box you want to change.

There are mods in the market such as my block tools mod that allow the design box number to be changed without manually editing the database.

In any case this is a time-consuming process. And for sites that have multiple templates it gets even more fun as the process has to be repeated for each installed template.

There's a way to do it by targeting individual page blocks css.  It's not really a clean way, because if you ever do anything that changes the page blocks ID in the database, the css will no longer be valid. Ex:

<div id="page_block_10" class="page_block_container bx-def-margin-sec-leftright">

Every page block will be contained within a div with a unique id.  The easiest way to find this, is with Firebug. Once you have the blocks ID, you can target individual elements within that div, and only that div, like below.

#page_block_10 .disignBoxFirst .boxFirstHeader {
background: url ('../images/someImage.png'); /* add a background image */
background-position:top right; /* position the background */
color:#FFFFF00; /* change the font color */
}

This will work, but if you do anything that can change the id of the page block in the database, like remove it, then add it back, you'll also have to update the css.  Uninstalling, then reinstalling a module will change all the page block ids associated with that module.  This method is really only suitable for the final version of your site that you don't plan to change much.

Wow very nice. This will definately work.  You two are really great. You helped me so much with alot of issues.

A CSS trick:

#page_block_10 .disignBoxFirst div.boxFirstHeader:before {
content:url(../images/close.gif) ; /* Adds an icon before db Title... replace close.gif with your own icon */
float:left;
}

#page_block_10 .disignBoxFirst div.boxFirstHeader .dbTitle {
margin-left:10px; /* adds margin between icon and title */
}

Wow thank you so much houston, it worked great. I will return the favor by sharing my PhpBB3 integration with you people once im done here.

One more suggestion.  Most of this css will be added to your templates common.css.   I'd highly recommend you thoroughly comment what you add and be specific about what it targets.  Some day you'll be glad you did.

EX:

/* Begin add icon to home page login block */

#page_block_10 .disignBoxFirst div.boxFirstHeader:before {
content:url(../images/close.gif) ; /* Adds an icon before db Title... replace close.gif with your own icon */
float:left;
}

#page_block_10 .disignBoxFirst div.boxFirstHeader .dbTitle {
margin-left:10px; /* adds margin between icon and title */
}

/* End add icon to home page login block */

 That would be very kind of you Rolf.  Will it be for free? Sorry, but had to ask!

Yes it will be, dont worry ;)