[Top][All Lists]

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [O] Tuning the layout of published html

From: Scott Randby
Subject: Re: [O] Tuning the layout of published html
Date: Tue, 19 Jul 2016 10:07:20 -0400
User-agent: Mozilla/5.0 (X11; Linux x86_64; rv:38.0) Gecko/20100101 Thunderbird/38.8.0

On 07/19/2016 09:09 AM, Jarmo Hurri wrote:


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?


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:


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 navigation list -->
<div id="nav">
    <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>
<!-- End navigation list -->

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;

reply via email to

[Prev in Thread] Current Thread [Next in Thread]