April 4, 2017 - Journal

One Page Love ‘Award Ribbons’ now in Retina and SVG formats

Below is a little tutorial on how to add a subtle award ribbon to your website. Feel free to hot link the image file. The ribbon is hosted on AmazonS3 and optimized so load time should be swift:)

ps. head here if you are after Printable Award Certificates

Ribbon Preview:

One Page Love Award Ribbon

Direct Ribbon links:

Left-aligned SVG ribbon:

https://s3.amazonaws.com/onepagelove/one-page-love-award-ribbon.svg

Left-aligned Retina PNG ribbon:

https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png

Right-aligned Retina PNG ribbon:

https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-right.png

Left-aligned non-Retina PNG ribbon:

https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png

Right-aligned non-Retina PNG ribbon:

https://s3.amazonaws.com/onepagelove/one-page-love-award-right.png


Quick Embed Code

Simply add this HTML code in your page just after your first <body> tag.

Make sure you replace the link to your feature link.


<a href="https://onepagelove.com" style="display: inline-block; position: fixed; left: 0; top: 100px; z-index:999999;"><img width="73" height="56" src="https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png" srcset="https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png 1x , https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png 2x"></a>


Cleaner Code

Simply add this HTML code in your page just after your first <body> tag, then the CSS to your stylesheet. Make sure you replace the link in the HTML code to the link of your feature.

HTML:


<a href="https://onepagelove.com" class="opl"><img width="73" height="56" src="https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png" srcset="https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png 1x , https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png 2x"></a>

CSS for fixed position:

The code below is for the ribbon to stay visible while the rest of the page content moves when scrolling


.opl {
display: inline-block;
position: fixed;
left: 0;
top: 100px;
z-index:999999;
}

CSS for non-fixed position:

The code below is for the ribbon to move with the rest of content when scrolling


.opl {
display: inline-block;
position: relative;
left: 0;
top: 100px;
z-index:999999;
}

CSS for Right align position:

The code below is for the ribbon to move with the rest of content when scrolling


.opl {
display: inline-block;
position: relative;
right: 0;
top: 100px;
z-index:999999;
}


Feel free to modify or add your own!

Help? rob@onepagelove.com

Much love,
Rob
@robhope