Adding A Site Logo

Description

This snippet lets you add a logo to the site by creating a custom CSS.

Code

1. Create logo, 90px high by (e.g.) 500px wide
2. Upload logo to start page as file 'logo.jpg'
3. Go to site manager
4. Choose Appearance/Custom themes
5. Create a new theme called 'custom'
6. Enter CSS code below and save theme
7. Choose Appearance/Themes
8. For _default, choose custom theme

#header {
    height: 100px;
}
#header h1 a span{
    display: none;
}
#header h2 {
    display: none;
}
#header h1 a,#header h1 a:hover{
    margin: 0;
    padding: 0;
    background-image: url(/local--files/logo.jpg);
    height: 90px;
    width: 500px;
    position: absolute;
    top: 10px;
    left: 20px;
}

In action

See http://www.digitalmajority.org

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

Comments

sayanriju 1183108715|%e %b %Y, %H:%M %Z|agohover

Good tip, mate! :)
Just to add : I've used http://cooltext.com to get my own custom logo text, and then adjusted the CSS slightly to its size!

Re: Logo

PanfiloFelix 1193868567|%e %b %Y, %H:%M %Z|agohover

I've put the code in, but my logo does not appear. What gives?

#header {
height: 120px;
}
#header h1 a span{
display: none;
}
#header h2 {
display: none;
}
#header h1 a,#header h1 a:hover{
margin: 0;
padding: 0;
background-image: url(/local—files/start/logo.jpg);
height: 87px;
width: 508px;
position: absolute;
top: 10px;
left: 20px;
}

Re: Logo

Burp 1197779946|%e %b %Y, %H:%M %Z|agohover

I had the same problem.

Changed the following line to my image url as follows:

Before:
background-image: url(/local—files/start/logo.jpg);

After:
background-image: url(http://mywikidotsite.wikidot.com/local--files/start/logo.jpg);

And now it all works fine.

Data Entry

gagan1 1189404906|%e %b %Y, %H:%M %Z|agohover

Online jobs easy work at home easy, data entry typing jobs paid survey easy, make money online easy with the jobslover.com information

Data Entry Work From Home

john1 1191917568|%e %b %Y, %H:%M %Z|agohover

online jobs, work at home, from home work, data entry, typing jobs, paid survey, complete online survey, make money online, make money at home, home job work, type jobs at home, get paid for online sur0vey, free opportunities, type at home jobs, make money from home, work from home

Data Entry Jobs

john1 1192173225|%e %b %Y, %H:%M %Z|agohover

Make money typing ads online, online jobs, work at home, from home work, data entry, paid survey, complete online survey, make money online, make money at home, home job work, type jobs at home, get paid for online survey, free opportunities

Didn't work for me.

amerune 1194827389|%e %b %Y, %H:%M %Z|agohover

Also, on the instructions page it says your new theme won't be updated automatically, but must be "synched" "here." Unintelligible. :-<

A1 Health Care

Navin 1198308245|%e %b %Y, %H:%M %Z|agohover

<p><a href="http://www.a1-health-care.com/">A1 Health Care</a> - Health Care Information</p>

DATA ENTRY

charls 1211567245|%e %b %Y, %H:%M %Z|agohover

thanks for the information man
i's like it,at least i learn from it
better to create or adding a SITE LOGO
good dAy to all
and GOD bless
^_^

__
charls

Did you see it? One more time? You won't get faked out here! <a href="http://www.SelectWealthSystem.com/?t=wc">http://www.SelectWealthSystem.com/?t=wc</a>

Good tip!

karl3i 1213444411|%e %b %Y, %H:%M %Z|agohover

Thanks for that :)

Here is my piece of code to:

• increase a little bit the header height
• increase a little bit the image width
• put a PNG instead of the JPG (using transparency)

Here is the code:

#header {
height: 120px;
}
#header h1 a span{
display: none;
}
#header h2 {
display: none;
}
#header h1 a,#header h1 a:hover{
margin: 0;
padding: 0;
background-image: url(http://dents-de-sagesse.wikidot.com/local--files/start/logo.png);
height: 90px;
width: 502px;
position: absolute;
top: 10px;
left: 20px;
}

Here is the result:
http://dents-de-sagesse.wikidot.com/

Happy wikying to all!

Re: Good tip!

wowstrategy 1215054112|%e %b %Y, %H:%M %Z|agohover

i tried putting this exact code into mine, no image. i cant get this tip working at all, no image shows up.

Re: Good tip!

wowstrategy 1215054734|%e %b %Y, %H:%M %Z|agohover

it doesnt seem to work when extending shiny…any ideas?

Extending Shiny For Logo Insertion

KeysoftServices 1216006324|%e %b %Y, %H:%M %Z|agohover

Hi Here is my piece of code to:Logo Insertion

#header-extra-div-1 {
height: 150px;
width: 200px;
float: left;
background-image: url('http://keysoftbiservices.wikidot.com/local--files/start/KEYSOFT%20LOGO');
background-repeat: no-repeat;
padding: 0;
position: absolute;
top: 5px;
right:102%;
}

Here is the result:
http://keysoftbiservices.wikidot.com/

Regards

Don't forget

viszlai 1213714198|%e %b %Y, %H:%M %Z|agohover

In my version the file name was Case sensitive logo.JPG vrs logo.jpg

Get easy fast online Johnny free cash money making advance quick payday flow business opportunity for teen now to how to

mick2 1214477191|%e %b %Y, %H:%M %Z|agohover

Get the worlds best fast online free easy Johnny cash money advance quick work at home based business opportunities for teens now to earn instant extra cash flow payday how to get loan and make hard rich internet millionaire big refinance out crop make money cash out crops machine com