Add a section about how to customize the themes

Fix #82
This commit is contained in:
Fabrice Niessen 2018-11-29 21:16:25 +01:00
parent c504da9a14
commit d0e6eb75ec
2 changed files with 100 additions and 57 deletions

View File

@ -196,35 +196,36 @@
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgb7bb81e">1. Overview</a>
<li><a href="#org6cd39c3">1. Overview</a>
<ul>
<li><a href="#orgf93996a">1.1. Description</a></li>
<li><a href="#orge06470b">1.2. Requirements</a></li>
<li><a href="#org1a056b3">1.1. Description</a></li>
<li><a href="#org14cefd6">1.2. Requirements</a></li>
</ul>
</li>
<li><a href="#org21286cc">2. Quotations</a>
<li><a href="#org1fef36c">2. Quotations</a>
<ul>
<li><a href="#orgcee920d">2.1. About Bigblow</a></li>
<li><a href="#orgab904f8">2.2. About ReadTheOrg</a></li>
<li><a href="#org568c524">2.1. About Bigblow</a></li>
<li><a href="#orgd35cd17">2.2. About ReadTheOrg</a></li>
</ul>
</li>
<li><a href="#org7a909af">3. Gallery</a>
<li><a href="#org5461123">3. Gallery</a>
<ul>
<li><a href="#org9b643d4">3.1. Bigblow</a></li>
<li><a href="#orga67d910">3.2. ReadTheOrg</a></li>
<li><a href="#orgf5a7ff1">3.1. Bigblow</a></li>
<li><a href="#org4059947">3.2. ReadTheOrg</a></li>
</ul>
</li>
<li><a href="#org4c98e3d">4. Demo</a></li>
<li><a href="#orgad9193b">5. Using a theme</a></li>
<li><a href="#orgbf8f2d6">6. Contributing</a>
<li><a href="#org257eb0b">4. Demo</a></li>
<li><a href="#org6be6bfe">5. Using a theme</a></li>
<li><a href="#org5d40f7e">6. Customizing a theme</a></li>
<li><a href="#orga58a918">7. Contributing</a>
<ul>
<li><a href="#org1aaf508">6.1. Issues</a></li>
<li><a href="#org2dfcfcb">6.2. Patches</a></li>
<li><a href="#org2f086bf">6.3. Donations</a></li>
<li><a href="#orgdf21acb">6.4. Follow me</a></li>
<li><a href="#org3437b91">7.1. Issues</a></li>
<li><a href="#org917e168">7.2. Patches</a></li>
<li><a href="#org0c6ec62">7.3. Donations</a></li>
<li><a href="#org31cd7fe">7.4. Follow me</a></li>
</ul>
</li>
<li><a href="#org732cd65">7. License</a></li>
<li><a href="#org8c77008">8. License</a></li>
</ul>
</div>
</div>
@ -235,12 +236,12 @@
<img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt="btn_donate_LG.gif" />
</a>
<div id="outline-container-orgb7bb81e" class="outline-2">
<h2 id="orgb7bb81e"><span class="section-number-2">1</span> Overview</h2>
<div id="outline-container-org6cd39c3" class="outline-2">
<h2 id="org6cd39c3"><span class="section-number-2">1</span> Overview</h2>
<div class="outline-text-2" id="text-1">
</div>
<div id="outline-container-orgf93996a" class="outline-3">
<h3 id="orgf93996a"><span class="section-number-3">1.1</span> Description</h3>
<div id="outline-container-org1a056b3" class="outline-3">
<h3 id="org1a056b3"><span class="section-number-3">1.1</span> Description</h3>
<div class="outline-text-3" id="text-1-1">
<p>
Though you can easily override CSS stylesheets and add your own HTML themes, we
@ -266,8 +267,8 @@ Follow <a href="https://twitter.com/f_niessen">f_niessen</a> on Twitter for upda
</div>
</div>
<div id="outline-container-orge06470b" class="outline-3">
<h3 id="orge06470b"><span class="section-number-3">1.2</span> Requirements</h3>
<div id="outline-container-org14cefd6" class="outline-3">
<h3 id="org14cefd6"><span class="section-number-3">1.2</span> Requirements</h3>
<div class="outline-text-3" id="text-1-2">
<p>
Org mode version 8 (or later) is required.
@ -280,12 +281,12 @@ If such a version is not bundled with your Emacs, install one from ELPA.
</div>
</div>
<div id="outline-container-org21286cc" class="outline-2">
<h2 id="org21286cc"><span class="section-number-2">2</span> Quotations</h2>
<div id="outline-container-org1fef36c" class="outline-2">
<h2 id="org1fef36c"><span class="section-number-2">2</span> Quotations</h2>
<div class="outline-text-2" id="text-2">
</div>
<div id="outline-container-orgcee920d" class="outline-3">
<h3 id="orgcee920d"><span class="section-number-3">2.1</span> About Bigblow</h3>
<div id="outline-container-org568c524" class="outline-3">
<h3 id="org568c524"><span class="section-number-3">2.1</span> About Bigblow</h3>
<div class="outline-text-3" id="text-2-1">
<p>
&ldquo;Very very nice, I enjoy it a lot.&rdquo; <br />
@ -326,8 +327,8 @@ wonderful package!&rdquo; <br />
</div>
</div>
<div id="outline-container-orgab904f8" class="outline-3">
<h3 id="orgab904f8"><span class="section-number-3">2.2</span> About ReadTheOrg</h3>
<div id="outline-container-orgd35cd17" class="outline-3">
<h3 id="orgd35cd17"><span class="section-number-3">2.2</span> About ReadTheOrg</h3>
<div class="outline-text-3" id="text-2-2">
<p>
&ldquo;OMG. The ReadTheOrg theme for exported HTML from org mode files is eye
@ -367,8 +368,8 @@ available.&rdquo; <br />
</div>
</div>
<div id="outline-container-org7a909af" class="outline-2">
<h2 id="org7a909af"><a id="ID-79e0ed21-c3b0-4f00-bdab-29fbff9dcad4"></a><span class="section-number-2">3</span> Gallery</h2>
<div id="outline-container-org5461123" class="outline-2">
<h2 id="org5461123"><a id="ID-79e0ed21-c3b0-4f00-bdab-29fbff9dcad4"></a><span class="section-number-2">3</span> Gallery</h2>
<div class="outline-text-2" id="text-3">
<p>
This is a list of available <b>HTML themes for Org mode</b>, which you can use right
@ -376,8 +377,8 @@ now! Well, I hope to have more than one in a couple of weeks&#x2026;
</p>
</div>
<div id="outline-container-org9b643d4" class="outline-3">
<h3 id="org9b643d4"><span class="section-number-3">3.1</span> Bigblow</h3>
<div id="outline-container-orgf5a7ff1" class="outline-3">
<h3 id="orgf5a7ff1"><span class="section-number-3">3.1</span> Bigblow</h3>
<div class="outline-text-3" id="text-3-1">
<p>
Bigblow is perfect for your work: it is a clean design aimed at optimal <b>Org
@ -477,8 +478,8 @@ Keyboard shortcuts to save time and boost your productivity:
</div>
</div>
<div id="outline-container-orga67d910" class="outline-3">
<h3 id="orga67d910"><span class="section-number-3">3.2</span> ReadTheOrg</h3>
<div id="outline-container-org4059947" class="outline-3">
<h3 id="org4059947"><span class="section-number-3">3.2</span> ReadTheOrg</h3>
<div class="outline-text-3" id="text-3-2">
<p>
ReadTheOrg is a clone of the official &#x2013; and great! &#x2013; <a href="https://github.com/snide/sphinx_rtd_theme">theme</a>
@ -513,8 +514,8 @@ default structure of the HTML export)!
</div>
</div>
<div id="outline-container-org4c98e3d" class="outline-2">
<h2 id="org4c98e3d"><span class="section-number-2">4</span> Demo</h2>
<div id="outline-container-org257eb0b" class="outline-2">
<h2 id="org257eb0b"><span class="section-number-2">4</span> Demo</h2>
<div class="outline-text-2" id="text-4">
<p>
I&rsquo;ve written a demo page for the themes that provides a maximal working support
@ -528,11 +529,11 @@ admonitions, footnotes, tables and other details.
</div>
</div>
<div id="outline-container-orgad9193b" class="outline-2">
<h2 id="orgad9193b"><span class="section-number-2">5</span> Using a theme</h2>
<div id="outline-container-org6be6bfe" class="outline-2">
<h2 id="org6be6bfe"><span class="section-number-2">5</span> Using a theme</h2>
<div class="outline-text-2" id="text-5">
<p>
Using a theme from the <a href="#org7a909af">theme gallery</a> for your own Org documents is very easy:
Using a theme from the <a href="#org5461123">theme gallery</a> for your own Org documents is very easy:
</p>
<ol class="org-ol">
@ -571,31 +572,57 @@ with <code>C-c C-e h h</code>.</li>
</div>
</div>
<div id="outline-container-orgbf8f2d6" class="outline-2">
<h2 id="orgbf8f2d6"><span class="section-number-2">6</span> Contributing</h2>
<div id="outline-container-org5d40f7e" class="outline-2">
<h2 id="org5d40f7e"><span class="section-number-2">6</span> Customizing a theme</h2>
<div class="outline-text-2" id="text-6">
<p>
You love those themes, but you still would like to override particular HTML
tags?
</p>
<p>
Here&rsquo;s an example to insert into your Org documents:
</p>
<div class="org-src-container">
<pre class="src src-org"><span class="org-comment"># Change the background of source block.</span>
<span class="org-org-meta-line">#+HTML_HEAD: &lt;style&gt;pre.src{background:#343131;color:white;} &lt;/style&gt;</span>
</pre>
</div>
<div id="outline-container-org1aaf508" class="outline-3">
<h3 id="org1aaf508"><span class="section-number-3">6.1</span> Issues</h3>
<div class="outline-text-3" id="text-6-1">
<p>
Before doing that, though, if you think it really is an improvement that could
server other persons as well, including me, you&rsquo;re invited to submit your
change&#x2026;
</p>
</div>
</div>
<div id="outline-container-orga58a918" class="outline-2">
<h2 id="orga58a918"><span class="section-number-2">7</span> Contributing</h2>
<div class="outline-text-2" id="text-7">
</div>
<div id="outline-container-org3437b91" class="outline-3">
<h3 id="org3437b91"><span class="section-number-3">7.1</span> Issues</h3>
<div class="outline-text-3" id="text-7-1">
<p>
Report issues and suggest features and improvements on the <a href="https://github.com/fniessen/org-html-themes/issues/new">GitHub issue tracker</a>.
</p>
</div>
</div>
<div id="outline-container-org2dfcfcb" class="outline-3">
<h3 id="org2dfcfcb"><span class="section-number-3">6.2</span> Patches</h3>
<div class="outline-text-3" id="text-6-2">
<div id="outline-container-org917e168" class="outline-3">
<h3 id="org917e168"><span class="section-number-3">7.2</span> Patches</h3>
<div class="outline-text-3" id="text-7-2">
<p>
I love contributions! Patches under any form are always welcome!
</p>
</div>
</div>
<div id="outline-container-org2f086bf" class="outline-3">
<h3 id="org2f086bf"><span class="section-number-3">6.3</span> Donations</h3>
<div class="outline-text-3" id="text-6-3">
<div id="outline-container-org0c6ec62" class="outline-3">
<h3 id="org0c6ec62"><span class="section-number-3">7.3</span> Donations</h3>
<div class="outline-text-3" id="text-7-3">
<p>
If you use the org-html-themes project (or any of <a href="https://github.com/fniessen/">my other projects</a>) and feel it
is making your life better and easier, you can show your appreciation and help
@ -610,9 +637,9 @@ beer and as in speech.
</div>
</div>
<div id="outline-container-orgdf21acb" class="outline-3">
<h3 id="orgdf21acb"><span class="section-number-3">6.4</span> Follow me</h3>
<div class="outline-text-3" id="text-6-4">
<div id="outline-container-org31cd7fe" class="outline-3">
<h3 id="org31cd7fe"><span class="section-number-3">7.4</span> Follow me</h3>
<div class="outline-text-3" id="text-7-4">
<p>
I have an <a href="https://twitter.com/f_niessen">f_niessen</a> account on Twitter. You should follow it.
</p>
@ -620,9 +647,9 @@ I have an <a href="https://twitter.com/f_niessen">f_niessen</a> account on Twitt
</div>
</div>
<div id="outline-container-org732cd65" class="outline-2">
<h2 id="org732cd65"><span class="section-number-2">7</span> License</h2>
<div class="outline-text-2" id="text-7">
<div id="outline-container-org8c77008" class="outline-2">
<h2 id="org8c77008"><span class="section-number-2">8</span> License</h2>
<div class="outline-text-2" id="text-8">
<p>
Copyright (C) 2011-2017 Fabrice Niessen.
</p>

View File

@ -275,6 +275,22 @@ Using a theme from the [[id:79e0ed21-c3b0-4f00-bdab-29fbff9dcad4][theme gallery]
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/readtheorg/js/readtheorg.js"></script>
# #+end_src
* Customizing a theme
You love those themes, but you still would like to override particular HTML
tags?
Here's an example to insert into your Org documents:
#+begin_src org :tangle no
# Change the background of source block.
,#+HTML_HEAD: <style>pre.src{background:#343131;color:white;} </style>
#+end_src
Before doing that, though, if you think it really is an improvement that could
server other persons as well, including me, you're invited to submit your
change...
* Contributing
** Issues