Warning

Please note that these samples may or may not work with your specific theme. They should, however, help you get started. You can find more general information about building a custom theme on our themes overview page, and a list of Wikispaces components for your theme on our theme components page.
For those of you skipping right to the code boxes:
 
THESE SAMPLES, AS PRESENTED, ARE A STARTING POINT ONLY,
AND MAY NOT WORK IN YOUR THEME.

If you make a mistake with your wiki's theme and get stuck, you do have a reset option. Wiki organizers and site admins can reset the theme back to the default by going to http://YOUR WIKI DOMAIN/theme/reset. WARNING: The change is immediate upon going to that URL.

Changing the Logo

Your logo can be any .jpg, .png, or .gif file. Before you begin, make sure that the image already looks the way you want it to appear on the site: make sure it’s the right size (we recommend 140X48 pixels) and the bits you want to be transparent are set to be transparent.

If you are modifying a single wiki, you can change your logo at Manage Wiki > Look and Feel. The instructions below are for adding a custom logo to a site-wide theme on a Private Label site.

To add a site-wide custom logo, first upload the logo file to your wiki. If you are on a Private Label site, we recommend uploading the image to your “www” wiki. Remember that, if your Private Label site is private, non-logged-in guests will not have access to any part of your site, including the URL where the logo image resides; if you would like guests to be able to see your logo, you may want to host the image at another URL. Make note of the URL where the image is located. You can find the correct URL by going to Manage Wiki > Files, selecting the image name, selecting the Actions link, and selecting the Download option. Copy the URL and go back to Manage Wiki > Look and Feel > Themes and Colors to edit your custom theme.

In the body section of the HTML, under header, look for this tag:
<$WikiLogoOrSpaceName$>

Replace it with the following code:
<!-- <$WikiLogoOrSpaceName$> -->
<table class="WikiLogoTable WikiElement">
<tr>
<td><a href="<$WikiSpaceUrl$>"><img src="http://mywiki.wikispaces.com/file/view/MYLOGO.PNG" width="WIDTH" height="HEIGHT" /></a></td>
<td class="WikiLogoName"><a href="<$WikiSpaceUrl$>"><span style="color: white; font-size: 2em;"><$WikiSpaceText$></span></a></td>
</tr>
</table>

Replace http://mywiki.wikispaces.com/file/view/MYLOGO.PNG with the URL of your logo and WIDTH and HEIGHT with the dimensions in pixels. If your background color is white, you'll need to change color: white to something else too.

Adding the Wiki Name Back to a Custom Logo

Applying a custom logo to a single wiki will remove the wiki name from the header. But you can add it back by modifying your theme.

In the body section of the HTML, under header, look for this tag:
<$WikiLogoOrSpaceName$>

Replace it with the following code:
<!-- <$WikiLogoOrSpaceName$> -->
<table class="WikiLogoTable WikiElement">
<tr>
<td><$WikiLogo$></td>
<td class="WikiLogoName"><a href="<$WikiSpaceUrl$>"><span style="color: white; font-size: 2em;"><$WikiSpaceText$></span></a></td>
</tr>
</table>
If your background color is white, you'll need to change color: white.

Setting a Background Image for the Entire Wiki

The exact steps for adding a background image will change depending on the theme that is the basis for your custom theme. In general, you will want to locate the body tag in the General section of the CSS and add an instruction inside the curly brackets that indicates the URL of your image and how you would like it to appear. The piece you add, to start with, will look something like this:
background-image: url("http://mywiki.wikispaces.com/file/view/MYIMAGE.JPG"); background-position: top left;
Replace http://mywiki.wikispaces.com/file/view/MYIMAGE.JPG with the URL of your image. If you have uploaded the image to your wiki, you can find the correct URL by going to Manage Wiki > Files, selecting the image name, selecting the Actions link, and selecting the Download option (be aware that any file located on your wiki will be governed by the permissions that have been set for that wiki). Depending on the theme you started with, there may be additional items in the HTML and CSS that will obstruct your image. Make adjustments to the CSS and HTML and test the theme with the Preview button until you get the effect you’re after.

Adding an Image to the Header

The exact steps for adding a custom banner to the header of your theme will change depending on the theme that is the basis for your custom theme. You will need to know the URL of your image, and will probably need to make changes in the Header sections of both the CSS and the HTML. Make small changes and test the theme frequently with the Preview button until you get the effect you’re after


Changing the Address Bar Icon (“Favicon”)

Look for the following code in your theme:
<link rel="shortcut icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
<link rel="icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
Replace /space/showimage/my_favicon.ico with the URL of your icon. You can find the correct URL by going to Manage Wiki > Files, selecting the image name, selecting the Actions link, and selecting the Download option (be aware that any file located on your wiki will be governed by the permissions that have been set for that wiki).

This may not work in Internet Explorer or Opera. A longer discussion on the topic can be found at http://www.wikispaces.com/message/view/home/45811.


Still have questions? Contact Wikispaces support.