Browser corner info triangle

Browser corner info triangle

corner-info-RA5.png

An infobox with a twist - using fixed positioning.

Sometimes you want to be able to quickly grab the attention of your visitors to inform them of something relating to your site. A creative way of doing this is by fixing the information in the corner of the browser window, so that even when the page is scrolled down, the element stays on top. We're going to use a triangle, because it fits nicely into the corner of the browser. (Just incase you hadn’t noticed it already, you can see this in action in the top left corner of this page).

First, we need to design the element itself. While it is possible to create triangles with CSS3, it's unlikely they'll render properly in every browser, and because we're using fixed positioning, the last thing you want is a great big box stuck in the corner of your visitor’s browser window. So instead, we're going to use a png. You can grab a blank triangle png at the bottom of this page, but it’s pretty easy to design one yourself.

Now to add it to the site. You can either put it in a live template so that every page on your site/category has the image, or you can just add it to selected pages. We’ll give the image the class corner-info and add the class to our custom CSS. If you’re promoting a page on your site, remember to add a link to your image.

[[image corner-info.png class="corner-info" link=“themes:redapple” title="RedApple theme now available"]]

And finally the all important CSS. We’ll set the positioning to fixed, and have to compensate for the wikidot nav bar by pushing it down from the top 25px. To make sure it stays on top of everything, we’ve also given it a z-index of 100.

.corner-info {
    position: fixed;
    top: 25px;
    left: 0;
    z-index: 100;
}

Because the whole box is a clickable link, we’ve resized it down a little bit so that it doesn’t overlay the topbar and make those links not work when viewed in a narrow browser window.

.corner-info  {
    position: fixed;
    top: 25px;
    left: 0;
    z-index: 100;
    width: 120px;
    height: 120px;
}

And that’s it. You now have a quick and easy way to promote a section of your site that nobody could miss.

Files

Grab a copy of the Blank Triangle.

Enjoy the article? Tweet it!

tags — fixed links promo

Discussion - No comments yet…0 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.