Use a logo within your site

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 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 of such themes is described in another howto: Design your own CSS theme.

So here we will only discuss how the CSS should be constructed for the hack.

CSS is too complicated… a quick-fix for you

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 and… it should work ;-)

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… well… 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 foget to activate your new theme (Appearance/Themes once you've created it).

Why it works?

(TODO)

Comments

The CSS example does not seem to work

pieterh 1157375221|%e %b %Y, %H:%M %Z|agohover

I tried copying the CSS code literally (same image), and also providing my own uploaded image. I cannot get the image to display.

Putting the image in the side bar works (I corrected the explanation to refer to nav:side).

Re: The CSS example does not seem to work

pieterh 1157375299|%e %b %Y, %H:%M %Z|agohover

One has to activate the new theme, of course.

The easy way doesnt work

Red Haven 1177261132|%e %b %Y, %H:%M %Z|agohover

I tried using the first way stated because i am a beginner. and instead of getting a image i got the name of the file
here is what i wrote:

[[=image nav:side/redhaven.jpeg link="start"]]

Re: The easy way doesnt work

Phil Chett 1179063258|%e %b %Y, %H:%M %Z|agohover

I wonder if you have the filename wrong?. try..Red Haven Logo 2.JPG? (thats what the file is called in filemanager)

PS. i found that file names didn't seem to like spaces, but i might be wrong.

The Easy Way Does Work

hopabonk 1191445306|%e %b %Y, %H:%M %Z|agohover

I had the same problem as Red Haven (above) but when I removed the file extension it worked. My file was a jpg. No idea why this worked, but I employed the image wizard to show me the functional code.

CSS-way extended

Struve 1197558176|%e %b %Y, %H:%M %Z|agohover

In the header of my page I'd like to display the logo and on its right side the title. How do I combine these two (text and image) in the CSS? This is the code I have now:

#header {
    border-bottom: 1px solid #888;
    height: 7em;
}

#header h1{
    font-size: 250%;
    padding: 0.5em 0 0 1em;
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    text-indent: 100px;
}

#header h2{
    font-size: 180%;
    font-weight: bold;
    padding: 0 0 0 0;
    font-family: arial,helvetica,sans-serif;
}

#header h2 a,#header h2 a:hover{
    background-image: url(http://www.n.ethz.ch/student/pjanine/download/Struve/Struve_Logo.jpg);
    height: 80px;
    width: 65px;
    position: absolute;
    bottom: 5px; left: 30px;
}

I first had the logo in the header h1 but then, the title got written over the logo or, if intended, was written in three lines. With the logo in h2, the title is intended but the logo doesn't display. I tried different versions, but none of them worked..
Can anybody help please?

last edited on 1197558289|%e %b %Y, %H:%M %Z|agohover by Struve + show more

Re: CSS-way extended

Phil Chett 1197625832|%e %b %Y, %H:%M %Z|agohover

try

#header h1{
    font-size: 250%;
    padding: 0.5em 0 0 1em;
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    text-indent: 100px;
background-image: url(http://www.n.ethz.ch/student/pjanine/download/Struve/Struve_Logo.jpg);
background-repeat: no-repeat;}

Re: CSS-way extended

Struve 1197636329|%e %b %Y, %H:%M %Z|agohover

thanks for the advice!
it worked now with this code:

#header h1{
    font-size: 250%;
    padding: 0.5em 0 0 1em;
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    text-indent: 70px;
    background-image: url(http://www.n.ethz.ch/student/pjanine/download/Struve/Struve_Logo.jpg);
    background-repeat: no-repeat;
    height: 70px;
    position: absolute;
    bottom: 0px; left: 20px;}

I had to set the position to keep the title staying and the image staying on its place.

Re: CSS -- The Hard Way

Steve Dashiell 1198118802|%e %b %Y, %H:%M %Z|agohover

I am using the Shinny template and trying to create a new theme to add our logo to the top banner. I have tried everything (including making the logo the exact same size as the example above) and still can't get it to display the logo in the top banner. Is my url correct? Can't figure out what I am doing wrong. Any advice?

#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://mmi.wikidot.com/local--files/theme:test/logo.jpg) ;
height: 51px;
width: 283px;
position: absolute;
bottom: 10px; left: 50px;
}

Re: CSS -- The Hard Way

Phil Chett 1198143196|%e %b %Y, %H:%M %Z|agohover

background-image: url (http://mmi.wikidot.com/local--files/theme:test/logo.jpg) ;

using this link, i get "not found"

Re: CSS -- The Hard Way

Helmuti_pdorf 1198155299|%e %b %Y, %H:%M %Z|agohover

Could be it is only the url wrong?

Have a look: ( it is the attached image of the start page -

After the click on Files - Info I got the url:

[[image  http://mmi.wikidot.com/local--files/start/logo.jpg ]]

Hope this helps ?

Re: CSS -- The Hard Way

Steve Dashiell 1198305456|%e %b %Y, %H:%M %Z|agohover

Thank you for the suggestions. I have updated the url to the correct logo file, but it is still not displaying the logo in the header. Any other suggestions would be greatly appreciated!

#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://mmi.wikidot.com/local--files/start/logo.png) ;
height: 51px;
width: 283px;
position: absolute;
bottom: 10px; left: 50px;
}

Re: CSS -- The Hard Way

Helmuti_pdorf 1198316897|%e %b %Y, %H:%M %Z|agohover

1. Why png and not the jpg original ?

2. I can not confirm the syntax of the url - I am not a CSS guru…

Re: CSS -- The Hard Way

Phil Chett 1198380150|%e %b %Y, %H:%M %Z|agohover

Try:

#header h1 a
{
display: block;
height:51px;
width:283px;
background-image: url(http://mmi.wikidot.com/local--files/start/logo.png);
background-repeat: no-repeat;
position: absolute;
bottom: 10px; left: 50px;

}

#header h1 a span {
    display: none;
}

#header h2  {
    display: none;
}

May require some tweaking to get desired effect, but its a start.

Other than the fact that i swipe bits from other sites, i have no idea what I am doing!! Its all trial and error
This one took a bit of doing, but by using the example that i used here
http://psc2.wikidot.com/logo:logo, i soon got something close to what i think you wanted

Alright

Mkwrx 1198818454|%e %b %Y, %H:%M %Z|agohover

Ok, it worked on mine… while Im logged in. While I'm logged out nothing appears where the logo should be. Is its supposed to be that way or is there any way to make logged out or guests users see the logo?

Re: Alright

Helmuti_pdorf 1198851318|%e %b %Y, %H:%M %Z|agohover

There are discussions if this is a bug or not…

have a look on this forum thread about the sme theme:

http://community.wikidot.com/forum/t-32206/images-not-displaying-properly#post-82572

It has to do:
- if your site is private or public ,
- if the image embedded as a logo is attached to a "public" page of a public site ( by "long" URL embedded)
- or is coming from other sources in "small" sizes ( than even the source is "private" than this is shown..
I would create a little "public" wiki ( niot open for update for others! ) with your png's or jpg's only to hold them as a storage for "always public" images.

Than I think you can embbed them in a "landing page" of a private site because of they are coming from an public one .

If you try this and this is not true - than message this as a bug to the forum!

Thanks and good luck!
Helmut