Re: Tuning the layout of published html

[Scott Randby <srandby@gmail.com>]

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;
}