If I have the following org file:
#+TITLE: Foo & Bar
This is all about foo and bar.
* Foo
...
* Bar
...
when I org-publish to html, I'll get something like the following in the content section:
...
<div id="content">
<h1 class="title">Foo & Bar</h1>
<p>This is all about foo and bar.</p>
<div id="outline-container-orgXXXXXXX" class="outline-2">
<h2>Foo</h2>
<p>...</p>
</div>
<div id="outline-container-orgXXXXXXX" class="outline-2">
<h2>Foo</h2>
<p>...</p>
</div>
</div>
...
I'd like
<h1 class="title">Foo & Bar</h1>
<p>This is all about foo and bar.</p>
i.e. the page title and all content before the first org headline, to also be wrapped in their own div (or similar containing element) within the main div, so that I can target this container specifically with css.
In summary, I would like the following output:
...
<div id="content">
<div class="pre-headlines">
<h1 class="title">Foo & Bar</h1>
<p>This is all about foo and bar.</p>
</div>
<div id="outline-container-orgXXXXXXX" class="outline-2">
<h2>Foo</h2>
<p>...</p>
</div>
<div id="outline-container-orgXXXXXXX" class="outline-2">
<h2>Foo</h2>
<p>...</p>
</div>
</div>
...
How would I go about that?
org-html-templatedoes not provide any kind of customization that could be used for your purpose, so you'd either have to modify it (which is always problematic) or convince the developers to change it (which imight be no less problematic) or resort to a solution like filters - maybe.