Help:Setting up your logo


When you first create a new wiki, the space where your logo should appear (at the upper left corner of the screen) displays a message that reads:

Default image

Edit the page named:
Set body of page
to be the url of
the logo image
The image will
automatically crop

150x150 px

Ideally this would be a simple process, but it can be confusing, especially if you've uploaded the image to your wiki rather than have it stored somewhere else. And there are hidden pitfalls that you should be warned about.


Image format

It has been shown that using a .jpg file for your logo image can cause problems with the logo hot zone, which is a 150x150 pixel area corresponding to the logo image's location. Clicking in this zone takes a user back to the Main Page from any page on your wiki. With a .jpg logo, some users have found that their hot zone overrides the user controls at the top of the page, which (as of this writing) float left and therefore sit very close to the logo. This makes the leftmost user controls inaccessible behind the logo zone (even if they're visible in front of the logo), and clicking on them only links to the Main Page.

To avoid this problem, select an image in .png format instead of .jpg format. Images in this format do not appear to raise the hot zone problem.

Image size

The note above says that your image will be automatically cropped to 150x150 pixels. DO NOT believe it. Images in .png format, at least, are not automatically cropped. Be sure to upload an image with an actual size of 150x150 pixels or smaller. The wiki engine centers logo images of any size (too large, too small, or just right) on the space where they belong, and if the image is too big, it could cover up a lot of the page and make some things invisible and inaccessible.

User controls

Even using an image of the right size and format, you could have problems with the logo covering up the user controls above it. There appear to be two ways around this:

  • Use an image that is less than 150 pixels high. At a guess, 120 pixels high or less would resolve the problem. The image will be centered vertically into its space, leaving the controls uncovered.
  • Use the transparency feature of the .png image format. Set up a transparent area along the top border of the image, to coincide with the space occupied by the user controls – about 15 pixels high ought to do it. The wiki engine will read the transparency and "see through" the image to allow you access to the user controls behind it.

Pointing to your image

How you point to your image depends on where your picture is stored.

If the image is stored on your wiki

If you've uploaded the image you want to use onto your wiki, then pointing to it is something of a challenge. You must first find the url where your wiki stores the image. This is not a straightforward process.

First, navigate to your image's page in the Image: namespace.

  • You can type Image:<imagename> into the search box (where <imagename> represents the article name of the image, usually its filename), or
  • You can click Special pages, then All pages, then select "Image:" from the Namespace dropdown menu, and finally click your image's name in the list of pages.

Your image should now be visible as part of the article. You must now view the html source code for the web page to find where the image is stored. In Internet Explorer, for instance, you would select the "View" menu, then select "Source." Within the source code, search for a string that looks something like this:

<a style="background-image: url(<wikiname>/<code1>/<code2>/<filename>);" href="/<wikiname>/Main_Page" title="Main Page"></a>

where <wikiname> represents your wiki's name, and <filename> is the name of the image file. The two <code> elements are simple alphanumerics, usually in a form similar to 1 and 1a respectively.

Hint: Look for this a few lines below a series of several lines beginning with the word "google."

The text<wikiname>/<code1>/<code2>/<filename> is the url of your image. Copy this entire address. Then you can proceed as in the next section.

If the image is on the Internet

You must know the url of your image. Once you do, pointing to it should be a simple process:

  1. Navigate to the page titled Image logo url.
    • You can type the name into the search box, or
    • You can click Special pages, then All pages, then click "Image logo url" in the list of pages.
  2. Click to edit the page.
  3. In the edit window, type the full url for your image, from "http://" all the way through the filename and extension. This should be the only text on the page.
  4. Click "Show preview."

If you've entered the url correctly, and if the image is accessible, the preview should show you the image you've selected as the body of the page. Click "Save page" to complete the change. Your image logo should now be visible in its place at the upper left.

Changing your logo image

If you decide you want to use a different image as your logo, you can go through the processes described above to insert a new url for your image, as often as you like. If you have access to the image file itself, though, you might want to just change the image and leave the url pointer alone.

  • If the image is on your wiki, just upload a new version of it by clicking "Upload file" in the toolbar on the left. Be sure to use the same filename.
  • If the image is on another website, you'll have to upload a new version of it or otherwise edit it by whatever means are appropriate to wherever it's stored. As long as it has the same location and filename, the pointer will still work.
Personal tools