emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
From: Christian Moe <mail@christianmoe.com>
To: Samuel Wales <samologist@gmail.com>
Cc: "François Pinard" <pinard@iro.umontreal.ca>, emacs-orgmode@gnu.org
Subject: Re: ATTR_HTML for a clickable image, howto?
Date: Sat, 07 Apr 2012 15:15:08 +0200	[thread overview]
Message-ID: <4F803DDC.20808@christianmoe.com> (raw)
In-Reply-To: <CAJcAo8vc=OKcvzmSB0O1QcHzCPtqGp6jOX34ZsqFZqtHqid5uw@mail.gmail.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

  parent reply	other threads:[~2012-04-07 13:14 UTC|newest]

Thread overview: 28+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2012-04-01 21:27 ATTR_HTML for a clickable image, howto? François Pinard
2012-04-02  8:14 ` Bastien
2012-04-02 10:34   ` Christian Moe
2012-04-02 15:06     ` Bastien
2012-04-02 21:30       ` Samuel Wales
2012-04-03  5:42         ` Bastien
2012-04-05 23:34           ` Samuel Wales
2012-04-05 15:02   ` François Pinard
2012-04-06  8:52     ` Christian Moe
2012-04-06  9:29       ` Christian Moe
2012-04-06 18:41       ` Samuel Wales
2012-04-06 18:45         ` Samuel Wales
2012-04-07 13:15         ` Christian Moe [this message]
2012-04-10 23:53           ` Samuel Wales
2012-04-11  8:11             ` Christian Moe
2012-05-12  0:43               ` Samuel Wales
2012-05-20  1:00               ` Macros [was: Re: ATTR_HTML for a clickable image, howto?] François Pinard
2012-05-20  8:02                 ` Nicolas Goaziou
2012-05-20  8:34                   ` Yagnesh Raghava Yakkala
2012-05-20 10:24                     ` Nicolas Goaziou
2012-05-22 23:23                 ` Bastien
2012-07-05 14:40                 ` Bastien
2012-07-05 15:09                   ` Nicolas Goaziou
2012-07-05 15:51                     ` Sebastien Vauban
2012-07-05 20:44                       ` Nicolas Goaziou
2012-08-05  9:19                     ` Bastien
2012-05-20  0:39           ` ATTR_HTML for a clickable image, howto? François Pinard
2012-04-06  9:02     ` Bastien

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

  List information: https://www.orgmode.org/

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=4F803DDC.20808@christianmoe.com \
    --to=mail@christianmoe.com \
    --cc=emacs-orgmode@gnu.org \
    --cc=pinard@iro.umontreal.ca \
    --cc=samologist@gmail.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).