The easiest way to get started is to copy the HTML from the homepage here
If you already have your own HTML, you can simply add the following stylesheets, in this order:
- <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
- <link href="//assets.okfn.org/themes/okfn/styles.css" rel="stylesheet">
- <link href="//assets.okfn.org/themes/bootstrap-responsive.css" rel="stylesheet">
- <link rel="stylesheet" href="//assets.okfn.org/themes/okfn/okf-panel.css"/>
And the javascript...
- <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
- <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<div id="okf-panel" class="collapse"> <iframe src="//assets.okfn.org/themes/okfn/okf-panel.html" scrolling="no"></iframe> </div>And this in the header
<div class="okfn-ribbon"> <a data-toggle="collapse" data-target="#okf-panel">An Open Knowledge Foundation Site</a> </div>
Instructions for using on a site not using this theme, are available here
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Button | Class | Description |
|---|---|---|
| Default | .btn |
Standard gray button with gradient |
| Primary | .btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons |
| Info | .btn-info |
Used as an alternate to the default styles |
| Success | .btn-success |
Indicates a successful or positive action |
| Warning | .btn-warning |
Indicates caution should be taken with this action |
| Danger | .btn-danger |
Indicates a dangerous or potentially negative action |