From mboxrd@z Thu Jan  1 00:00:00 1970
From: Scott Randby <srandby@gmail.com>
Subject: Re: Tuning the layout of published html
Date: Tue, 19 Jul 2016 10:07:20 -0400
Message-ID: <578E3418.7050005@gmail.com>
References: <87poq9dbax.fsf@iki.fi>
Mime-Version: 1.0
Content-Type: text/plain; charset=utf-8; format=flowed
Content-Transfer-Encoding: 7bit
Return-path: <emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org>
Received: from eggs.gnu.org ([2001:4830:134:3::10]:36209)
	by lists.gnu.org with esmtp (Exim 4.71)
	(envelope-from <srandby@gmail.com>) id 1bPVgH-0007XN-HH
	for emacs-orgmode@gnu.org; Tue, 19 Jul 2016 10:07:30 -0400
Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71)
	(envelope-from <srandby@gmail.com>) id 1bPVgC-0005Z6-DH
	for emacs-orgmode@gnu.org; Tue, 19 Jul 2016 10:07:28 -0400
Received: from mail-it0-x235.google.com ([2607:f8b0:4001:c0b::235]:38120)
	by eggs.gnu.org with esmtp (Exim 4.71)
	(envelope-from <srandby@gmail.com>) id 1bPVgC-0005Z0-61
	for emacs-orgmode@gnu.org; Tue, 19 Jul 2016 10:07:24 -0400
Received: by mail-it0-x235.google.com with SMTP id j124so20903847ith.1
	for <emacs-orgmode@gnu.org>; Tue, 19 Jul 2016 07:07:23 -0700 (PDT)
Received: from [192.168.1.110] (cpe-65-185-74-118.neo.res.rr.com.
	[65.185.74.118])
	by smtp.gmail.com with ESMTPSA id 9sm2317822ior.27.2016.07.19.07.07.21
	for <emacs-orgmode@gnu.org>
	(version=TLS1_2 cipher=ECDHE-RSA-AES128-GCM-SHA256 bits=128/128);
	Tue, 19 Jul 2016 07:07:22 -0700 (PDT)
In-Reply-To: <87poq9dbax.fsf@iki.fi>
List-Id: "General discussions about Org-mode." <emacs-orgmode.gnu.org>
List-Unsubscribe: <https://lists.gnu.org/mailman/options/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=unsubscribe>
List-Archive: <http://lists.gnu.org/archive/html/emacs-orgmode/>
List-Post: <mailto:emacs-orgmode@gnu.org>
List-Help: <mailto:emacs-orgmode-request@gnu.org?subject=help>
List-Subscribe: <https://lists.gnu.org/mailman/listinfo/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=subscribe>
Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
Sender: "Emacs-orgmode"
	<emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org>
To: emacs-orgmode@gnu.org

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