Part 2. How to Replace Twirl Logo Background Image

Tutorial about replacing default Twirl Plone Theme logo background images with new ones in Plone 4.

The following tutorial covers changing of Twirl Theme logo background image on a Plone 4 website. Instruction for changing it in

Twirl theme allows to have random images be displayed as a background for company logo. Background area for logotype has dimensions: 370px width and 150px height.


Images, displayed as background rotate randomly with every page refresh. There are four such images.





You can replace these Twirl Skin background images with yours via ZMI. If your background image size exceeds these default dimensions, it will automatically be hidden. Also, logo image with the size stated above or bigger will have its corners rounded.

To change background image go to ZMI interface and open portal_skins -> twirl_images folder, which contains bg-logo folder:


This folder includes images that are set as background for company logo.


In case you want to set your own images to be displayed in this skin, you should return two levels up to portal_skins. Select custom folder.


There are currently no items in it. What we need is to create a folder here, where we will put our new image(s). For this select Folder from Add drop-down menu items:


Type new folder's Id - it must be the same folder Id that include 4 default images: bg-logo. Press Add button.


As a result, now we have bg-logo folder in custom. There are no items in this folder yet.


Now return to our 4 default images: portal_skins -> twirl_images -> bg-logo. Select image you want to replace with a new one. In the drop-down menu left to Customize select custom/bg-logo and press Customize:


Now press Browse button to select the logo image you want to upload from your computer and click on Upload:


Now you see one of your new background images, and it is automatically put into custom/bg-logo folder. Save changes you've just made.


Now when you return to Plone interface, you'll see new logo background image.


Now only this image will always be displayed in that area. In case you want to have several images for rotation - customize other 3 images from portal_skins -> twirl_images -> bg-logo folder.

Connect with our experts Let's talk