Use a logo within your site

Posted by michal frackowiak on 1157310670|%e %b %Y|agohover, last edited by (user deleted) on 1246986323|%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 (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 frackowiak. Please visit his/her userPage.

RobElliott. Please visit his/her userPage.

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

---

The Wikidot Blog | My other works

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 Wikidot Blog | My other works

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

---

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

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

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

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Full Width Logo

Chris Bond 1246922662|%e %b %Y, %H:%M %Z|agohover

This is the code I used to get a full width banner across the top of my pages at http://fortean.wikidot.com. I have used it with the Shiny theme, but it may work with some of the others. I haven't made the banner clickable as I have a Home link at the top of the side bar. The image used is 1000px x 130px and I've made sure that some of the image is blank towards the right hand side of the banner, where the search box goes. I thought it might be of use to others using Shiny.

#header{
/*background: none;*/
height: 118px;
width: 100%;
border-bottom: 22px solid black;
background-image: url(http://fortean.wikidot.com/local--files/admin:manage/main_header1.png);
background-repeat: repeat-x;
background-position: 0 0.8em;
}

#header h1{
display:none;
}

#header h2{
display:none;
}

Re: Full Width Logo

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

Chris, anything that improves the shiny theme is a good idea!

I've made sure that some of the image is blank towards the right hand side of the banner, where the search box goes

On my desktop and the small laptop I have with me this week the search box is immediately covering the second man on the right and the image of pan. It think the problem is that due to the repeat-x value the image will always start again (of course).

May I suggest something? Although it might not give you the result you are looking for there are a couple of minor changes to the CSS which you could try and the code is shown below. It moves the image more into the centre and with no repeat. The background colour is then set to white so the original shiny black/grey background won't show through. The result means you don't obscure the search with the repeating image.

#header {
    background-color:#FFFFFF;
    background-image:url(http://fortean.wikidot.com/local--files/admin:manage/main_header1.png);
    background-position:center center;
    background-repeat:no-repeat;
    border-bottom:22px solid black;
    height:118px;
    width:100%;
}

Edit: I see you are a member of South West image Bank. You might want to have a look at the new theme that Stacey and I are developing for the site. It also started out life as Shiny and will go live shortly. It's at http://southwestimagebank.org/css:pages

Rob

---

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

Re: Full Width Logo

Chris Bond 1247000705|%e %b %Y, %H:%M %Z|agohover

Thanks Rob. Will try the fix now. I only have access to a PC with a 1024 x 768 screen so was unsure how it looked on a 1280; though I had set the width to 100% to try to avoid the problem of repeats. Obviously I must have overlooked something else. Thanks for the code.

I like the new look for the swib. I created the site for Stacey last year. I had only a few hours in Plymouth to do it so couldn't really go to town on it, but she has developed it a lot since then.

Re: Full Width Logo

Chris Bond 1247001074|%e %b %Y, %H:%M %Z|agohover

Have tried the fix and am sure it looks better now to many viewers. The problem now is that there is a white border below the image. The bottom of the black part of the men's head and shoulders should be lying right on top of the black band of the top bar. Will try to keep tweaking it to see if I can sort it.

Re: Full Width Logo

Chris Bond 1247001689|%e %b %Y, %H:%M %Z|agohover

Think I've fixed it. Just changed the position to 'center bottom'.

Looks good now.

Thanks Rob, much appreciated.

Re: Full Width Logo

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

Chris, this is neat. Why don't you post it onto themes.wikidot.com?

---

The Wikidot Blog | My other works