Adding A Site Logo
By 
pieterh
Description
This snippet lets you add a logo to the site by creating a custom CSS.
Code
- Create logo, 90px high by (e.g.) 500px wide
- Upload logo to start page as file 'logo.jpg'
- Go to site manager
- Choose Appearance/Custom themes
- Create a new theme called 'custom'
- Enter CSS code below and save theme
- Choose Appearance/Themes
- 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.
page_revision: 2, last_edited: 1217318473|%e %b %Y, %H:%M %Z (%O ago)
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!
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;
}
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.
THANK YOU! Finding this URL fix just saved me a huge headache.
Thanks for the link man very helpful
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
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
Also, on the instructions page it says your new theme won't be updated automatically, but must be "synched" "here." Unintelligible. :-<
Thanks for that :)
Here is my piece of code to:
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!
i tried putting this exact code into mine, no image. i cant get this tip working at all, no image shows up.
it doesnt seem to work when extending shiny…any ideas?
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
I'm not certain about your image, but using that code, it cuts off a considerable amount of the image. For me the right:102%; worked much more exact as right:101.12%; , by painstakingly testing it little by little. I could get even more exact, but I don't think the differences would be noticeable that far.
In my version the file name was Case sensitive logo.JPG vrs logo.jpg
I tried all three versions of the code and none of them seemed to work…
SOLUTION: REFRESH THE PAGE!!! Even when you click on the start page several times, the image / updated image wont show up, UNLESS you refresh the page. I think even if you just visit the website again after closing the browser the image wont show. Your browser pre-fetches / caches items (stores them on your hard-drive), so that loading will be faster the next time you visit the page, so it will use those instead of getting them for the server. Only refreshing will solve the problem.
The Wiki Syntax about images is indecipherable and doesn't seem to address how to simply insert an image from your hard drive, much as you would into a Word doc. Anyone have any ideas?
Thanks,
Bill Buchanan
You cannot insert images from your "internal" hard disk "directly" !( instead external omages from flickr, or from other storages ( =url) in the internet-cloud..
You have first to "upload" your images onto one of your pages (attach them) with the "files" button.
( and store them on wikidot.ocm)
1. Be careful to write the correct file-ectension
2. Be careful to write no space in the file-name.
3. Than you can easily insert the images from your "local" storage on wikidot.com on any page of your site.
Links:
http://handbook.wikidot.com/en:introduction-to-images
http://handbook.wikidot.com/en:upload-an-image
http://community.wikidot.com/howto:put-pictures-with-footnotes-in-the-text
or (more advanced):
http://community.wikidot.com/howto:put-pictures-with-footnotes-in-the-text-using-divs
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
how do you get the logo to cover the entire top of the page?
http://community.wikidot.com/howto:use-logo - hope there is the answer - clickable logo at the top.
I know that RobElliott has a logo over the complete top-area..
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Thank you.
Hey eveyrbody, I've put in the code, but the logo doesn't appear.
Can anybody help me out? The theme on which I'm working is the Localize one.
Thanks!
or nobody can help you !
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Hello.
Sorry I forgot to post the code. here it is:
The only logo that gets showed is the Localize theme one, and not mine.
I think your code is wrong..
urlhttp:..../ should be
background-image: url(ttp://nataleitaliano.wikidot.com/local--files/start/logo.PNG);
missing opening ( …
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
thanks!
I changed the code correcting the typo but it doesn't work anyways… :(
I made a typo too ! ( url(ttp://nat instead of url(http://nat…)
Questino :
1. Where did you get the file name - from Info.-button?
2. is the extension really PNG and not png ?
Try to rename the file name. to lower character and change the url…
and have a look on type too in comparison with the others above in the thread..
AND: have you setup in your site manager this custom changes to use?
AND: have you .reset your browser - cache - it is often not showing new changes without deleting all cached informations..
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
I had a look at the top of this page and see some differences… in comparison to your code:
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Hey, I tried both using this last piece of code and correcting the typo above, but it still doesn't work! :(
Could it be the localize template I'm working on?! Shall I use another one?
edit: I tried using other themes, but it's not working anyways.
Some useful links:
http://community.wikidot.com/howto:use-logo <==== ! !
http://community.wikidot.com/howto:design-your-own-css-theme
http://community.wikidot.com/howto:fiddle-with-css-the-easy-way
and my questions:
Have you created your own "custom" theme?
Have you used the [[code type="CSS"]] ?
giving :
And: I miss here in your code thew beginning lines of 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(/local—files/start/logo.jpg);
height: 87px;
width: 508px;
position: absolute;
top: 10px;
left: 20px;
}
And: do you use an css-page wiothg the code ( have you "synchronized" it ?)
or are you typing the code directly into your custom theme?
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
After changing your CSS:
You may need to refresh twice.
Do this every time you make a change to the theme.
— Shane | Blog | CycloDS Revolution | Compatibility List | Want me to manage your next wiki? | XBL: leiger40
Automatic code replacement — Rate it up!