How to create new Wrappers?

How do you guys create/modify wrapper styles? Is there a documentation for this? Thanks.

Create your tpl wrappers and put them on the skin side.

Depending on where you want to use them. ie, mycustomwrapper.tpl




For the wrapper to appear in the admin you need to edit these 2 files:




you will need to clear cache after updating these files and as ALWAYS: MAKE A BACKUP OF THE FILES.

Glad I found this thread.

I looked into the files that you said and thought that it would be an idea to copy the settings from


as I have downloaded that file and re uploaded it as



Current path: /skins/basic/customer/blocks/wrappers

Can you advise on what Im doing wrong and how to get searchbox_general.tpl to appear in the blocks list.


Had another look on the forum and no avail. Anyone care to help?

did you clear your cache?

What version are you on?

Works fine for me.

I'd like to have an additional sidebox_general_2.tpl on the wrapper list, for 2.1.14CE edition

I looked into specific_settings.php and structure.php, but I don't know what to edit, or what could copy&rename to sidebox_general_2.tpl, to activate this new option in the admin block editor. I intent to use a new .sidebox-title-2 css class to add some color to the titles on the sideboxes.

The sidebox_general_2.tpl will be:



{$content|default:"Â "}



Thanks for any advice on this.


I just added the new sidebox_general_2.tpl in customer/blocks/wrappers and it worked, no need to edit files in the schema folder.

If this help somebody, I just added this to my styles.css

.sidebox-wrapper .sidebox-title-2 {
background: url("images/cat-title-right-2.gif") no-repeat scroll right top #fff; padding:9px 0 13px 0;
.sidebox-wrapper .sidebox-title-2 span {
background: url("images/cat-title-left-2.gif") no-repeat scroll left top #fff;
.sidebox-wrapper .sidebox-title-2 span {
font-weight: bold; color:#fff; padding:9px 0 13px 10px;

cat-title-right-2.gif & cat-title-left-2.gif are the second colors for sidebox title.

Colortone-or anybody- please help me with this issue as well.

You first had the .tpl



{$content|default:" "}


1.Then where exactly did you put the styles.css code?
I found styles.css at /[url="javascript:%20template_editor.chdir("]skins[/url]/[url="javascript:%20template_editor.chdir("]dark_whiteness[/url]/[url="javascript:%20template_editor.chdir("]customer[/url]
However do I add simular text there- and if thats the case- where? Since it is a big file.

2.And where exactly folder did you put the pictures?

3.Im on dreamweaver- and it asks for what contextual CSS i want...(Class, ID, Tag, Compound)..which to choose? Or do that matter really?

Im a noob- but i think i can get this one..

:? double posted… almost.

Just put the styles.css text in your skin/styles.css anywhere you like (or ideally you should use the my changes addon) if you are unsure of the my changes addon see here this stops your files being overwritten when upgrading.

Same with the pictures, eg if you put the actual images in yoursite/images/wrappers then that would be your filepath


dont worry about dreamweaver asking for the class just copy the text from code view (or even form in this post) and paste it in your .css file as above with changes for the image paths.