OKF Expanding Panel
Once applied to your website, the Open Knowledge Foundation Ribbon will look like this:
JavaScript
As a prerequisite, the ribbon requires a little JavaScript. If you are already including Bootstrap you can skip to 'Additional JS'.
JQuery
If your site is not already using JQuery, add this code to the bottom of your page (or wherever you like to put your JS):
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>Bootstrap
Beneath the JQuery line, add:
<script src="//assets.okfn.org/themes/okfn/collapse.min.js" type="text/javascript"></script>Additional JS
Add the below JavaScript:
<script src="//assets.okfn.org/themes/okfn/okf-panel.js" type="text/javascript"></script>CSS
Next, there is a small stylesheet to attach. Paste this line into the <head> section of your webpage:
<link rel="stylesheet" href="//assets.okfn.org/themes/okfn/okf-panel.css"/>HTML
Lastly, there is the HTML. Where and how you add this depends slightly on your website, but the are two basic options.
Fixed Position
This is probably the most straightforward method, just add the following snippet immediately after the opening <body> tag:
<div class="fixed-okf-panel"><div id="okf-panel" class="collapse"><iframe src="//assets.okfn.org/themes/okfn/okf-panel.html" scrolling="no"></iframe></div><div class="okfn-ribbon"><a href="http://okfn.org/" data-toggle="collapse" data-target="#okf-panel" title="Part of the Open Knowledge Foundation Network">An Open Knowledge Foundation Site</a></div></div>Note: this will cause the ribbon to appear in front of whatever is on the page. To avoid this, see below method.
Relative Position
This will add the ribbon into the flow of the document. First add the following immediately after the opening <body> tag:
<div id="okf-panel" class="collapse"><iframe src="//assets.okfn.org/themes/okfn/okf-panel.html" scrolling="no"></iframe></div>Then add this where you want the ribbon to appear (should be near the top of the page):
<div class="okfn-ribbon"><a href="http://okfn.org/" data-toggle="collapse" data-target="#okf-panel" title="Part of the Open Knowledge Foundation Network">An Open Knowledge Foundation Site</a></div>