2014-09-13 15:09:50 +02:00
|
|
|
#+TITLE: Awesome HTML themes for files exported from Org mode
|
|
|
|
#+AUTHOR: Fabrice Niessen
|
|
|
|
#+EMAIL: (concat "fniessen" at-sign "pirilampo.org")
|
2014-09-13 15:12:41 +02:00
|
|
|
#+Time-stamp: <2014-09-13 Sat 15:12>
|
2014-09-13 15:09:50 +02:00
|
|
|
#+DESCRIPTION: Org-HTML export made simple.
|
|
|
|
#+KEYWORDS: org, export, html, theme, style, css, js
|
|
|
|
#+LANGUAGE: en
|
|
|
|
#+OPTIONS: H:4 toc:t num:2
|
|
|
|
|
|
|
|
#+PROPERTY: padline no
|
|
|
|
#+SETUPFILE: setup/bigblow.setup
|
|
|
|
|
|
|
|
* Overview
|
|
|
|
|
|
|
|
** Description
|
|
|
|
|
|
|
|
Org provides basic HTML support. Though, we can easily override CSS stylesheets
|
|
|
|
and add our own HTML themes.
|
|
|
|
|
|
|
|
** 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.
|
|
|
|
|
|
|
|
* Gallery
|
|
|
|
:PROPERTIES:
|
|
|
|
:ID: 79e0ed21-c3b0-4f00-bdab-29fbff9dcad4
|
|
|
|
:END:
|
|
|
|
|
|
|
|
This is a list of available *themes for Org*, which you can use right now! Well,
|
|
|
|
I hope to have more than one in a couple of weeks...
|
|
|
|
|
|
|
|
Click thumbnails for a bigger view.
|
|
|
|
|
|
|
|
** BigBlow
|
|
|
|
|
|
|
|
BigBlow is perfect for your work: it is a clean design aimed at optimal *Org
|
|
|
|
experience in your browser*. It looks just awesome!
|
|
|
|
|
2014-09-13 15:12:41 +02:00
|
|
|
#+HTML: <iframe width="640" height="360" src="//www.youtube.com/embed/DnSGSiXYuOk?rel=0" frameborder="0" allowfullscreen></iframe>
|
2014-09-13 15:09:50 +02:00
|
|
|
|
|
|
|
* 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/bigblow.setup][bigblow.setup]] file to your project
|
|
|
|
and link to it this way:
|
|
|
|
|
|
|
|
#+begin_src org :exports code
|
|
|
|
,#+SETUPFILE: 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/bigblow.setup
|
|
|
|
# -*- mode: org; -*-
|
|
|
|
|
|
|
|
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/css/htmlize.css"/>
|
|
|
|
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/css/bigblow.css"/>
|
|
|
|
,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/css/hideshow.css"/>
|
|
|
|
|
|
|
|
,#+HTML_HEAD: <script type="text/javascript" src="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/js/jquery-1.11.0.min.js"></script>
|
|
|
|
,#+HTML_HEAD: <script type="text/javascript" src="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>
|
|
|
|
|
|
|
|
,#+HTML_HEAD: <script type="text/javascript" src="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/js/jquery.localscroll-min.js"></script>
|
|
|
|
,#+HTML_HEAD: <script type="text/javascript" src="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
|
|
|
|
,#+HTML_HEAD: <script type="text/javascript" src="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/js/jquery.zclip.min.js"></script>
|
|
|
|
,#+HTML_HEAD: <script type="text/javascript" src="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/js/bigblow.js"></script>
|
|
|
|
,#+HTML_HEAD: <script type="text/javascript" src="http://svn/mc/missioncriticalit/org-style/trunk/styles/bigblow/js/hideshow.js"></script>
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
#+begin_src org :exports code :tangle setup/bigblow-pirilampo.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
|
|
|
|
|
|
|
|
Here a local version (using relative paths):
|
|
|
|
|
|
|
|
#+begin_src org :exports code :tangle setup/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
|
|
|
|
|
|
|
|
* Contributing
|
|
|
|
|
|
|
|
I love contributions! If you'd like to contribute, please send a patch file or
|
|
|
|
submit a pull request via GitHub.
|
|
|
|
|
|
|
|
* License
|
|
|
|
|
|
|
|
Copyright (C) 2011-2014 Fabrice Niessen.
|
|
|
|
|
|
|
|
These Org-HTML Themes are open source and free to use under GPL.
|