:customcss: attribute for easy per-presentation CSS

README.adoc

@@ -258,6 +258,28 @@ Detailed view diagram
 ----
 
 
+=== CSS override
+
+If you use the `:customcss:` document attribute, a CSS file of the name given in the attribute is added to the list of CSS resources loaded by the rendered HTML.
+Doing so, you can then easily override specific elements of your theme per presentation.
+
+For example, to do proper position-independent text placement of a title slide with a specific background you can use:
+
+----
+.reveal section.title h1 {
+    margin-top: 2.3em;
+}
+
+.reveal section.title small {
+    margin-top: 15.3em;
+    font-weight: bold;
+    color: white;
+}
+----
+
+If the `:customcss:` attribute value is empty then `asciidoctor-revealjs.css` is the CSS resource that the presentation is linked to.
+
+
 == About Jade Templates
 
 `/templates/jade` directory contains jade template files they are ported from `/templates/slim` templates. These templates were written to support reveal.js backend for Asciidoctor.js environment that is currently using in https://github.com/asciidocfx/AsciidocFX[AsciidocFX] editor. You can look at the https://github.com/asciidocfx/asciidoctor.js-reveal-demo[demo].

templates/slim/document.html.slim

@@ -65,6 +65,8 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
       document.write( '<link rel="stylesheet" href="#{revealjsdir}/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
     - unless (docinfo_content = docinfo :header, '.html').empty?
       =docinfo_content
+    - if attr? :customcss
+      link rel='stylesheet' href=((customcss = attr :customcss).empty? ? 'asciidoctor-revealjs.css' : customcss)
   body
     .reveal
       / Any section element inside of this container is displayed as a slide

test/customcss.adoc

@@ -0,0 +1,5 @@
+= Custom CSS
+Author
+:customcss: customcss.css
+
+== Slide 1

test/customcss.css

@@ -0,0 +1,8 @@
+.reveal section h1 {
+    font-family: cursive;
+}
+
+.reveal section small {
+    margin-top: 15.3em;
+    font-family: fantasy;
+}