Re: Tuning the layout of published html

[Robert Klein <roklein@roklein.de>]

Hi,
Jarmo Hurri <jarmo.hurri@iki.fi> 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?

You can use the preamble and postamble features for this.

You'd have to edit the navigation bar manually, though.

Example preamble (file: html/preamble.html):
--- snip ---
<!-- I'm the html/preamble.html file -->
  <p class="alignleft"><a href="index.html">Home</a></p>
  <p class="alignright"><a href="imprint.html">Imprint</a></p>
</div> <!--  force closing of org-supplied preamble-div --> 
<div class="colmask leftmenu">
  <div class="colleft"><!-- = outer nested divs -->
    <div class="col1wrap">
      <div class="col1">
        <!-- Column 1 start = main content -->
        <!-- h1 class="title">%t</h1 -->
        <div id="apreambletoclose"> <!-- fool preamble for the one
        closed above -->
--- snip ---

Example postamble file:
<!-- I'm the html/postamble.html file -->
</div> <!-- closing the postamble div I can't use, here -->

          <!-- Column 1 end -->
        </div><!-- / #col1 -->
      </div> <!-- / #col1wrap -->
      <div class="col2">
        <!-- Column 2 start = left/running sidebar -->
        <p><strong>Contents</strong></p>
        <ul class="navmain">
          <li><a href="index.html">main page</a></li>
          <li class="nolink"><strong>Heading</strong></li>
          <li><a href="impressum.html">imprint</a></li>
        </ul> -->
        <!-- Column 2 end -->
      </div><!-- / #col2 -->
      
      
      <!-- end outer nested divs -->
    </div><!-- / #colleft -->
  </div><!-- / #colmask -->
<div class="footer">
  <p>&copy; 2012&ndash;2015 Robert Klein</p>
</div>
<div id="apostambletoclose"> <!-- fool postamble for the one closed
above -->
--- snip ---


Preamble and postamble functiond in .emacs:
--- snip ---
;; pre- and postamble for html export
(defun my-preamble (options)
  (with-temp-buffer
    (insert-file-contents "~/projects/myprj/html/preamble.html")
(buffer-string)))

(defun xyzzys-postamble (options)
  (with-temp-buffer
    (insert-file-contents "~/projects/myprj/html/postamble.html")
    (buffer-string)))
--- snip ---

project-alist excerpt(in .emacs, too):
--- snip ---
(add-to-list 'org-publish-project-alist
             '("myprj-html"
               :base-directory "~/projects/myprj"
               :base-extension "org"
               :publishing-directory "~/public_html/myprj"
               :publishing-function org-html-publish-to-html
               :html-head "<link rel=\"stylesheet\" type=\"text/css\"
href=\"css/myprj.css\" />" :html-head-include-default-style nil
               :html-head-include-scripts nil
               :html-preamble my-preamble
               :html-postamble my-postamble
--- snip ---


A lot depends on the CSS.  I'm dumping one here, not a very good one...

---snip---
/* 
  a lot of stuff is from Matthew James Taylor's ultimate 2 column
  left menu layout.
  */

body {
    margin: 0 auto;
    padding: 0; /* 0 5em 0; */
    /* padding for the footer is in colmask */
    /* border: 0; */
    width: 100%;
    /* max-width: 40em; */
    /* line-height: 1.4; */
    /* background: #fff; */
    background: #fffaf0; /* floralwhite */ /* whitesmoke; #f5f5f5 */
    font-size:100%;
    color: #000;
    text-align: justify;
    /* font-family: "Linux Libertine", Georgia, serif; */
    font-family: wfSourceSansPro, serif;
    display: block;
}

code {
    font-family: wfSourceCodePro, monospace;
    font-size: 90%;
}


/* if i use a breadcrumb again */
#breadcrumb {
    float:left;
    width:100%;
    padding:.1em 0 ;
    margin:0;
    background-color: #eee;
    font-size: small;
/* border-bottom: 4px solid #75A838; */
}
#breadcrumb p {
    padding:0;
    margin:0;
}

#preamble {
    clear: both;    /* nothing to the left or right of the header */
    float: none;    /* essentially the same */
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: mintcream;
    font-size: small;
    border-bottom:1px solid gainsboro; /* #7ca6a6; */ /* solid #000; */
    /* Fixed header at the top of the screen. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    height: 1.5em;
    /* letter-spacing: 0.1em; */
    /* background: none repeat scroll 0 0; */
/*    border-bottom: 1px dotted #7ca6a6; */
}


#preamble p {
    margin:0;
    padding: .2em 1em .2em 1em;
    /* space above text and below letters g and y. */
}

.alignright { float: right; }
.alignleft { float: left; }

/* Here begins Matthew James Taylor's 2 ultimate 2 column layout.  I
   removed anything left over from the other layouts as well as stuff
   which would allow me to reuse the components (that is, I can use
   only one liquid layer per page) */


/* column container */
/* I use only colmask instead of colmask and leftmenu. Doesn't make
   a difference if I use only this 2-column layout */
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
    /* background color for the fixed (navigation) column.  Note: this
       also requires the color for the main column to be set in
       .colleft, so the main column doesn't get the background of the
       this column. */
    background-color: OldLace; /*linen; /* whitesmoke */
    padding-top: 1.5em; /* padding for the header/preamble */
    padding-bottom: 1.5em; /* padding for the footer */
}

