From: Robert Klein <roklein@roklein.de>
To: Jarmo Hurri <jarmo.hurri@iki.fi>
Cc: emacs-orgmode@gnu.org
Subject: Re: Tuning the layout of published html
Date: Tue, 19 Jul 2016 15:59:00 +0200 [thread overview]
Message-ID: <20160719155900.6c326ea4@pckr186.mpip-mainz.mpg.de> (raw)
In-Reply-To: <87poq9dbax.fsf@iki.fi>
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>© 2012–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
next prev parent reply other threads:[~2016-07-19 13:59 UTC|newest]
Thread overview: 18+ messages / expand[flat|nested] mbox.gz Atom feed top
2016-07-19 13:09 Tuning the layout of published html Jarmo Hurri
2016-07-19 13:30 ` Christian Moe
2016-07-19 14:27 ` Jarmo Hurri
2016-07-19 15:49 ` Scott Randby
2016-07-19 18:08 ` Christian Moe
2016-07-22 7:19 ` Jarmo Hurri
2016-07-19 13:59 ` Robert Klein [this message]
2016-07-19 14:28 ` Jarmo Hurri
2016-07-19 14:39 ` Robert Klein
2016-07-19 17:27 ` Scott Randby
2016-07-19 18:33 ` Eric Abrahamsen
2016-07-22 7:17 ` Jarmo Hurri
2016-07-22 12:21 ` Eric Abrahamsen
2016-07-19 14:07 ` Scott Randby
2016-07-19 14:26 ` Marcin Borkowski
[not found] <d8104ff6e802459f95c95f82c799c646@DB5PR01MB1895.eurprd01.prod.exchangelabs.com>
2016-07-19 13:35 ` Eric S Fraga
2016-07-19 13:48 ` Josiah Schwab
2016-07-19 14:35 ` Jarmo Hurri
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20160719155900.6c326ea4@pckr186.mpip-mainz.mpg.de \
--to=roklein@roklein.de \
--cc=emacs-orgmode@gnu.org \
--cc=jarmo.hurri@iki.fi \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
Code repositories for project(s) associated with this external index
https://git.savannah.gnu.org/cgit/emacs.git
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.