CSS and Publishing to HTML Tutorial

CSS and Publishing to HTML Tutorial

[Adam]

The Worg tutorial "Publishing Org-mode files to HTML" ran for me first
time, so it seems excellent and well written. 

However I am trying to use a vanilla CSS, say ssheet1.css, located in
~/org/css" as per the tutorial. 

With only the following line at the end of my org file, 
    
#+STYLE: <link rel="stylesheet" type="text/css"  href="../ssheet1.css" />

or even 

# STYLE: <link rel="stylesheet" type="text/css"  href="../ssheet1.css" />

doing a view source of the HTML published page, shows that it includes
the java stuff of org-export-html-style-export, shown below. I feel my 
defined CSS is being somehow compromised.  

I am hoping to tweek a CSS from the ground up, or choose a most
suitable one from elsewhere. The only other thing, is that I fear my
trial CGI Bash script is being clobbered by the Java, as its not working 
(its permission is OK). Maybe it needs to be enclosed within a 
unique style/type entry.

#+STYLE:  <!-- #exec cgi="/cgi-bin/count.sh" -->


Below, I hope not at the risk of a friendship, I include the settings
for; 
org-export-html-style
org-export-html-style-default
org-export-html-style-include-default
org-publish-project-alist

And these were noted after a successfuul org-publish operation. 


My question is, how should I unambiguously use a specific CSS, within
the context of the "Publishing Org-mode files to HTML" tutorial. And
whether including the CGI script is as simple as that above.

Sorry for my confusion, I cannot see how or where to remove the Java
stuff.  If its as simple as 13.3.1 of the Org Mode manual, or by modifying the 
*scratch* evaluations of the tutorial, then I do apologize.

Thanks,  best,  Adam.


;------------------------------------------------------

org-export-html-style 
""

org-export-html-style-default
"<style type=\"text/css\">
 <!--/*--><![CDATA[/*><!--*/
  html { font-family: Times, serif; font-size: 12pt; }
  .title  { text-align: center; }
  .todo   { color: red; }
  .done   { color: green; }
  .tag    { background-color:lightblue; font-weight:normal }
  .target { }
  .timestamp { color: grey }
  .timestamp-kwd { color: CadetBlue }
  p.verse { margin-left: 3% }
  pre {
	border: 1pt solid #AEBDCC;
	background-color: #F3F5F7;
	padding: 5pt;
	font-family: courier, monospace;
        font-size: 90%;
        overflow:auto;
  }
  table { border-collapse: collapse; }
  td, th { vertical-align: top; }
  dt { font-weight: bold; }
  div.figure { padding: 0.5em; }
  div.figure p { text-align: center; }
  .linenr { font-size:smaller }
  .code-highlighted {background-color:#ffff00;}
  .org-info-js_info-navigation { border-style:none; }
  #org-info-js_console-label { font-size:10px; font-weight:bold;
                               white-space:nowrap; }
  .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
                                 font-weight:bold; }
  /*]]>*/-->
</style>"

org-export-html-style-include-default
t


org-publish-project-alist

(("org-notes" :base-directory "C:\\Adamstuff\\webp\\org\\" :base-extension 
"org" :publishing-directory "C:\\Adamstuff\\webp\\public_html\\" :recursive 
t :publishing-function org-publish-org-to-html :headline-levels ...) 
("org-static" :base-directory "C:\\Adamstuff\\webp\\org\\" :base-extension 
"css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf" :publishing-directory 
"C:\\Adamstuff\\webp\\public_html\\" :recursive t :publishing-function 
org-publish-attachment) ("org" :components ("org-notes" "org-static")))

Re: CSS and Publishing to HTML Tutorial

[Sebastian Rose]

Hi Adam!


Adam <ahcnz@ihug.co.nz> writes:
> The Worg tutorial "Publishing Org-mode files to HTML" ran for me first
> time, so it seems excellent and well written.
>
> However I am trying to use a vanilla CSS, say ssheet1.css, located in
> ~/org/css" as per the tutorial.
>
> With only the following line at the end of my org file,
>
> #+STYLE: <link rel="stylesheet" type="text/css"  href="../ssheet1.css" />
>
> or even
>
> # STYLE: <link rel="stylesheet" type="text/css"  href="../ssheet1.css" />


