org-html-themes/README.org

#+AUTHOR:    Fabrice Niessen
#+EMAIL:     (concat "fniessen" at-sign "pirilampo.org")
#+DESCRIPTION: Org-HTML export made simple.
#+KEYWORDS:  org-mode, export, html, theme, style, css, js, bigblow
#+LANGUAGE:  en
#+OPTIONS:   H:4 toc:t num:2

#+PROPERTY:  padline no
# #+SETUPFILE: setup/bigblow-local.setup
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/rtd.css"/>
#+HTML_HEAD: <script type="text/javascript" src="styles/rtd.js"></script>

* Awesome HTML themes for files exported from Org mode [[http://opensource.org/licenses/GPL-3.0][http://img.shields.io/:license-gpl-blue.svg]] [[https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=VCVAS6KPDQ4JC&lc=BE&item_number=org%2dhtml%2dthemes&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted][https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif]]

** Overview

*** Description

Org mode provides basic HTML support.  Though, we can easily override CSS
stylesheets and add our own HTML themes.

#+begin_html
<script src="http://platform.twitter.com/widgets.js"></script>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="f_niessen">Tweet</a>
#+end_html

*** Objective

The goal of the *Org-HMTL themes* is to provide you with a list of very nice
(cross-browser) themes.

*** Requirements

Org mode version 8 (or later) is required.

If such a version is not bundled with your Emacs, install one from ELPA.

** Quotations

"Very very nice, I enjoy it a lot." \\
-- /Ista Zahn/

"This is awesome. I love it!" \\
-- /Rainer M Krug/

"This is awesome!!" \\
-- /Mehul Sanghvi/

"This very nice html theme. [...] I cannot use another emacs-theme than your
[[https://github.com/fniessen/emacs-leuven-theme][emacs-leuven-theme]], and it is going to be probably the same with your html
theme!" \\
-- /Joseph Vidal-Rosset/

"Thanks a lot for sharing [...] the wonderful Bigblow theme.  I create lot of
specification for other team members to use.  It has always been a trouble to
share and maintain such spec.  Now, I can create a much neater spec which is
available for the team's reference as a webpage." \\
-- /Shankar R./

** Gallery
  :PROPERTIES:
  :ID:       79e0ed21-c3b0-4f00-bdab-29fbff9dcad4
  :END:

This is a list of available *HTML themes for Org mode*, which you can use right
now!  Well, I hope to have more than one in a couple of weeks...

*** Bigblow

Bigblow is perfect for your work: it is a clean design aimed at optimal *Org
mode experience in your browser*. It looks just awesome!

#+ATTR_HTML: :width 640
[[https://www.youtube.com/watch?v=DnSGSiXYuOk][file:bigblow.png]]

Click on the image for a quick demo of Bigblow (2:49 min, no audio).

Keyboard shortcuts to save time and boost your productivity:

| Shortcut | What it does                      |
|----------+-----------------------------------|
| =?= or =h=   | Access the *dashboard*              |
| =n=        | Move to the *next* main heading     |
| =p=        | Move to the *previous* main heading |
| =b=        | Scroll up                         |
| =<=        | Scroll to top                     |
| =>=        | Scroll to bottom                  |
| =-=        | Collapse all                      |
| =+=        | Expand all                        |
| =r=        | Go to next task in list           |
| =R=        | Go to previous task in list       |
| =q=        | Stop reviewing the list of tasks  |
| =g=        | Reload the page                   |

** Installing a theme

Using a theme from the [[id:79e0ed21-c3b0-4f00-bdab-29fbff9dcad4][theme gallery]] for your own Org documents is very easy:
you just need to clone the Org-HTML themes project and add a =#+SETUPFILE:=
directive in the preamble to include the CSS and JavaScript files.

You can either:

- copy the "setup file" of the chosen theme to the directory of your Org files,

  #+begin_src org :exports code
  ,#+SETUPFILE: THEME-NAME.setup
  #+end_src

  or

- use the (relative or absolute) path to the "setup file" (in your Git local
  repository)

  #+begin_src org :exports code
  ,#+SETUPFILE: path/to/Git/repo/setup/THEME-NAME.setup
  #+end_src

*** Bigblow

In order to use this style, just copy the [[file:setup/theme-bigblow.setup][theme-bigblow.setup]] file to your
project and link to it this way:

#+begin_src org :exports code
,#+SETUPFILE: theme-bigblow.setup
#+end_src

If you prefer, you can add the content of the setup file at the beginning of
your Org file instead:

#+begin_src org :exports code :tangle setup/theme-bigblow.setup
# -*- mode: org; -*-

,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/htmlize.css"/>
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/bigblow.css"/>
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/hideshow.css"/>

,#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery-1.11.0.min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>

,#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.localscroll-min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.zclip.min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/bigblow.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/hideshow.js"></script>
#+end_src

**** Local version

Here a local version (using relative paths):

#+begin_src org :exports code :tangle setup/theme-bigblow-local.setup
# -*- mode: org; -*-

,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/htmlize.css"/>
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/bigblow.css"/>
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/hideshow.css"/>

,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery-1.11.0.min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>

,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.localscroll-min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.zclip.min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/bigblow.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/hideshow.js"></script>
#+end_src

**** Development version

Here is a remote version (with CSS/JS files served from GitHub webservers) to
share *temporary* examples or demos with small numbers of people:

#+begin_src org :exports code :tangle setup/theme-bigblow-github-dev.setup
# -*- mode: org; -*-

,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/htmlize.css"/>
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/bigblow.css"/>
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/hideshow.css"/>

,#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery-1.11.0.min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>

,#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.localscroll-min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.zclip.min.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/bigblow.js"></script>
,#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/hideshow.js"></script>
#+end_src

** Contributing

*** Issues

Report issues and suggest features and improvements on the [[https://github.com/fniessen/org-html-themes/issues/new][GitHub issue tracker]].

*** Patches

I love contributions!  Patches under any form are always welcome!

*** Donations

If you like the org-html-themes project, you can show your appreciation and
support future development by making a [[https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=VCVAS6KPDQ4JC&lc=BE&item_number=org%2dhtml%2dthemes&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted][donation]] through PayPal.

Regardless of the donations, org-html-themes will always be free both as in
beer and as in speech.

** License

Copyright (C) 2011-2014 Fabrice Niessen.

Author: Fabrice Niessen \\
Keywords: org-mode html themes

This program is free software; you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later
version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with
this program. If not, see http://www.gnu.org/licenses/.