Add a section about how to customize the themes

Fix #82
pull/87/head
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> <h2>Table of Contents</h2>
<div id="text-table-of-contents"> <div id="text-table-of-contents">
<ul> <ul>
<li><a href="#orgb7bb81e">1. Overview</a> <li><a href="#org6cd39c3">1. Overview</a>
<ul> <ul>
<li><a href="#orgf93996a">1.1. Description</a></li> <li><a href="#org1a056b3">1.1. Description</a></li>
<li><a href="#orge06470b">1.2. Requirements</a></li> <li><a href="#org14cefd6">1.2. Requirements</a></li>
</ul> </ul>
</li> </li>
<li><a href="#org21286cc">2. Quotations</a> <li><a href="#org1fef36c">2. Quotations</a>
<ul> <ul>
<li><a href="#orgcee920d">2.1. About Bigblow</a></li> <li><a href="#org568c524">2.1. About Bigblow</a></li>
<li><a href="#orgab904f8">2.2. About ReadTheOrg</a></li> <li><a href="#orgd35cd17">2.2. About ReadTheOrg</a></li>
</ul> </ul>
</li> </li>
<li><a href="#org7a909af">3. Gallery</a> <li><a href="#org5461123">3. Gallery</a>
<ul> <ul>
<li><a href="#org9b643d4">3.1. Bigblow</a></li> <li><a href="#orgf5a7ff1">3.1. Bigblow</a></li>
<li><a href="#orga67d910">3.2. ReadTheOrg</a></li> <li><a href="#org4059947">3.2. ReadTheOrg</a></li>
</ul> </ul>
</li> </li>
<li><a href="#org4c98e3d">4. Demo</a></li> <li><a href="#org257eb0b">4. Demo</a></li>
<li><a href="#orgad9193b">5. Using a theme</a></li> <li><a href="#org6be6bfe">5. Using a theme</a></li>
<li><a href="#orgbf8f2d6">6. Contributing</a> <li><a href="#org5d40f7e">6. Customizing a theme</a></li>
<li><a href="#orga58a918">7. Contributing</a>
<ul> <ul>
<li><a href="#org1aaf508">6.1. Issues</a></li> <li><a href="#org3437b91">7.1. Issues</a></li>
<li><a href="#org2dfcfcb">6.2. Patches</a></li> <li><a href="#org917e168">7.2. Patches</a></li>
<li><a href="#org2f086bf">6.3. Donations</a></li> <li><a href="#org0c6ec62">7.3. Donations</a></li>
<li><a href="#orgdf21acb">6.4. Follow me</a></li> <li><a href="#org31cd7fe">7.4. Follow me</a></li>
</ul> </ul>
</li> </li>
<li><a href="#org732cd65">7. License</a></li> <li><a href="#org8c77008">8. License</a></li>
</ul> </ul>
</div> </div>
</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" /> <img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt="btn_donate_LG.gif" />
</a> </a>
<div id="outline-container-orgb7bb81e" class="outline-2"> <div id="outline-container-org6cd39c3" class="outline-2">
<h2 id="orgb7bb81e"><span class="section-number-2">1</span> Overview</h2> <h2 id="org6cd39c3"><span class="section-number-2">1</span> Overview</h2>
<div class="outline-text-2" id="text-1"> <div class="outline-text-2" id="text-1">
</div> </div>
<div id="outline-container-orgf93996a" class="outline-3"> <div id="outline-container-org1a056b3" class="outline-3">
<h3 id="orgf93996a"><span class="section-number-3">1.1</span> Description</h3> <h3 id="org1a056b3"><span class="section-number-3">1.1</span> Description</h3>
<div class="outline-text-3" id="text-1-1"> <div class="outline-text-3" id="text-1-1">
<p> <p>
Though you can easily override CSS stylesheets and add your own HTML themes, we 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> </div>
<div id="outline-container-orge06470b" class="outline-3"> <div id="outline-container-org14cefd6" class="outline-3">
<h3 id="orge06470b"><span class="section-number-3">1.2</span> Requirements</h3> <h3 id="org14cefd6"><span class="section-number-3">1.2</span> Requirements</h3>
<div class="outline-text-3" id="text-1-2"> <div class="outline-text-3" id="text-1-2">
<p> <p>
Org mode version 8 (or later) is required. 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> </div>
<div id="outline-container-org21286cc" class="outline-2"> <div id="outline-container-org1fef36c" class="outline-2">
<h2 id="org21286cc"><span class="section-number-2">2</span> Quotations</h2> <h2 id="org1fef36c"><span class="section-number-2">2</span> Quotations</h2>
<div class="outline-text-2" id="text-2"> <div class="outline-text-2" id="text-2">
</div> </div>
<div id="outline-container-orgcee920d" class="outline-3"> <div id="outline-container-org568c524" class="outline-3">
<h3 id="orgcee920d"><span class="section-number-3">2.1</span> About Bigblow</h3> <h3 id="org568c524"><span class="section-number-3">2.1</span> About Bigblow</h3>
<div class="outline-text-3" id="text-2-1"> <div class="outline-text-3" id="text-2-1">
<p> <p>
&ldquo;Very very nice, I enjoy it a lot.&rdquo; <br /> &ldquo;Very very nice, I enjoy it a lot.&rdquo; <br />
@ -326,8 +327,8 @@ wonderful package!&rdquo; <br />
</div> </div>
</div> </div>
<div id="outline-container-orgab904f8" class="outline-3"> <div id="outline-container-orgd35cd17" class="outline-3">
<h3 id="orgab904f8"><span class="section-number-3">2.2</span> About ReadTheOrg</h3> <h3 id="orgd35cd17"><span class="section-number-3">2.2</span> About ReadTheOrg</h3>
<div class="outline-text-3" id="text-2-2"> <div class="outline-text-3" id="text-2-2">
<p> <p>
&ldquo;OMG. The ReadTheOrg theme for exported HTML from org mode files is eye &ldquo;OMG. The ReadTheOrg theme for exported HTML from org mode files is eye
@ -367,8 +368,8 @@ available.&rdquo; <br />
</div> </div>
</div> </div>
<div id="outline-container-org7a909af" class="outline-2"> <div id="outline-container-org5461123" class="outline-2">
<h2 id="org7a909af"><a id="ID-79e0ed21-c3b0-4f00-bdab-29fbff9dcad4"></a><span class="section-number-2">3</span> Gallery</h2> <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"> <div class="outline-text-2" id="text-3">
<p> <p>
This is a list of available <b>HTML themes for Org mode</b>, which you can use right 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> </p>
</div> </div>
<div id="outline-container-org9b643d4" class="outline-3"> <div id="outline-container-orgf5a7ff1" class="outline-3">
<h3 id="org9b643d4"><span class="section-number-3">3.1</span> Bigblow</h3> <h3 id="orgf5a7ff1"><span class="section-number-3">3.1</span> Bigblow</h3>
<div class="outline-text-3" id="text-3-1"> <div class="outline-text-3" id="text-3-1">
<p> <p>
Bigblow is perfect for your work: it is a clean design aimed at optimal <b>Org 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> </div>
<div id="outline-container-orga67d910" class="outline-3"> <div id="outline-container-org4059947" class="outline-3">
<h3 id="orga67d910"><span class="section-number-3">3.2</span> ReadTheOrg</h3> <h3 id="org4059947"><span class="section-number-3">3.2</span> ReadTheOrg</h3>
<div class="outline-text-3" id="text-3-2"> <div class="outline-text-3" id="text-3-2">
<p> <p>
ReadTheOrg is a clone of the official &#x2013; and great! &#x2013; <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> 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> </div>
<div id="outline-container-org4c98e3d" class="outline-2"> <div id="outline-container-org257eb0b" class="outline-2">
<h2 id="org4c98e3d"><span class="section-number-2">4</span> Demo</h2> <h2 id="org257eb0b"><span class="section-number-2">4</span> Demo</h2>
<div class="outline-text-2" id="text-4"> <div class="outline-text-2" id="text-4">
<p> <p>
I&rsquo;ve written a demo page for the themes that provides a maximal working support 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> </div>
<div id="outline-container-orgad9193b" class="outline-2"> <div id="outline-container-org6be6bfe" class="outline-2">
<h2 id="orgad9193b"><span class="section-number-2">5</span> Using a theme</h2> <h2 id="org6be6bfe"><span class="section-number-2">5</span> Using a theme</h2>
<div class="outline-text-2" id="text-5"> <div class="outline-text-2" id="text-5">
<p> <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> </p>
<ol class="org-ol"> <ol class="org-ol">
@ -571,31 +572,57 @@ with <code>C-c C-e h h</code>.</li>
</div> </div>
</div> </div>
<div id="outline-container-orgbf8f2d6" class="outline-2"> <div id="outline-container-org5d40f7e" class="outline-2">
<h2 id="orgbf8f2d6"><span class="section-number-2">6</span> Contributing</h2> <h2 id="org5d40f7e"><span class="section-number-2">6</span> Customizing a theme</h2>
<div class="outline-text-2" id="text-6"> <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>
<div id="outline-container-org1aaf508" class="outline-3">
<h3 id="org1aaf508"><span class="section-number-3">6.1</span> Issues</h3> <p>
<div class="outline-text-3" id="text-6-1"> 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> <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>. 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> </p>
</div> </div>
</div> </div>
<div id="outline-container-org2dfcfcb" class="outline-3"> <div id="outline-container-org917e168" class="outline-3">
<h3 id="org2dfcfcb"><span class="section-number-3">6.2</span> Patches</h3> <h3 id="org917e168"><span class="section-number-3">7.2</span> Patches</h3>
<div class="outline-text-3" id="text-6-2"> <div class="outline-text-3" id="text-7-2">
<p> <p>
I love contributions! Patches under any form are always welcome! I love contributions! Patches under any form are always welcome!
</p> </p>
</div> </div>
</div> </div>
<div id="outline-container-org2f086bf" class="outline-3"> <div id="outline-container-org0c6ec62" class="outline-3">
<h3 id="org2f086bf"><span class="section-number-3">6.3</span> Donations</h3> <h3 id="org0c6ec62"><span class="section-number-3">7.3</span> Donations</h3>
<div class="outline-text-3" id="text-6-3"> <div class="outline-text-3" id="text-7-3">
<p> <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 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 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> </div>
<div id="outline-container-orgdf21acb" class="outline-3"> <div id="outline-container-org31cd7fe" class="outline-3">
<h3 id="orgdf21acb"><span class="section-number-3">6.4</span> Follow me</h3> <h3 id="org31cd7fe"><span class="section-number-3">7.4</span> Follow me</h3>
<div class="outline-text-3" id="text-6-4"> <div class="outline-text-3" id="text-7-4">
<p> <p>
I have an <a href="https://twitter.com/f_niessen">f_niessen</a> account on Twitter. You should follow it. I have an <a href="https://twitter.com/f_niessen">f_niessen</a> account on Twitter. You should follow it.
</p> </p>
@ -620,9 +647,9 @@ I have an <a href="https://twitter.com/f_niessen">f_niessen</a> account on Twitt
</div> </div>
</div> </div>
<div id="outline-container-org732cd65" class="outline-2"> <div id="outline-container-org8c77008" class="outline-2">
<h2 id="org732cd65"><span class="section-number-2">7</span> License</h2> <h2 id="org8c77008"><span class="section-number-2">8</span> License</h2>
<div class="outline-text-2" id="text-7"> <div class="outline-text-2" id="text-8">
<p> <p>
Copyright (C) 2011-2017 Fabrice Niessen. Copyright (C) 2011-2017 Fabrice Niessen.
</p> </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> # ,#+HTML_HEAD: <script type="text/javascript" src="styles/readtheorg/js/readtheorg.js"></script>
# #+end_src # #+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 * Contributing
** Issues ** Issues