Sweet & Subtle – Introducing One Page Love ‘Design Award’ Ribbons!
Below is a little tutorial on how to add a subtle little design award banner to your website! Feel free to hot link the image file, it is hosted on AmazonS3 and optimized to 1kb so load time should be sweet:)
Preview:


Direct image link:
Hot linking is all good!
https://s3.amazonaws.com/onepagelove/one-page-love-award.png
Code
Simply add the HTML in your page just after your first <body> tag, then the CSS in your stylesheet. Make sure you replace the link in the HTML code to the link of your feature.
HTML:
<div class="opl"><a href="http://onepagelove.com/AddYourFeatureLinkHere" target="_blank">Your Site Name featured on One Page Love</a></div>
CSS:
The code below is for the banner to stay visible while the rest of the page content moves when scrolling
.opl {
position:fixed;
top:100px;
left:0px;
z-index:99999;
}
.opl a {
width:73px;
height:56px;
text-indent:-9999px;
display:block;
background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award.png') no-repeat;
}
The code below is for the banner to move with the rest of content when scrolling
.opl {
position:relative;
top:100px;
left:0px;
z-index:99999;
}
.opl a {
width:73px;
height:56px;
text-indent:-9999px;
display:block;
background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award.png') no-repeat;
}
Feel free to modify/tweak/add your own!
Hey, I'm Rob and I run One Page Love!
To briefly introduce myself, I'm from Cape Town, South Africa where we have no shortage of beauty, waves or good times. When I'm not working on One Page Love, I love working on Footer Love, mmminimal and ThemeCobra. Follow what I'm up to on Twitter and feel free to contact me via email, especially suggestions to improve OPL!

