Re: ATTR_HTML for a clickable image, howto?

[Christian Moe <mail@christianmoe.com>]

Hi, Samuel,

On 4/6/12 8:41 PM, Samuel Wales wrote:
> Christian and others,
>
> Will CSS solutions described in this thread work if you always export
> subtrees (not entire .org files) and never include style files?

Yes, CSS styles apply to exported subtrees as well, whether from the 
default stylesheet, linked external stylesheets, or #+STYLE headers.

But this applies to the static html files as exported by Org. If I 
understand your drift, you're thinking about using it in a content 
management system (CMS) like Blogger. A CMS will typically store only 
the content of your document and substitute its own template for the 
HEAD section where style information goes. Then these solutions won't 
work without modifying CSS in your CMS.

> If so, how do you go about using them in Org?  Is there a less awkward
> way than using an HTML block with a div with style=?
> This is awkward as you have to do it for every such block:
>
>    #+HTML:<div style="color: black; background-color: #f4a460">

You can edit the CSS template of your CMS to take advantage of the 
classes and ids Org applies to its HTML exports.

- You can also apply your own classes to subtrees using the 
:HTML_CONTAINER_CLASS: property, and style individual subtrees by  id 
from :CUSTOM_ID:.

- You can use #+ATTR_HTML to add class, id or style attributes to 
/some/ elements, and my understanding is that the new exporter that is 
in the works will help do this more systematically.

- You can enclose blocks in custom block classes (<DIV CLASS="foo">) 
with org-special-blocks (#+BEGIN_FOO), or with verbatim HTML.


See the Org manual:
- 12.5.9, "CSS support"

Locally applying CSS to elements with the STYLE attribute, the very 
lowest level of the cascade, should be the last resort.

> It would be great to have a generic style of some sort, specify the
> scoped Org elements with neat syntax (maybe like
[you meant to say:] #+begin_mycolor ... #+end_mycolor
> instead of HTML blocks, and to be able to export it for subtrees (not
> entire .org files!) in a completely self-contained way with no need to
> include any file.

Well, if you still want to apply local CSS formatting, but without 
writing verbatim HTML all the time, it gets a little more involved. 
Org-special-blocks doesn't help here as it only sets a class attribute 
for style sheets to select, it does not set the style attribute. Still:

- You can simplify repeated use with macros. See the manual, section 
11.6. Use the @ notation (section 12.5.3) for literal html tags within 
the macros. E.g.:

    #+MACRO: mycolor @<span style="color: black; background-color: 
#f4a460">$1@</span>

    {{{mycolor(Here I'd like some black text on an orange background.)}}}

- You could probably also use Eric Schulte's contributed 
org-exp-blocks.el, but you'd need to write some code, and it might be 
overkill for this purpose.

> An example use case is Blogger, where you /could/ try to change the
> CSS for your template, but it is far better to have your post be
> entirely self-contained with all the style information you need.

Depends on your use case, I guess, but I think it would nearly always 
be a better, simpler, cleaner solution to modify your Blogger CSS.


Yours,
Christian