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(http://mywikidotsite.wikidot.com/local--files/start/logo.jpg);
height: 90px;
width: 500px;
position: absolute;
top: 10px;
left: 20px;
}Notice (by helmuti_pdorf.):
1. I have changed the URL of the background-image to the correct syntax
2. sometimes in the discussions down (in the forum) some useres prefer a png image format instead of jpg…
In action
See http://www.digitalmajority.org
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by pieterh
Rate this solution
If you think this solution is useful — rate it up!
page revision: 4, last edited: 15 Feb 2012 00:23
#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(file:///C:/Users/cladd/Downloads/SCP%20archives%20logo%20v0.10.webp);
height: 90px;
width: 500px;
position: absolute;
top: 10px;
left: 20px;
}
MatthewIsCool
I do not think this is possible with the file image on local C: drive …
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
#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;
}
#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;
}
I made the photo header a little bigger and wider. Will have to test it on a real puter.
http://wildcoast.ca
Code:
#header h1 a,#header h1 a:hover{
margin: 0;
padding: 0;
background-image: url(http://farm8.staticflickr.com/7146/6548099749_33af5c78b0_b.jpg);
height: 165px;
width: 934px;
position: absolute;
top: 10px;
left: 15px;
Next, those headers.
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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
After changing your CSS:
You may need to refresh twice.
Do this every time you make a change to the theme.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Thank you.
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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
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.
In my version the file name was Case sensitive logo.JPG vrs logo.jpg
end of post
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.