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
Logo on top of page
-
- Regular
- Posts: 62
- Joined: Thu Oct 07, 2004 3:16 pm
Can you do what you want with CSS? The banner area is displayed as
You can add background jpeg for the banner, reposition the blog titles etc with CSS.
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>
Thanks, but....
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
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
-
- Regular
- Posts: 62
- Joined: Thu Oct 07, 2004 3:16 pm
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:
The CSS specifies a background image for the banner, and no-repeat means the image is only shown once.
Code: Select all
#serendipity_banner {
background-image: url(templates/idea/img/I_had_an_idea.jpg);
background-repeat: no-repeat;
height: 150px;
}
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!)
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!)
-
- Regular
- Posts: 88
- Joined: Fri Oct 08, 2004 6:20 am
- Location: 33°6'4.079" North, 117°3'6.563" West
- Contact:
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.
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.
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
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