Use a logo within your site

Posted by michal-frackowiak on 03 Sep 2006 19:11, last edited by Helmut_pdorf on 17 Mar 2016 08:33

Tags: clickable css customize design layout logo site

rating: +13+x

This howto describes how to include a logo within the CSS design for your Site.

Introduction

At the moment there is no way to just upload an image so that it would be shown in the top header of the page layout. This place on your page however contains a clickable name of your Site which leads to your main welcome page.

You can display a logo in this place but you would have to create a custom CSS theme. Creating such themes is described in another howto: Design your own CSS theme.

So here we will only discuss how the CSS should be constructed to add a logo.

CSS is too complicated… a quick-fix

This is not complicated at all but you will need time to customize your theme. But there is a way around - you can include your logo in the side bar which is by default generated from the page nav:side.
http://tlug.wikidot.com/ is using this at the moment.

Just do the following:

  • open page nav:side (or any other location that holds the menu)
  • upload your file (let us say it is mylogo.png)
  • insert the following code:
[[=image nav:side/mylogo.png link="start"]]

the "link" attribute is optional. The "nav:side" path for the image must be present.
  • save the page

CSS — the hard way

At this point we assume you have created a new theme that extends one of the available ones. If you only want to add a logo to the design do not choose the Base theme because it is quite plain.

At the Wikidot.com main site the same technique is used to display a logo. So Let us see how this is done:

#header{
    height: 130px;
}

#header h1 a span{
    display:none;
}

#header h2{
    display:none;
}

#header h1 a,#header h1 a:hover{
    display: block;
    margin: 0; padding:0;
    background-image: url(http://test.wikidot.com/local--files/theme:test/logo-28.png);
    height: 80px;
    width: 283px;
    position: absolute;
    bottom: 10px; left: 50px;
}

If you do not want to investigate why, just copy this piece of code but change the following properties:

  • background-image must point to your logo URL
  • height & width must reflect dimensions of your logo image
  • bottom & left just position the image relative to the bottom and left borders of the header
  • height of the #header should be big enough to contain the whole image

Don't forget to activate your new theme (Appearance/Themes once you've created it).

Make the logo clickable

I have used the CSS method to place a logo on my site and I know there is a way to make the area over it become a link but I cannot seem to find out how. Any ideas?

Making the logo clickable is possible as you can see here. It requires adjusting the h1 a selector and adding opacity and a z-index in your custom CSS.

In this example the header contains the image as follows:

#header {
    background-image:url(http://strathviewconsultants.wikidot.com/local--files/css:theme/svc0209_candara.jpg);
    background-position:left;
    height:175px;
    margin-top:20px;
    padding-bottom:0px;
    padding-top:0px;
}

The h1 a selector and properties are then added as follows:

h1 a {
    display:block;
    background: url(http://www.strathviewconsultants.co.uk/) no-repeat;
    height:175px;
    margin-top:20px;
    margin-left: -40px;
    padding-bottom:0px;
    padding-top:0px;
    width:100%;
    text-align:left;
    text-indent: -9000px;
    opacity: 0; 
    filter:alpha(opacity=0); // for IE
    z-index:-100;
}

display:block; - omitting this will make the link not work.
background: ur(http://….) no-repeat; - the link, normally to the start page.
height/margin/padding - make these the same as in the header.
margin-left: -40px; - you might need to adjust your margins as I did to make the clickable link in the right place.
text-indent: -9000px; - needed to push the header name of your site out of the way, otherwise it would show through.
opacity:0; - the opacity setting for firefox and safari. 0 means means it is completely transparent.
filter:alpha(opacity=0); - the opacity setting doesn't work in IE but the filter here has the same effect and makes it transparent in IE7 (not work with IE6 or under).
z-index:-100; - setting this to -100 this pushes the block behind the logo image but without affecting the link.

Authors

michal-frackowiakmichal-frackowiak. Please visit his/her userPage.

RobElliottRobElliott. Please visit his/her userPage.

Add a New Comment

Related articles

Comments

Add a New Comment
_l6_layoutclickablecsscustomizedesignlayoutlogosite
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.