(Solved and solution) Different Block Header for every Block

[0c3aN]

Hi...

I´m finishing my hardware store and now i want to put a different header image (block_header.gif) for every block.I have 5 subcategories blocks but there are standalone (menu1-subcategories) (menu2-subcategories)etc...
Every block has a different name and module so i mean there must be a possibility to redirect them because now they have all the same header (redirected to block_header.gif) except the block exlusive and my account.

Hope that someone can help me a little bit with this.

Thank´s !!!

PS: Sorry for my bad english

[0c3aN]

Ok,i have found the solution by seeing the structure of the blocks and the global.css.Its very easy.

1.Open the tpl file of your block where you want to add another header and search for this string (left block example):

and change the class to block1 or what you want (class="block1")

2.Save the job and open the global.css of your theme and search for this code:

/* Default block style */
div.block {
   margin-bottom: 1em;
   width: 191px;
}
#left_column div.block, #right_column div.block {
   padding-bottom: 6px;
   background: transparent url('../img/block_footer.gif') no-repeat bottom left;
}
div.block h4 {
   font-family: Helvetica, Sans-Serif;
   font-weight: bold;
   font-size: 1.15em;
border-bottom:1px solid #595A5E;
   color: #000000;
   padding-left:2.4em;
   padding-top:3px;
   line-height:1.3em;
   height: 20px;
   background: transparent url('../img/block_header.gif') no-repeat top left;
}
div.block h4 a { color: #374853; }
div.block ul { list-style: none; }
div.block ul.tree li { padding-left:1.2em; }
div.block a:hover { text-decoration: underline; }
#left_column div.block .block_content a.button_large, #right_column div.block .block_content a.button_large { margin:0 0 0 -3px; }
div.block .block_content {
   border-left: 1px #d0d3d8;
   border-right: 1px #d0d3d8;
   padding:0.5em 0.7em 0pt;
   background: #F5FEFF url('../img/block_bg.jpg') repeat-x bottom left;
   min-height:20px;
}
div.block li {
   padding: 0.2em 0 0.2em 0em;
   list-style-position: outside;
}
div.block a {
   color: #595a5e;
   text-decoration: none;
}

Duplicate all these code and change in the duplicated code the div.block lines to div.block1 or what you put in your class name of the tpl file.Then change the block_header.gif line to your image and you have for this block a different header.

You can do this with all other blocks.

Sorry for my bad english but i mean its very easy to understand

[jeroendielemans]

GREAT SOLUTION!!!

Thank you, this is usefull information!

[jozacg]

thanks, this is easier than i though.

[Bankai]

Thank. I am not sure if my solution will cause any misdisplay or not.

insert

div.block .myh4 {
   font-family: Helvetica, Sans-Serif;
   font-weight: bold;
   font-size: 1.15em;
border-bottom:1px solid #595A5E;
   color: #000000;
   padding-left:2.4em;
   padding-top:3px;
   line-height:1.3em;
   height: 20px;
   background: transparent url('../img/block_header_myh4.gif') no-repeat top left;
}

and then in .tpl file I change

to

.

[archproject]

great information there ... thanks