Custom Logo Tutorial

by pieterh on 22 Sep 2009 16:36

Today, a short tutorial in how to add a logo to the themes used for the template sites. In this tutorial you'll learn how to do some basic CSS customization to add your own logo to a Wikidot site. I assume you're using one of the Rainbow themes but the instructions are easy to adapt to other themes. Making a custom logo is a great way to learn to do CSS customization.

Before you start

Before you start, here is a tip for CSS customization. Install the FireFox browser if you don't already use it, and then the Firebug addon. This makes it really easy to try CSS changes and learn the structure of your site's layout.

Step 1: clone a site to play with

Step one is to make a site to experiment with. Go to the Iron Giant default template, click 'Clone this site', and create a new site. You can delete this site afterwards, or use it as a basis for your own new sites.

The logo is a PNG image (it could be a jpeg but those carry a risk of compression artifacts). We'll put the logo image above the menu bar, in place of the site title. All pages will immediately show the logo and we'll make it blend nicely with the background.

step1.png

If you cloned the default template or another of the Iron Giant template sites then your site has a page 'admin:themes' that contains the custom CSS for your site. Use the top menu 'Admin|Change theme' option to jump to that page. By default it will start with something like this:

[[code type="css"]]
@import url(http://themes.wikidot.com/green-grass/code/1);
[[/code]]

We will add custom CSS after that @import line.

Step 2: hide the header text

Step two is to hide the site title and description, which the graphic logo will replace. We do this with the following CSS:

#header h1, #header h2 {
    display: none;
}

Add these lines after the @import line, and refresh the page. Your site's title and description should disappear.

Step 3: draw a nice logo

Step three is to make a logo. Here is an image which holds a shaded background that matches that of the theme:

step2.png

Using your favorite graphics tool, draw your logo on top of that background. Here is my 30-second example, made using the Linux Gimp tool. It is 88 pixels high and 350 pixels wide. This is mylogo.png and it's what we'll show on the page. You can use this for your example, right click on this logo, and save:

mylogo.png

Step 4: upload it

Step four is to upload to your example site's admin:themes page. To upload a file, find the 'Files' link, choose a file and then upload it. This gives you a URL /local—files/admin:themes/mylogo.png.

Step 5: display the logo

Step five is to display the logo. We'll use the #header-extra-div-1 entity, which is empty in standard themes. You can resize and move this entity anywhere within the header. If you are unsure of how this entity fits into the page CSS structure, use Firebug.

This CSS positions the #header-extra-div-1 and makes it show the logo:

#header-extra-div-1 {
    background: transparent url(/local--files/admin:theme/mylogo.png) no-repeat;
    width: 350px;
    height: 88px;
    top: 0px;
}

So, to finish the tutorial, edit your custom CSS to add that code. The width and height can be anything, so long as they are large enough for the logo. The division starts at the very top of the page, since that is where our shaded background must sit.

That's it! The technique should work on any stylesheet that does not already use the #header-extra-div-1 entity.

Comments: 8

Add a New Comment