On 07/19/2016 09:09 AM, Jarmo Hurri wrote:
Greetings.
I am writing teaching material (for programming) using Org. All the
material (text, figures, code, program outputs) are written using Org
and Babel-supported languages. Publishing to html works just fine. What
I would like to do, however, is to add some layout structure to the
produced html.
More specifically, I would like to add, on all pages, a navigation bar
on the left-hand side and a title bar with no functionality on the top
of each page.
What options do I have to accomplish this? Searches led me to "derived
backends," but they sound like an overkill for a task that is this
simple. Or?
Jarmo
I don't know if I can answer your questions, but I used to do something
similar to what you want using Org and CSS. I had a navigation list at
the top and a fixed table of contents. There are some disadvantages to
this setup and I no longer use it.
I still have some pages up which use this setup. You can see these pages
by clicking on the following link:
http://srandby.org/ictcm-2014/index.html
To get the navigation list, I had the following at the top of the Org
file before any headlines (two items are not used in the above page):
#+BEGIN_HTML
<!-- Begin navigation list -->
<div id="nav">
<ul>
<li><a href="./home.html" title="Home page">Home</a></li>
<li><a href="./lessons.html" title="Lessons">Lessons</a></li>
<li><a href="./help.html" title="Help">Help</a></li>
</ul>
</div>
<!-- End navigation list -->
#+END_HTML
In the CSS file for the page, I had the following code to style the list:
/* Navigation List Styles Begin */
div #nav {
position: absolute;
left: 10px;
top: 5em;
}
#nav ul {
margin: 3px 10px 10px 5px;
list-style: none outside none;
padding: 0px 0px 0px 0px;
}
#nav ul li {
margin-right: 4px;
margin-bottom: 5px;
float: left;
margin-top: 20px;
}
#nav a {
color: white;
background-color: navy;
padding: 5px;
text-decoration: none;
font-weight: bold;
border: 5px solid blue;
border-radius: 10px;
}
/* Navigation List Styles End */
It is easy to place the table of contents generated by Org wherever you
want it using CSS. Here is to CSS code I used to style the table of
contents. This code is sloppy.
#table-of-contents {
font-size: small;
position: fixed;
right: 1em;
top: 0.5em;
background-image: url(./styleimages/toc-back.jpg);
border-radius: 10px;
height: 5em;
max-height: 15%;
width: 18em;
overflow: auto;
z-index: 1;
border: 5px solid seagreen;
}
#table-of-contents h2 {
font-size: medium;
color: springgreen;
font-style: oblique;
text-align: center;
margin-right: 15px;*/
margin-top: 5px;
margin-bottom: 5px;
border-bottom: 0px solid silver;
padding-top: 0px;
padding-left: 0px;
margin-left: 0px;
margin-right: 0px;
}
#table-of-contents ul {
color: aqua;
list-style-type: disc;
float: none;
margin-left: 0px;
margin-bottom: 0px;
}
#table-of-contents li {
margin-bottom: 0px;
}
#table-of-contents a {
color: white;
font-weight: bold;
}
#table-of-contents #text-table-of-contents {
display: block;
text-align: left;
padding-left: 0px;
padding-right: 0px;
margin-left: 10px;
margin-right: 5px;
margin-bottom: 10px;
}