Logo on top of page

[YaKnowGuy]

Hi all,

I want to add a .jpg logo on the top of the page in the header area. How do I do this? I know HTML ok, but I'm still dodgy in php yet

Btw, just love s9y!

Cheers,
Greg

[Little Hamster]

Can you do what you want with CSS? The banner area is displayed as

Code: Select all

<div id="serendipity_banner">
    <h1><a class="homelink1" href="http://your.host/s9y/">Blog title</a></h1>
    <h2><a class="homelink2" href="http://your.host/s9y/">blog subtitle</a></h2>
</div>

You can add background jpeg for the banner, reposition the blog titles etc with CSS.

[YaKnowGuy]

No Im not that crash hot with CSS but with a small amount of help can dot it. Im quite determined!

Not a background required, just a logo in the left margin using the mt3-independence template.

OK...

First Q. Which file to edit? index.tpl in the default template folder?

If so, do I put a new line of code here?...

{if $leftSidebarElements > 0}
<td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
xxxxxxxxxxxxxxxxxxxxx???

And if the image is called say SMlogo_120.gif and is located in /images, what is the line I put in. This looks a bit different to the HTML ive used.

Many thanks,
Greg

[TKS]

I also would like to change to a logo banner at the top of the blog...and I also do not know where to look. Perhaps putting a sticky post in the forum for this subject will limit the number of posts that are about it?


TKS

[Little Hamster]

Greg, when you say a logo on the left margin, do you mean something like the "idea" template (the light bulb)? The theme is bundled with version 0.7. The light bulb is the background of the banner. Of course you can use a smaller image. Here's a snippet from the style.css of the theme:

Code: Select all

#serendipity_banner {
  background-image: url(templates/idea/img/I_had_an_idea.jpg);
  background-repeat: no-repeat;
  height: 150px;
}

The CSS specifies a background image for the banner, and no-repeat means the image is only shown once.

[YaKnowGuy]

Hi LH,

Thankyou for your interest and reply.

http://www.sharedmemories.info/blog/

Thats the link to my blog.

I want to put a logo in the left margin (dark blue area) at the top. So that the logo is next to the red header band. I dont want it as a background, just top left of the page.

A bit frustrating as I dont have enough CSS experience. If it was just HTML i'd be ok

Thanks again for your response.

Cheers,
Greg (merry xmas too!)

[tadpole]

First off, look at the idea theme (it's the default on my blog--notice that the light bulb doesn't /look/ like a background image as it doesn't repeat. Is your image semantically significant, or is it exclusively for presentational purposes? If the latter, you should use the CSS technique in Idea.

How big is the image? The easiest way would probably be to use it as the (non-repeating) background for the body element, and make sure the header and mainpane are small enough that they don't eclipse the image--if I were you, I would just set their margin-left and margin-right to the width of the image.

If you need help, give me the URI of the image and, if you want to eliminate any ambiguity, a raster mock-up, and i'll do it for you.

[YaKnowGuy]

Hey Tadpole

The images is loacted:

http://www.sharedmemories.info/images/SMlogo_120.gif

size 120 pixels wide. I can adjust this as necessary in Photoshop.

Its for presentation purposes...a corporate logo.

Yep, love the bulb.

Mock up http://www.sharedmemories.info/images/smblog1.jpg

The logo could even go into the red area just before the words Shared Memories. It may look even better there given the colours.

Hope this helps

Thanks,
Greg