How to add a logo correctly ?

[euspirit]

Hi,

I have tried to add a logo to my site.
In IE7 there is no problem the menu is just below the logo. It's perfect, but in Firefox the logo is not properly put up and the menu is not aligned.

Thank you for your help.

[kbeeveer46]

The only thing that we can tell you is that you'll have to mess around with your logo in header.tpl. It's a pain in the butt to get things to work in IE and FF, we know.

[Simpatico]

It's simpler to position a logo in the CSS file using the 'background' variable than hard coding it into the header.tpl file.

It's best to get acquainted with CSS hacks too, otherwise you'll find it's a total nightmare designing a cross-browser compatible website.

You can use three separate CSS files (one for IE6 and below, one for IE7, and one for proper browsers - Firefox, Opera, Safari, Camino, Mozilla etc.) and include conditional comments in the meta.tpl, e.g. use this code and IE6 users will use an IE6 CSS file:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6andearlier.css" />
<![endif]-->

A pain, I know, but I'm afraid CSS hacks/conditional comments etc. are part and parcel of contemporary web design.

[beatniak]

First, make sure that this part in your header:

<div id="site-name"><a href="http://www.bepol.be">You site name</a></div>

After that, just like i said in another post (i'll repeat...):

Aaargh!!!! I created some stuff in Mollio Beat with a reason. I will explain the logo stuff:

#header #site-name a, #header #site-name a:hover {
display:block;
height:160px;
width:270px;
background:url("../images/logo.png") no-repeat top left;
text-indent:-2000em;
position:absolute;
top:0px;left:0px;
text-decoration:none;z-index:1;
}

just dont forget that the text should be offscreen, and be replaced by your logo image ON-screen with the use of CSS. text-indent:-2000em; makes the text non visable on the screen.

Why???
In text browsers (for the blind / mobile / GOOGLE!!!! / etc) you won't see the pictures, but you can see the text. So your sitename (text) should be on top of the page! In normal browsers you should see the logo, not the text.

So you should do my switch trick...
textbrowsers = sitename in text
normal browsers = sitename in logo (image)

Why???
Searchengines love your sitename on top of the page and in your title. Blind people NEED that so they know on what page they are. And my rule is always: if the blind understand your page, the searchengines do so too!!! And also much better for pda's and mobile. But people who are no search engine (or who are not blind) should see your nice and shiny butt-kicking logo!

-----

On another note: you should have higher values for "height" in:
* html #content-wrap 1,2,3
and in
#content-wrap 1,2,3
for a better footer placement

[euspirit]

Thank very much for your answers !

I still have a problem (I'm a newbie )).
I add the codein main.css but the menu nav is not under the logo.

/* LAYOUT - HEADER ---------------------------------------------------------------------------------------------------------------------------*/
#header {background:#666 url("../images/sprites.gif") repeat-x 0 100%;margin:0 0 25px;padding:0 0 8px;width:100%; position:relative;} 
#header #site-name a, #header #site-name a:hover {
display:block;
height:160px;
width:270px;
background:url("../images/logo.png") no-repeat top left;
text-indent:-2000em;
position:absolute;
top:0px;left:0px;
text-decoration:none;z-index:1;
}

thank you for your help

[euspirit]

Can somebody help me ?

Thanks

[Simpatico]

Remove these lines and it should work:

position:absolute;
top:0px;left:0px;

[permood]

I am having same problem. I can't get it right. is there any doc shows this step by step.

By the way, i can't believe Pligg team thought no one will add logo and site name. and they didn't provide this funtionality out of box.

why not add these things in configure mod so newbie(s) like me don't have any problem to setup basic things.

well, it's free ware world!

[m1gu3]

1. go back to your admin page and into the template editor and open the pligg.tpl file from the drop-down menu.

2. copy all the content into dreamweaver (or your prefered HTML editing software), make sure you paste it into a blank document, no tags, and you are pasting it into the code not the page's body

3. switch into design view and add you logo just like any HTML page, obviously placing your image in your templates /images directory

4. now you have to replace the path to your file with the following line corresponding to the file you want to add to the template:

"{$my_pligg_base}/templates/{$the_template}/images/logo.png"

5. finally go back into you admin and to the template editor and replace EVERYTHING INTO PLIGG.TPL with that thing you did wit your logo, all of it from begining to end so it would work.


also you can add a link to you image to your pligg site, but that is entirely up to you. luck