Now I would like a tutorial on how to make a extensible logo/banner …
Now I would like a tutorial on how to make a extensible logo/banner …
Now I would like a tutorial on how to make a extensible logo/banner …
What is an "extensible logo/banner" ?
Example: orange juice //grabs 95% of the screen width, up to 1200 pixels wide.
The banner header logo should be able to grow / decrease with the actual width of the browser's screen/window. Usually it is composed of a left part and of a right part which overlaps the left part.
Ask Squark, he should know what I'm talking about.
Although I haven't investigated this in detail I did achieve something similar with my header for Stacey's site at http://southwestimagebank.org/. The header image does expand and contract with the liquid layout, although if the screen gets a lot smaller you start to lose the left and right edges of the image.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Very nice, Rob.
Thanks for the tutorial.
How do I link the header image to a url (typically, the site address itself)?
You've put the image into the #header-extra-div-1 rule as this tutorial says, but by doing that you won't be able to link it to anything. The main image on a site is normally put as a background to the #header rule.
To have the image link to your start page you need to use a combination of the #header, #header h1 and #header h1 a rules.
1) Put the image into the #header rule in your css as follows:
#header { background: url("http://satyayoga.wikidot.com/local--files/home:home/satyayoga_logo_hd_medium.jpg") no-repeat scroll 0 0 transparent; }
2) Display the text of the site title by adding changing the #header h1, #header h2 from display:none; to:
#header h1, #header h2 { display: block; left: 0; top: 0; }
3) Then put the following into the #header h1 a rule:
#header h1 a { color: #222; font-size: 40px; height: 100px; letter-spacing: 1px; padding: 0; position: absolute; text-indent: -9999px; width: 300px; }
The link is actually applied to the site title text but with the text-indent we've moved the text completely out of the way while leaving the actual link intact.
Clicking anywhere on the image will now link to the start page as you can see in the image below. You can't link it to anything else as it is set in the backend javascript by Wikidot. But you can of course change which page is your start page.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.