Re: [O] Tuning the layout of published html
Jarmo Hurri writes: > Eric Abrahamsen writes: > >> Robert Klein writes: >> >>> 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 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.
Re: [O] Tuning the layout of published html
Christian Moe 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 (). 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
Re: [O] Tuning the layout of published html
Eric Abrahamsen writes: > Robert Klein writes: > >> 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 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
Re: [O] Tuning the layout of published html
Robert Klein writes: > Hi, > 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? > > 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...
Re: [O] Tuning the layout of published html
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 (). 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
Re: [O] Tuning the layout of published html
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
Re: [O] Tuning the layout of published html
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: Scott
Re: [O] Tuning the layout of published html
Hi, Jarmo Hurri wrote: > > Robert Klein 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
Re: [O] Tuning the layout of published html
Eric S Fraga 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
Re: [O] Tuning the layout of published html
Robert Klein 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
Re: [O] Tuning the layout of published html
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
Re: [O] Tuning the layout of published html
On 2016-07-19, at 15:09, 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? 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
Re: [O] Tuning the layout of published html
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 Home Lessons Help #+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; }
Re: [O] Tuning the layout of published html
Hi, 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? 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 --- Home Imprint --- snip --- Example postamble file: Contents main page Heading imprint --> © 2012–2015 Robert Klein --- 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 "" :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 dotte
Re: [O] Tuning the layout of published html
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
Re: [O] Tuning the layout of published html
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
Re: [O] Tuning the layout of published html
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
[O] Tuning the layout of published html
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