* Tuning the layout of published html
@ 2016-07-19 13:09 Jarmo Hurri
2016-07-19 13:30 ` Christian Moe
` (3 more replies)
0 siblings, 4 replies; 18+ messages in thread
From: Jarmo Hurri @ 2016-07-19 13:09 UTC (permalink / raw)
To: emacs-orgmode
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
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:09 Jarmo Hurri
@ 2016-07-19 13:30 ` Christian Moe
2016-07-19 14:27 ` Jarmo Hurri
2016-07-19 13:59 ` Robert Klein
` (2 subsequent siblings)
3 siblings, 1 reply; 18+ messages in thread
From: Christian Moe @ 2016-07-19 13:30 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode
Hi,
No need for derived backends.
You could just add both the title bar and the navigation bar in the HTML
preamble to each page, and position the different parts as needed with
CSS.
If you're using Org's publishing function, define a :html-preamble in
org-publish-project-alist.
Yours,
Christian
Jarmo Hurri writes:
> 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
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
[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
0 siblings, 2 replies; 18+ messages in thread
From: Eric S Fraga @ 2016-07-19 13:35 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode@gnu.org
On Tuesday, 19 Jul 2016 at 13:09, Jarmo Hurri wrote:
> 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.
You are probably looking for cascading style sheets (CSS) for the
HTML. org's HTML export already tags everything of note so you may
be able to achieve what you want with careful style choices.
You might like to look at the example web pages at
http://orgmode.org/worg/org-web.html
--
: Eric S Fraga (0xFFFCF67D), Emacs 25.0.94.1, Org release_8.3.4-1049-g481709
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:35 ` Tuning the layout of published html Eric S Fraga
@ 2016-07-19 13:48 ` Josiah Schwab
2016-07-19 14:35 ` Jarmo Hurri
1 sibling, 0 replies; 18+ messages in thread
From: Josiah Schwab @ 2016-07-19 13:48 UTC (permalink / raw)
To: emacs-orgmode@gnu.org; +Cc: Jarmo Hurri
On 19 July 2016 at 13:35 GMT, Eric S Fraga wrote:
> On Tuesday, 19 Jul 2016 at 13:09, Jarmo Hurri wrote:
>> 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.
>
> You are probably looking for cascading style sheets (CSS) for the
> HTML. org's HTML export already tags everything of note so you may
> be able to achieve what you want with careful style choices.
I agree with Eric (and now Christian) that is the way to go.
Personally, I have enjoyed using the styles in Fabrice Niessen's
org-html-themes, especially
https://github.com/fniessen/org-html-themes#readtheorg
It already has some similarities to the layout you describe.
Hope that helps,
Josiah
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:09 Jarmo Hurri
2016-07-19 13:30 ` Christian Moe
@ 2016-07-19 13:59 ` Robert Klein
2016-07-19 14:28 ` Jarmo Hurri
` (2 more replies)
2016-07-19 14:07 ` Scott Randby
2016-07-19 14:26 ` Marcin Borkowski
3 siblings, 3 replies; 18+ messages in thread
From: Robert Klein @ 2016-07-19 13:59 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode
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
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:09 Jarmo Hurri
2016-07-19 13:30 ` Christian Moe
2016-07-19 13:59 ` Robert Klein
@ 2016-07-19 14:07 ` Scott Randby
2016-07-19 14:26 ` Marcin Borkowski
3 siblings, 0 replies; 18+ messages in thread
From: Scott Randby @ 2016-07-19 14:07 UTC (permalink / raw)
To: emacs-orgmode
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;
}
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:09 Jarmo Hurri
` (2 preceding siblings ...)
2016-07-19 14:07 ` Scott Randby
@ 2016-07-19 14:26 ` Marcin Borkowski
3 siblings, 0 replies; 18+ messages in thread
From: Marcin Borkowski @ 2016-07-19 14:26 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode
On 2016-07-19, at 15:09, Jarmo Hurri <jarmo.hurri@iki.fi> 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?
I don't know about other ways, but a derived backend /can/ be really
simple -- you might as well use the "derived backend" feature to modify
just the page template. You'd probably have to look at the
`org-html-template' function and write your version of it.
> Jarmo
Best,
--
Marcin Borkowski
http://octd.wmi.amu.edu.pl/en/Marcin_Borkowski
Faculty of Mathematics and Computer Science
Adam Mickiewicz University
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
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
0 siblings, 2 replies; 18+ messages in thread
From: Jarmo Hurri @ 2016-07-19 14:27 UTC (permalink / raw)
To: emacs-orgmode
Greetings.
> No need for derived backends.
>
> You could just add both the title bar and the navigation bar in the
> HTML preamble to each page,
Can do that.
> and position the different parts as needed with CSS.
This is where I don't know what exactly is going to happen. Org writes
quite a bit of CSS in each exported HTML file. If I add in, say, a
vertical navigation bar, how am I going to control its placement with
respect to everything else that is already in the CSS?
I can start my trial and error -period...
Thanks!
Jarmo
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:59 ` Robert Klein
@ 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
2 siblings, 1 reply; 18+ messages in thread
From: Jarmo Hurri @ 2016-07-19 14:28 UTC (permalink / raw)
To: emacs-orgmode
Robert Klein <roklein@roklein.de> writes:
> 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):
> ...
> Does this help a bit?
Yes it does, but it is impossible for me to tell which parts of these
files are really necessary to achieve the desired result. But I will
start experimenting.
Thanks!
Jarmo
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:35 ` Tuning the layout of published html Eric S Fraga
2016-07-19 13:48 ` Josiah Schwab
@ 2016-07-19 14:35 ` Jarmo Hurri
1 sibling, 0 replies; 18+ messages in thread
From: Jarmo Hurri @ 2016-07-19 14:35 UTC (permalink / raw)
To: emacs-orgmode
Eric S Fraga <e.fraga@ucl.ac.uk> writes:
> On Tuesday, 19 Jul 2016 at 13:09, Jarmo Hurri wrote:
>> 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.
>
> You are probably looking for cascading style sheets (CSS) for the
> HTML. org's HTML export already tags everything of note so you may
> be able to achieve what you want with careful style choices.
I guess "careful" is the operative word here. Unfortunately I feel like
I am inserting new stuff into ready-to-eat spaghetti. ;-)
> You might like to look at the example web pages at
>
> http://orgmode.org/worg/org-web.html
I took a look at some of those. The unfortunate thing is that most of
them are not accompanied by source code.
All the best,
Jarmo
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 14:28 ` Jarmo Hurri
@ 2016-07-19 14:39 ` Robert Klein
0 siblings, 0 replies; 18+ messages in thread
From: Robert Klein @ 2016-07-19 14:39 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode
Hi,
Jarmo Hurri <jarmo.hurri@iki.fi> wrote:
>
> Robert Klein <roklein@roklein.de> writes:
>
> > 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):
> > ...
> > Does this help a bit?
>
> Yes it does, but it is impossible for me to tell which parts of these
> files are really necessary to achieve the desired result. But I will
> start experimenting.
I'll try to put together something more cohesive...
Best regards
Robert
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 14:27 ` Jarmo Hurri
@ 2016-07-19 15:49 ` Scott Randby
2016-07-19 18:08 ` Christian Moe
1 sibling, 0 replies; 18+ messages in thread
From: Scott Randby @ 2016-07-19 15:49 UTC (permalink / raw)
To: emacs-orgmode
On 07/19/2016 10:27 AM, Jarmo Hurri wrote:
>
> This is where I don't know what exactly is going to happen. Org writes
> quite a bit of CSS in each exported HTML file. If I add in, say, a
> vertical navigation bar, how am I going to control its placement with
> respect to everything else that is already in the CSS?
>
> I can start my trial and error -period...
If you put the following line in your Org file, then the exported HTML
will use only your CSS.
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style.css">
Scott
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:59 ` Robert Klein
2016-07-19 14:28 ` Jarmo Hurri
@ 2016-07-19 17:27 ` Scott Randby
2016-07-19 18:33 ` Eric Abrahamsen
2 siblings, 0 replies; 18+ messages in thread
From: Scott Randby @ 2016-07-19 17:27 UTC (permalink / raw)
To: emacs-orgmode
On 07/19/2016 09:59 AM, Robert Klein wrote:
> You can use the preamble and postamble features for this.
This solves a problem that has been bugging me for some time. All I need
to do is use the preamble to solve my problem. Why didn't I think of
that sooner?
Scott Randby
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
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
1 sibling, 1 reply; 18+ messages in thread
From: Christian Moe @ 2016-07-19 18:08 UTC (permalink / raw)
To: Jarmo Hurri; +Cc: emacs-orgmode
Jarmo Hurri writes:
>> and position the different parts as needed with CSS.
>
> This is where I don't know what exactly is going to happen. Org writes
> quite a bit of CSS in each exported HTML file. If I add in, say, a
> vertical navigation bar, how am I going to control its placement with
> respect to everything else that is already in the CSS?
Say you put the navbar at the end of the HTML preamble and give it a
#navbar id (<div id="navbar">). Org already gives the main content a
#content id. Then this should be all the CSS you need to get started:
#navbar { float: left;
...loads more CSS here...
}
#content { float: left;
...and more CSS here...
}
Yours,
Christian
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 13:59 ` Robert Klein
2016-07-19 14:28 ` Jarmo Hurri
2016-07-19 17:27 ` Scott Randby
@ 2016-07-19 18:33 ` Eric Abrahamsen
2016-07-22 7:17 ` Jarmo Hurri
2 siblings, 1 reply; 18+ messages in thread
From: Eric Abrahamsen @ 2016-07-19 18:33 UTC (permalink / raw)
To: emacs-orgmode
Robert Klein <roklein@roklein.de> writes:
> 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.
[...]
> A lot depends on the CSS. I'm dumping one here, not a very good one...
FWIW, this seems like a perfect place to use flexboxes, where the actual
location of the elements in the document matters a bit less...
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 18:33 ` Eric Abrahamsen
@ 2016-07-22 7:17 ` Jarmo Hurri
2016-07-22 12:21 ` Eric Abrahamsen
0 siblings, 1 reply; 18+ messages in thread
From: Jarmo Hurri @ 2016-07-22 7:17 UTC (permalink / raw)
To: emacs-orgmode
Eric Abrahamsen <eric@ericabrahamsen.net> writes:
> Robert Klein <roklein@roklein.de> writes:
>
>> Jarmo Hurri <jarmo.hurri@iki.fi> wrote:
>>
>>> 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.
>>
>> You can use the preamble and postamble features for this.
>
> [...]
>
>> A lot depends on the CSS. I'm dumping one here, not a very good one...
>
> FWIW, this seems like a perfect place to use flexboxes, where the actual
> location of the elements in the document matters a bit less...
A quick search on flexboxes looks promising indeed. I guess it would be
possible to open a flexbox div in preamble and close it in
postamble. Or maybe I can make the body of the page a flexbox in the
CSS?
Jarmo
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-19 18:08 ` Christian Moe
@ 2016-07-22 7:19 ` Jarmo Hurri
0 siblings, 0 replies; 18+ messages in thread
From: Jarmo Hurri @ 2016-07-22 7:19 UTC (permalink / raw)
To: emacs-orgmode
Christian Moe <mail@christianmoe.com> writes:
> Jarmo Hurri writes:
>
>>> and position the different parts as needed with CSS.
>>
>> This is where I don't know what exactly is going to happen. Org writes
>> quite a bit of CSS in each exported HTML file. If I add in, say, a
>> vertical navigation bar, how am I going to control its placement with
>> respect to everything else that is already in the CSS?
>
> Say you put the navbar at the end of the HTML preamble and give it a
> #navbar id (<div id="navbar">). Org already gives the main content a
> #content id. Then this should be all the CSS you need to get started:
>
> #navbar { float: left;
> ...loads more CSS here...
> }
> #content { float: left;
> ...and more CSS here...
> }
Yes indeed, something like this seems to work.
For anyone embarking on a similar trip, a tight placement of the
horizontal title bar on top of the page requires, among other things,
something along the following lines in your CSS:
body
{
margin: 0;
}
All the best,
Jarmo
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: Tuning the layout of published html
2016-07-22 7:17 ` Jarmo Hurri
@ 2016-07-22 12:21 ` Eric Abrahamsen
0 siblings, 0 replies; 18+ messages in thread
From: Eric Abrahamsen @ 2016-07-22 12:21 UTC (permalink / raw)
To: emacs-orgmode
Jarmo Hurri <jarmo.hurri@iki.fi> writes:
> Eric Abrahamsen <eric@ericabrahamsen.net> writes:
>
>> Robert Klein <roklein@roklein.de> writes:
>>
>>> Jarmo Hurri <jarmo.hurri@iki.fi> wrote:
>>>
>>>> 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.
>>>
>>> You can use the preamble and postamble features for this.
>>
>> [...]
>>
>>> A lot depends on the CSS. I'm dumping one here, not a very good one...
>>
>> FWIW, this seems like a perfect place to use flexboxes, where the actual
>> location of the elements in the document matters a bit less...
>
> A quick search on flexboxes looks promising indeed. I guess it would be
> possible to open a flexbox div in preamble and close it in
> postamble. Or maybe I can make the body of the page a flexbox in the
> CSS?
Yep, it's all doable from CSS alone. So long as the elements you want to
align are siblings (and can be uniquely selected) that's all you need.
^ permalink raw reply [flat|nested] 18+ messages in thread
end of thread, other threads:[~2016-07-22 12:21 UTC | newest]
Thread overview: 18+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
[not found] <d8104ff6e802459f95c95f82c799c646@DB5PR01MB1895.eurprd01.prod.exchangelabs.com>
2016-07-19 13:35 ` Tuning the layout of published html Eric S Fraga
2016-07-19 13:48 ` Josiah Schwab
2016-07-19 14:35 ` Jarmo Hurri
2016-07-19 13:09 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
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
Code repositories for project(s) associated with this public inbox
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).