From: Scott Randby <srandby@gmail.com>
To: emacs-orgmode@gnu.org
Subject: Re: Tuning the layout of published html
Date: Tue, 19 Jul 2016 10:07:20 -0400 [thread overview]
Message-ID: <578E3418.7050005@gmail.com> (raw)
In-Reply-To: <87poq9dbax.fsf@iki.fi>
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;
}
next prev parent reply other threads:[~2016-07-19 14:07 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
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 [this message]
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
List information: https://www.orgmode.org/
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=578E3418.7050005@gmail.com \
--to=srandby@gmail.com \
--cc=emacs-orgmode@gnu.org \
/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 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).