How to add image on sidebox title

Developers Frontend
1

I want to add icon on sidebox title just before name.

side.JPG

2

Hello,



You can change sb_title_left.png… no??



I think, we want to do same things…





I would like create my own sidebox-title with different image… To use a block with specific design!



So :



1/ I created a new sidebox_general_eau.tpl in blocks, with this code :



```php



{$title}



{$content|default:" "}



```

2/ in my css, I created two new class :

```php .sidebox-title-eau {
background: #e9ebec url('images/sb_title_right_eau.png') no-repeat right top;
border-bottom: 1px solid #d9dbdd;
padding: 0 11px 0 0;
}

.sidebox-title-eau span {
background: url('images/sb_title_left_eau.png') no-repeat left top;
padding: 9px 10px 8px 12px;
color: #575757;
font: bold 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
} ```
I changed just class name, and picture name! (My pictures are ok.. sure!!)


And i don't understand why result is like this picture..??

so..:( :confused:

thanks for your help..

bug_sidebox-title_class.JPG

3

Hello,



Any idea to change it?



Thanks a lot…

4

I haven’t tried this myself but I would try adding



[COLOR=“Red”]icon=“your image.gif” [/COLOR]or whatever the image is



to



customer/blocks/wrappers and whichever block you wanted,mainbox, mainbox_simple, etc



so for mainbox_simple it would be:



{* $Id: mainbox_simple.tpl 6986 2009-03-10 13:35:00Z zeke $ *}

{if $anchor}



{/if}


{$title [COLOR="Red"]icon="your image.gif"[/COLOR]}


{$content}


5

Is there any possible to change icon on different sidebox ?

6

Hello,



I found to change and create my own side-box-title, to have same result as my picture…





1/ Create a new “sidebox_general.tpl” like : sidebox_general_eau.tpl in skins/yourtemplate/customer/blocks/wrappers/sidebox_general_eau.tpl





With this code inside :

```php

{* $Id: sidebox_general_eau.tpl 7200 2009-04-07 06:59:18Z zeke $ *}



{$title}


{$content|default:" "}



```

2/ in style.css, create :

```php
.sidebox-title-eau {
background: #e9ebec url('images/sb_title_right_eau.png') no-repeat right top;
border-bottom: 1px solid #d9dbdd;
padding: 0 11px 0 0;
}

.sidebox-title-eau span {
background: url('images/sb_title_left_eau.png') no-repeat left top;
padding: 9px 10px 8px 12px;
color: #575757;
font: bold 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
```

Use same picture like your original template, and insert inside your image..

3/ in style.base.css, create a new class :

```php
.sidebox-title-eau {
padding-left: 10px;
}
.sidebox-title-eau span {
display: block;
font: bold 14px Tahoma, Verdana, Geneva, Arial, Helvetica;
}
```


4/ Create a new block in admin panel, for "product" for example, and choose to wrappers : "blocks/wrappers/sidebox_general_eau.tpl" after use this block as you want..

Thats all!!!!

So "Miracles", you can create like that, a new class, with new wrapper, with your own design with your icon.

Byby :D

cs_sideboxtitle_wrapper_eau.JPG

7

So can i add seperate image on each sidebox ?

8

Yes! You create a new sb_title_left_icon1.png, sb_title_left_icon2.png, …



And for each, you creat a new class, and new wrapper…

9

ohhhh than looks interesting, i will try and leave feedback for you