Use a logo within your site

Posted by michal frackowiak on 1157310670|%e %b %Y|agohover, last edited by RobElliott on 1241771409|%e %b %Y at %H:%M |agohover

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 (I haven't tested it with IE6).
z-index:-100; - setting this to -100 this pushes the block behind the logo image but without affecting the link.

Authors

michal frackowiak. Please visit his/her userPage.

RobElliott. Please visit his/her userPage.

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).

---

Portfolio

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.

---

Portfolio

Re: The CSS example does not seem to work

Nanouschka Verhamme 1231094970|%e %b %Y, %H:%M %Z|agohover

You have to copy the link of the site and than put that after [Image http…] Than you can see your image!

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 ?

---

Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)

Wollen Sie Wikidot helfen im deutschen » Handbuch ?

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…

---

Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)

Wollen Sie Wikidot helfen im deutschen » Handbuch ?

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

---

Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)

Wollen Sie Wikidot helfen im deutschen » Handbuch ?

CSS Help

iFreak 1212453489|%e %b %Y, %H:%M %Z|agohover

I did the beginner way, but when I was on the 'upload your file' part, I couldn't find the editing place. Is it the one where you edit posts and stuff? Also I don't understand the easy way, where do I put the code?

Re: CSS Help

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

In the wiki syntax description you will find under
"attached files" http://www.wikidot.com/doc:wiki-syntax#toc45
following help:

The destination file must be first attached to the page — by clicking "files" and "upload file" from the options at the bottom of any page.

You need an "existing" page ( "nav:side" perhaps ?) where you can attach ( upload) a file.

Dont forget to give the name of the file a working extension like .jpg or .gif….

---

Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)

Wollen Sie Wikidot helfen im deutschen » Handbuch ?

Absinth 1225485052|%e %b %Y, %H:%M %Z|agohover

Hello! I'm trying to put a logo on my wiki using the code above, but it won't work. I don't know why. I tried to avoid the mistakes other users that posted in this thread made. I'm using the Shiny template. Any suggestions on what went wrong or what needs to be changed would be great!
Maybe I uploaded the .jpg to the wrong site?

#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://angraenor.wikidot.com/local--files/admin:manage/Logo);
height: 71px;
width: 260px;
position: absolute;
bottom: 10px; left: 50px;
}

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

Re:

RobElliott 1225488253|%e %b %Y, %H:%M %Z|agohover

You've put the background image in the wrong place. Try adding it to the #header tag as follows:

#header {
height:130px;
background-image:url(http://angraenor.wikidot.com/local--files/admin:manage/Logo);
}

Rob

---

Strathview Consultants: supporting Homecoming Scotland 2009. View the advert here.

Re:

Absinth 1225660838|%e %b %Y, %H:%M %Z|agohover

Thanks for the help, Rob, but it doesn't work the way I thought it would. The code displays the logo, but it repeats it all over the whole header! I just wanted a logo on the left top side. The whole CSS thing seems really complicated and I have no clue how to adjust it to my needs.

Re: Background Image

Ed Johnson 1225666845|%e %b %Y, %H:%M %Z|agohover

Turn off the repeating like so:

#header {
  height:130px;
  background-image:url(http://angraenor.wikidot.com/local--files/admin:manage/Logo);
  background-repeat:none;
}

-Ed

---

Install, Configure and Customize Wikidot Open Source

Re: Background Image

Absinth 1225712134|%e %b %Y, %H:%M %Z|agohover

Thanks a lot! Now it works!

Logo and name

tukez 1228760432|%e %b %Y, %H:%M %Z|agohover

Hi,

This is what I used to add a logo to left side of the name, not replacing the name. I use Shiny theme, so you might have to modify this to use it with other themes. First I uploaded bloodlust.png to start page. Then added this CSS to a custom theme extending Shiny theme.

#header h1 a {
    display: block;
    background-image: url(/local--files/start/bloodlust.png); 
    background-repeat: no-repeat; 
    background-position: left bottom; 
    padding-left: 75px;
}

Result: http://enhsim.wikidot.com

cold_blood3d 1229503671|%e %b %Y, %H:%M %Z|agohover

unfortunately this technique causes the logo to flicker when moused-over in IE6.

edit: i just learned this is easily fixed by using the same image as the background image of #header.

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

WikiDot Banner/Logo

iFreak 1241748990|%e %b %Y, %H:%M %Z|agohover

Hi everyone,

I added a logo to my site, then after I saved it (as custom theme) and made it as default, the logo wouldn't show up.
I want it to be on the top so everyone can see it. But is it possible to put it on top?

And if you do, can someone try to send me a 'clickable-logo-CSS-style' sheet thing? I just started and I don't know any CSS. Only HTML.

Re: WikiDot Banner/Logo

Ed Johnson 1241753039|%e %b %Y, %H:%M %Z|agohover

First, you get bonus points for not asking for help and then locking us out by keeping your site(s) private!

I see from your profile you have 2 sites started. Which one are you trying to add the logo to? It would also help if you told us which page has the logo file attached to it.

Did you read the how-to attached to this discussion yet? It's pretty detailed and should help you get things working properly. If you have specific questions, be sure to ask.

-Ed

---

Install, Configure and Customize Wikidot Open Source

Add your comment