.colleft {
    float: left;
    width:200%;
    position:relative;
    left: 2em;
    background-color: #fffaf0; /* floralwhite */
    border-left: 1px dotted silver; /* for roklein */
}

.col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:12em;
    padding-bottom:1em;
}

/* #content is col1 of Matthew James Taylor's ultimate 2 column left
   menu layout. */

#content {
    margin:0 1em 1em 13em;  /* bottom 1 em is for the fixed footer */
    position:relative;
    right:100%;
    overflow:hidden;
}
.col2 {
    float:left;
    width:1em;
    position:relative;
    right:2em;
}

/* end of Matthew Taylors layout */


.header {
    clear:both;
    float:left;
    width:100%;
    margin:0;
    background-color: #eee;
    font-size: small;
    border-top:1px solid gainsboro; /* #7ca6a6; */  /* solid #000; */
    /* Fixed footer at the bottom of the screen. */
    position: fixed;
    top: 0px;
}

/* #postamble nicht verwenden!!! */

.footer {
        clear:both;
    float:left;
    width:100%;
    margin:0;
    background-color: mintcream;
    font-size: small;
    border-top:1px solid gainsboro; /* #7ca6a6;*/  /* solid #000; */
    /* Fixed footer at the bottom of the screen. */
    position: fixed;
    bottom: 0px;
}

.footer p {
    margin:0;
    padding: .2em 1em .2em 1em;
    /* space above text and below letters g and y. */
}


/* navigation using lists. */
ul.navmain {
    list-style: none;
    padding-left: 0;
}
ul.nav {
    list-style: none;
    padding-left: 0;
}
ul.navmain > li {
    background:  url('../imgs/red_arrow.gif') 0 0 no-repeat;
    list-style: none;
    padding: 0 0 0 15px;
}
ul.nav > li {
    background:  url('../imgs/red_arrow.gif') 0 0 no-repeat;
    list-style: none;
    padding: 0 0 0 15px;
}
ul.navmain > li.nolink {
    background: none;
    list-style: none;
    padding: .7em 0 .3em 0;
}
ul.nav > li.nolink {
    background: none;
    list-style: none;
    padding: .5em 0 .2em 0; /* 15; */
}
ul.navmain > li.submenu {
        background: none;
        list-style: none;
        padding: 0.2em 0 0.2em 15px;
}
ul.navinner {
    padding-left: 1em;
    /* background-color: yellow; */
    list-style: disc inside url('../imgs/red_arrow.gif');
}
/* end of navigation */



/* standard markup for headers and paragraphs */
#content > h1 {  /* former h1.title */
    text-align: center;
/*    font-size: large; */
    font-weight: bold;
    padding: .75em 1em;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: wfSourceSansPro;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #eee; /* underline headline */
}

#content h2 {
    font-size: 110%;
    font-style: bold;
}

#content h4 {
    font-size: 100%;
    font-style: bold;
}
/* end of standard markup */


/* org-mode coloring.  I included the org-info.js stuff, even if I
   don't use it. */

.title  { text-align: center; }
.todo   { color: red; }
.done   { color: green; }
.tag    { background-color: #add8e6; font-weight:normal }
.target { }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.right  {margin-left:auto; margin-right:0px;  text-align:right;}
.left   {margin-left:0px;  margin-right:auto; text-align:left;}
.center {margin-left:auto; margin-right:auto; text-align:center;}
p.verse { margin-left: 3% }
pre {
    border: 1pt solid #AEBDCC;
    background-color: cornsilk; /*#fdf5e6; /* OldLace */
    font-family: wfSoureCodePro, monospace;
    font-size: 80%;
    overflow:auto;
    margin:0.5em 1em 0.5em auto;
    padding:1em;

}

/* pre.src { background-color:#E8E8E8;
        border:1px inset;
        color:#4d3e32;
        font-family: "monospace";
        font-size: 100%;
        line-height:1.5;
    margin:0.5em 1em 0.5em auto; 
        max-height:700px;
        overflow:auto;
        padding:1em;} */
table { border-collapse: collapse; }
td, th { vertical-align: top; padding-right: 0.75em; padding-left:
0.75em; } th.right  { text-align:center;  }
th.left   { text-align:center;   }
th.center { text-align:center; }
td.right  { text-align:right;  }
td.left   { text-align:left;   }
td.center { text-align:center; }
dt { font-weight: bold; }
div.figure { padding: 0.5em; }
div.figure p { text-align: center; }
div.inlinetask {
    padding:10px;
    border:2px solid gray;
    margin:10px;
    background: #ffffcc;
}

table.grid {
    border: 1px black solid;
}
table.grid  td {
    padding: 0.25em;
    border: 1px gray solid;
}

table.grid  th {
    padding: 0.25em;
    border: 1px gray solid;
}

textarea { overflow-x: auto; }
/* .linenr { font-size:smaller } */
.code-highlighted {background-color:#ffff00;}
.org-info-js_info-navigation { border-style:none; }
#org-info-js_console-label { font-size:10px; font-weight:bold;
                             white-space:nowrap; }
.org-info-js_search-highlight {background-color:#ffff00; color:#000000;
                               font-weight:bold; }
/* end of org-mode coloring */

--- snip ---


Does this help a bit?

Best regards
Robert