how to tell org-mode to embed my css file on HTML export?

I faced this problem recently and none of the suggestions/answers worked for me. I finally found a solution in this link, which is to write your own function as follows and put it in you .emacs or init.el file.

(defun my-org-inline-css-hook (exporter)
  "Insert custom inline css"
  (when (eq exporter 'html)
    (let* ((dir (ignore-errors (file-name-directory (buffer-file-name))))
           (path (concat dir "style.css"))
           (homestyle (or (null dir) (null (file-exists-p path))))
           (final (if homestyle "~/.emacs.d/org-style.css" path))) ;; <- set your own style file path
      (setq org-html-head-include-default-style nil)
      (setq org-html-head (concat
                           "<style type=\"text/css\">\n"
                           "<!--/*--><![CDATA[/*><!--*/\n"
                           (with-temp-buffer
                             (insert-file-contents final)
                             (buffer-string))
                           "/*]]>*/-->\n"
                           "</style>\n")))))

(add-hook 'org-export-before-processing-hook 'my-org-inline-css-hook)

There is another solution for that.

In your org file, you can use #+SETUPFILE: file, that enables additional in-buffer settings:

#+SETUPFILE: style.css.org

And in the file style.css.org, you can have:

#+OPTIONS: org-html-head-include-default-style:nil

#+HTML_HEAD: <style type="text/css">
#+HTML_HEAD:   ...your CSS here...
#+HTML_HEAD: </style>

The content of style.css.org is:

  • org-html-head-include-default-style:nil tells to not use the default style.
  • ...your CSS here... is to be replaced by your CSS code. Every line must be prefixed with #+HTML_HEAD:.

The advantage of this solution is that you can have a style.css.org per file. I personally use the trick to have one style.css.org per directory of org files.

Credit goes to Paul Provost.

Note that single line CSS is much more performance efficient here than multiple lines CSS.


Try:

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style1.css" />
#+HTML_HEAD_EXTRA: <link rel="alternate stylesheet" type="text/css" href="style2.css" />

Also take reference from: http://orgmode.org/manual/CSS-support.html


I'm not sure if you found a better way but you can do this by just putting your CSS directly into the org-export-html-style variable, wrapping it like this: 

<style type=\"text/css\">\n <!--/*--><![CDATA[/*><!--*/\n **YOUR CSS HERE** \n  /*]]>*  /-->\\n  >/*]]>*/-->\n</style>n</style>

Take a look at org-export-html-style-default for an example.

I would also prefer to be able to specify a file in org-export-html-file and have org mode read the file and embed it, but, this way works.

Tags:

Css

Emacs

Org Mode

Recent Posts