Use a logo within your site / Discussion

This is the discussion related to the wiki page Use a logo within your site.

page 1 of 3123next »

The CSS example does not seem to work

pieterh 04 Sep 2006 13:07

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 04 Sep 2006 13:08

One has to activate the new theme, of course.

---

Portfolio

Re: The CSS example does not seem to work

Nanouschka Verhamme 04 Jan 2009 18:49

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 22 Apr 2007 16:58

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 13 May 2007 13:34

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.

---

.Goal NHGC

The Easy Way Does Work

hopabonk 03 Oct 2007 21:01

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 13 Dec 2007 15:02

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 13 Dec 2007 15:04 by Struve + Show more

Re: CSS-way extended

Phil Chett 14 Dec 2007 09:50

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;}

---

.Goal NHGC

Re: CSS-way extended

Struve 14 Dec 2007 12:45

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 20 Dec 2007 02:46

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 20 Dec 2007 09:33

background-image: url (http://mmi.wikidot.com/local--files/theme:test/logo.jpg) ;

using this link, i get "not found"

---

.Goal NHGC

Re: CSS -- The Hard Way

Helmuti_pdorf 20 Dec 2007 12:54

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 (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: CSS -- The Hard Way

Steve Dashiell 22 Dec 2007 06:37

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 22 Dec 2007 09:48

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 (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: CSS -- The Hard Way

Phil Chett 23 Dec 2007 03:22

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

---

.Goal NHGC

Alright

Mkwrx 28 Dec 2007 05:07

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 28 Dec 2007 14:15

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 (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

CSS Help

iFreak 03 Jun 2008 00:38

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 03 Jun 2008 06:44

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 (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Absinth 31 Oct 2008 20:30

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 31 Oct 2008 20:36 by Absinth + Show more

Re:

RobElliott 31 Oct 2008 21:24

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

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re:

Absinth 02 Nov 2008 21:20

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 02 Nov 2008 23:00

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 03 Nov 2008 11:35

Thanks a lot! Now it works!

Logo and name

tukez 08 Dec 2008 18:20

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 17 Dec 2008 08:47

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 17 Dec 2008 08:59 by cold_blood3d + Show more

page 1 of 3123next »