To the END of your Org file ???

Those comments should live on the _TOP_ of your Org file. See
http://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.php#sec-5_1

    "The first choice is the export options template on top of the
    file..."


> doing a view source of the HTML published page, shows that it includes
> the java stuff of org-export-html-style-export, shown below. I feel my
> defined CSS is being somehow compromised.

_JavaScript_ has nothing to do with CSS.


> I am hoping to tweek a CSS from the ground up, or choose a most
> suitable one from elsewhere. The only other thing, is that I fear my
> trial CGI Bash script is being clobbered by the Java, as its not working
> (its permission is OK). Maybe it needs to be enclosed within a
> unique style/type entry.
>
> #+STYLE:  <!-- #exec cgi="/cgi-bin/count.sh" -->


Details missing, but again: the JavaScript has hardly something to do
with it.

The tutorial mentions this line:

   #+INFOJS_OPT: view:nil toc:t ltoc:t mouse:underline buttons:0 path:http://orgmode.org/org-info.js

Remove the line, and you'll get rid of the JavaScript.


To get rid of the default styles, customite the variable

   `org-export-html-style-include-default'




> Below, I hope not at the risk of a friendship, I include the settings
> for;
> org-export-html-style
> org-export-html-style-default
> org-export-html-style-include-default
> org-publish-project-alist
>
> And these were noted after a successfuul org-publish operation.
>
>
> My question is, how should I unambiguously use a specific CSS, within
> the context of the "Publishing Org-mode files to HTML" tutorial. And
> whether including the CGI script is as simple as that above.
>
> Sorry for my confusion, I cannot see how or where to remove the Java
> stuff.  If its as simple as 13.3.1 of the Org Mode manual, or by modifying the
> *scratch* evaluations of the tutorial, then I do apologize.
>
> Thanks,  best,  Adam.
>
>
> ;------------------------------------------------------
>
> org-export-html-style
> ""
>
> org-export-html-style-default
> "<style type=\"text/css\">
>  <!--/*--><![CDATA[/*><!--*/
>   html { font-family: Times, serif; font-size: 12pt; }
>   .title  { text-align: center; }
>   .todo   { color: red; }
>   .done   { color: green; }
>   .tag    { background-color:lightblue; font-weight:normal }
>   .target { }
>   .timestamp { color: grey }
>   .timestamp-kwd { color: CadetBlue }
>   p.verse { margin-left: 3% }
>   pre {
> 	border: 1pt solid #AEBDCC;
> 	background-color: #F3F5F7;
> 	padding: 5pt;
> 	font-family: courier, monospace;
>         font-size: 90%;
>         overflow:auto;
>   }
>   table { border-collapse: collapse; }
>   td, th { vertical-align: top; }
>   dt { font-weight: bold; }
>   div.figure { padding: 0.5em; }
>   div.figure p { text-align: center; }
>   .linenr { font-size:smaller }
>   .code-highlighted {background-color:#ffff00;}
>   .org-info-js_info-navigation { border-style:none; }
>   #org-info-js_console-label { font-size:10px; font-weight:bold;
>                                white-space:nowrap; }
>   .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
>                                  font-weight:bold; }
>   /*]]>*/-->
> </style>"
>
> org-export-html-style-include-default
> t
>
>
> org-publish-project-alist
>
> (("org-notes" :base-directory "C:\\Adamstuff\\webp\\org\\" :base-extension
> "org" :publishing-directory "C:\\Adamstuff\\webp\\public_html\\" :recursive
> t :publishing-function org-publish-org-to-html :headline-levels ...)
> ("org-static" :base-directory "C:\\Adamstuff\\webp\\org\\" :base-extension
> "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf" :publishing-directory
> "C:\\Adamstuff\\webp\\public_html\\" :recursive t :publishing-function
> org-publish-attachment) ("org" :components ("org-notes" "org-static")))



HTH

  Sebastian

Re: CSS and Publishing to HTML Tutorial

[Robert Klein]

Hi Adam,

On Thu, 08 Jul 2010 09:48:11 +0200, Adam <ahcnz@ihug.co.nz> wrote:

> #+STYLE: <link rel="stylesheet" type="text/css"  href="../ssheet1.css" />
>
> or even
>
> # STYLE: <link rel="stylesheet" type="text/css"  href="../ssheet1.css" />
>
> doing a view source of the HTML published page, shows that it includes
> the java stuff of org-export-html-style-export, shown below. I feel my
> defined CSS is being somehow compromised.
>


I also use a style of my own (and parts of the org-mode standard
style copied into my style sheet). To avoid the inclusion of the
org-mode style and javascript I put two additional settings into
the project lists /notes/ component:

    :style-include-default nil ; don't include org-modes style sheet
    :style-include-scripts nil ; don't include org-modes javascript

Additionally I put my style right behind those lines, but I don't
think it matters if it is there or in the org file:
    :style "<link rel=\"stylesheet\" href=\"example.css\"  
type=\"text/css\">"


For example, I put those tho lines into your quoted configuration:

> org-publish-project-alist
>
> (("org-notes" :base-directory "C:\\Adamstuff\\webp\\org\\"

    :style-include-default nil ; don't include org-modes style sheet
    :style-include-scripts nil ; don't include org-modes javascript

> :base-extension
> "org" :publishing-directory "C:\\Adamstuff\\webp\\public_html\\"  
> :recursive
> t :publishing-function org-publish-org-to-html :headline-levels ...)
> ("org-static" :base-directory "C:\\Adamstuff\\webp\\org\\"  
> :base-extension
> "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"  
> :publishing-directory
> "C:\\Adamstuff\\webp\\public_html\\" :recursive t :publishing-function
> org-publish-attachment) ("org" :components ("org-notes" "org-static")))
>

Best regards
Robert

Re: CSS and Publishing to HTML Tutorial

[Adam]

Thanks for reply, guidance and suggestions.
I agree my cgi has nothing to do with INFOJS_OPT, nor vice versa. 

Regarding CSS, I have gone back to the default position, of including 
these inside "org-notes" of org-publish-project-alist, and not referring 
to an external CSS, 

  :style-include-default   t
  :style-include-scripts  nil
(after Robert's comments). 

So I am hoping to use the default style output, and then adjust the style
in the org file header using  #+STYLE:  < ... > 

In the org file, I have used  org-insert-export-options-template   and have 
deleted the line #+INFO-JS_OPT: ...

I publish as per the tutorial, then open the HTML result in MS Internet 
Explorer, which reports in a yellow warning band across the top words to the 
effect of   "To help protect your security, IE has restricted ... Click here 
for options". 

If I then edit that HTML file, and remove the 2nd of the two <style> ... 
</style> blocks, then reloading the HTML form does not cause the yellow 
warning to be issued. The form also appears to retain its default style, of 
red color for the TODO etc. 

This 2nd style block appears immediately before the <body> content 
of the document.  At the very end of the Head, just before </head>.
It begins with, 
<script type="text/javascript">
  ... 
  function CodeHighlightOn(elim, id)   etc

Looking at  org-exp.el  around line 554,  it almost seems as if javascript 
is part of the default style. 


I'm sorry to be making such heavy weather of this. I'm after a vanilla 
HTML form, which doesn't trigger warnings, which I can tweek some 
few style aspects of, heading size, heading color, text size, fonts, 
I hope by using #+STYLE:  < ... >

Re: CSS and Publishing to HTML Tutorial

[Sebastian Rose]

Adam <ahcnz@ihug.co.nz> writes:
> Thanks for reply, guidance and suggestions.
> I agree my cgi has nothing to do with INFOJS_OPT, nor vice versa. 
>
> Regarding CSS, I have gone back to the default position, of including 
> these inside "org-notes" of org-publish-project-alist, and not referring 
> to an external CSS, 
>
>   :style-include-default   t
>   :style-include-scripts  nil
> (after Robert's comments). 
>
> So I am hoping to use the default style output, and then adjust the style
> in the org file header using  #+STYLE:  < ... > 
>
> In the org file, I have used  org-insert-export-options-template   and have 
> deleted the line #+INFO-JS_OPT: ...
>
> I publish as per the tutorial, then open the HTML result in MS Internet 
> Explorer, which reports in a yellow warning band across the top words to the 
> effect of   "To help protect your security, IE has restricted ... Click here 
> for options". 
>
> If I then edit that HTML file, and remove the 2nd of the two <style> ... 
> </style> blocks, then reloading the HTML form does not cause the yellow 
> warning to be issued. The form also appears to retain its default style, of 
> red color for the TODO etc. 
>
> This 2nd style block appears immediately before the <body> content 
> of the document.  At the very end of the Head, just before </head>.
> It begins with, 
> <script type="text/javascript">
>   ... 
>   function CodeHighlightOn(elim, id)   etc
>
> Looking at  org-exp.el  around line 554,  it almost seems as if javascript 
> is part of the default style. 
>
>
> I'm sorry to be making such heavy weather of this. I'm after a vanilla 
> HTML form, which doesn't trigger warnings, which I can tweek some 
> few style aspects of, heading size, heading color, text size, fonts, 
> I hope by using #+STYLE:  < ... >


Hahaaa, yes, now I recall this issue when I tried IE the last time (some
month ago, luckily).  IE says JavaScript in the head section is
DANGEROUS.  God knows why it complains only if you a) visit a file located
on your own harddrive, and b) the script is not loaded from somewhere
else (which seems to be secure in the eyes of MS).

The error is gone, as soon as the page is loaded from the web, instead
from disk.  Orgmode.org's pages do not throw that warning.

I Don't know if there is a chance to persuade IE to drop this senseless
warning.

I guess no one at MS can tell you a good reason for that ;)
(Imagine, MS focusses on SECURITY in TV spots here, even :-D )

Don't worry.  Just use a serious and reasonable web browser for local
stuff (which might be closer to real security, btw).



Best wishes

  Sebastian

Re: CSS and Publishing to HTML Tutorial

[Sebastian Rose]

Adam <ahcnz@ihug.co.nz> writes:
> Thanks for reply, guidance and suggestions.
> I agree my cgi has nothing to do with INFOJS_OPT, nor vice versa. 
>
> Regarding CSS, I have gone back to the default position, of including 
> these inside "org-notes" of org-publish-project-alist, and not referring 
> to an external CSS, 
>
>   :style-include-default   t
>   :style-include-scripts  nil
> (after Robert's comments). 
>
> So I am hoping to use the default style output, and then adjust the style
> in the org file header using  #+STYLE:  < ... > 
>
> In the org file, I have used  org-insert-export-options-template   and have 
> deleted the line #+INFO-JS_OPT: ...
>
> I publish as per the tutorial, then open the HTML result in MS Internet 
> Explorer, which reports in a yellow warning band across the top words to the 
> effect of   "To help protect your security, IE has restricted ... Click here 
> for options". 
>
> If I then edit that HTML file, and remove the 2nd of the two <style> ... 
> </style> blocks, then reloading the HTML form does not cause the yellow 
> warning to be issued. The form also appears to retain its default style, of 
> red color for the TODO etc. 
>
> This 2nd style block appears immediately before the <body> content 
> of the document.  At the very end of the Head, just before </head>.
> It begins with, 
> <script type="text/javascript">
>   ... 
>   function CodeHighlightOn(elim, id)   etc
>
> Looking at  org-exp.el  around line 554,  it almost seems as if javascript 
> is part of the default style. 


Forgot:

  This would indeed be a bug in the HTML exporter.  It should regard
  your setting of `:style-include-scripts'.

  Here it works as expected.

  (setq org-publish-project-alist
      '(("SOME-PROJECT"
         :style-include-scripts nil
         ...)
        ("OTHER-PROJECT"
         ...)))



Bets wishes

  Sebastian