emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed

* How to distinguish timestamps in CSS?
@ 2010-11-13 23:24 Sébastien Vauban
  2010-11-14 20:40 ` Christian Moe
  0 siblings, 1 reply; 5+ messages in thread
From: Sébastien Vauban @ 2010-11-13 23:24 UTC (permalink / raw)
  To: emacs-orgmode-mXXj517/zsQ

Hello,

A quick (but not easy?) question about the Org publish to HTML and CSS: I
would like to make the 3 different timestamps stand out with different
backgrounds.

Is it possible with CSS?  I have the impression that it currently is not,
but...

This is some sample output in HTML:

#+begin_src html
<p><span class="timestamp-wrapper"> <span class="timestamp">2010-11-13 Sat</span></span><br/>
<span class="timestamp-wrapper"><span class="timestamp-kwd">SCHEDULED: </span> <span class="timestamp">2010-11-15 Mon</span></span><br/>
<span class="timestamp-wrapper"><span class="timestamp-kwd">DEADLINE: </span> <span class="timestamp">2010-11-20 Sat</span></span><br/>
</p>
#+end_src

Best regards,
  Seb

-- 
Sébastien Vauban


_______________________________________________
Emacs-orgmode mailing list
Please use `Reply All' to send replies to the list.
Emacs-orgmode-mXXj517/zsQ@public.gmane.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode

^ permalink raw reply	[flat|nested] 5+ messages in thread

• * Re: How to distinguish timestamps in CSS?
    2010-11-13 23:24 How to distinguish timestamps in CSS? Sébastien Vauban
  @ 2010-11-14 20:40 ` Christian Moe
    2010-11-14 20:56   ` Nick Dokos
    0 siblings, 1 reply; 5+ messages in thread
  From: Christian Moe @ 2010-11-14 20:40 UTC (permalink / raw)
    To: Sébastien Vauban; +Cc: emacs-orgmode
  
  Hi,
  
  Only partly.
  
  On 11/14/10 12:24 AM, Sébastien Vauban wrote:
  > Hello,
  >
  > A quick (but not easy?) question about the Org publish to HTML and CSS: I
  > would like to make the 3 different timestamps stand out with different
  > backgrounds.
  >
  > Is it possible with CSS?  I have the impression that it currently is not,
  > but...
  >
  > This is some sample output in HTML:
  >
  > #+begin_src html
  > <p><span class="timestamp-wrapper">  <span class="timestamp">2010-11-13 Sat</span></span><br/>
  > <span class="timestamp-wrapper"><span class="timestamp-kwd">SCHEDULED:</span>  <span class="timestamp">2010-11-15 Mon</span></span><br/>
  > <span class="timestamp-wrapper"><span class="timestamp-kwd">DEADLINE:</span>  <span class="timestamp">2010-11-20 Sat</span></span><br/>
  > </p>
  > #+end_src
  >
  > Best regards,
  >    Seb
  >
  
  You can distinguish between timestamps with and without a keyword. The 
  following will set a red background on SCHEDULED and DEADLINE 
  timestamps (sorry for the noise if this was clear to you already).
  
  #+STYLE: <style>.timestamp-kwd + .timestamp {background-color: 
  red}</style>
  
  But you cannot distinguish between different keywords -- no CSS 
  selector works on text content. You could use Javascript.
  
  Yours,
  Christian
  
  ^ permalink raw reply	[flat|nested] 5+ messages in thread

• • * Re: How to distinguish timestamps in CSS?
      2010-11-14 20:40 ` Christian Moe
    @ 2010-11-14 20:56   ` Nick Dokos
      2010-11-14 21:47     ` David Maus
      0 siblings, 1 reply; 5+ messages in thread
    From: Nick Dokos @ 2010-11-14 20:56 UTC (permalink / raw)
      To: mail; +Cc: =?UTF-8?B?U8OpYmFzdGllbiBWYXViYW4=?=, nicholas.dokos,
    	emacs-orgmode
    
    Christian Moe <mail@christianmoe.com> wrote:
    
    > Hi,
    > 
    > Only partly.
    > 
    > On 11/14/10 12:24 AM, Sébastien Vauban wrote:
    > > Hello,
    > >
    > > A quick (but not easy?) question about the Org publish to HTML and CSS: I
    > > would like to make the 3 different timestamps stand out with different
    > > backgrounds.
    > >
    > > Is it possible with CSS?  I have the impression that it currently is not,
    > > but...
    > >
    > > This is some sample output in HTML:
    > >
    > > #+begin_src html
    > > <p><span class="timestamp-wrapper">  <span class="timestamp">2010-11-13 Sat</span></span><br/>
    > > <span class="timestamp-wrapper"><span class="timestamp-kwd">SCHEDULED:</span>  <span class="timestamp">2010-11-15 Mon</span></span><br/>
    > > <span class="timestamp-wrapper"><span class="timestamp-kwd">DEADLINE:</span>  <span class="timestamp">2010-11-20 Sat</span></span><br/>
    > > </p>
    > > #+end_src
    > >
    > > Best regards,
    > >    Seb
    > >
    > 
    > You can distinguish between timestamps with and without a keyword. The
    > following will set a red background on SCHEDULED and DEADLINE
    > timestamps (sorry for the noise if this was clear to you already).
    > 
    > #+STYLE: <style>.timestamp-kwd + .timestamp {background-color:
    > red}</style>
    > 
    > But you cannot distinguish between different keywords -- no CSS
    > selector works on text content. You could use Javascript.
    > 
    
    Perhaps it'd be possible to (optionally) add an "id" selector to the timestamp
    <span> elements and use that for CSS manipulation, tied to an org-mode ID or
    some other unique id? Or perhaps just postprocess the HTML output to add such
    ids.
    
    Nick
    
    ^ permalink raw reply	[flat|nested] 5+ messages in thread

  • • * Re: How to distinguish timestamps in CSS?
        2010-11-14 20:56   ` Nick Dokos
      @ 2010-11-14 21:47     ` David Maus
        2010-11-15 10:08       ` Sébastien Vauban
        0 siblings, 1 reply; 5+ messages in thread
      From: David Maus @ 2010-11-14 21:47 UTC (permalink / raw)
        To: nicholas.dokos; +Cc: Sébastien Vauban, emacs-orgmode, mail
      
      
      [-- Attachment #1.1: Type: text/plain, Size: 704 bytes --]
      
      At Sun, 14 Nov 2010 15:56:20 -0500,
      Nick Dokos wrote:
      > Perhaps it'd be possible to (optionally) add an "id" selector to the timestamp
      > <span> elements and use that for CSS manipulation, tied to an org-mode ID or
      > some other unique id? Or perhaps just postprocess the HTML output to add such
      > ids.
      
      Or make the HTML export add a timestamp keyword specific class to the
      timestamp keyword span element.  So you could use:
      
      #+begin_src css
      .timestamp-kwd-scheduled + .timestamp { color: red; }
      #+end_src
      
      Cf. http://www.w3.org/TR/CSS2/selector.html
      
      I recorded a WISH for this in the issues file.
      
      Best,
        -- David
      --
      OpenPGP... 0x99ADB83B5A4478E6
      Jabber.... dmjena@jabber.org
      Email..... dmaus@ictsoc.de
      
      [-- Attachment #1.2: Type: application/pgp-signature, Size: 230 bytes --]
      
      [-- Attachment #2: Type: text/plain, Size: 201 bytes --]
      
      _______________________________________________
      Emacs-orgmode mailing list
      Please use `Reply All' to send replies to the list.
      Emacs-orgmode@gnu.org
      http://lists.gnu.org/mailman/listinfo/emacs-orgmode
      
      ^ permalink raw reply	[flat|nested] 5+ messages in thread

    • • * Re: How to distinguish timestamps in CSS?
          2010-11-14 21:47     ` David Maus
        @ 2010-11-15 10:08       ` Sébastien Vauban
          0 siblings, 0 replies; 5+ messages in thread
        From: Sébastien Vauban @ 2010-11-15 10:08 UTC (permalink / raw)
          To: emacs-orgmode-mXXj517/zsQ
        
        Hi all,
        
        Thanks Christian for info about this "plus" selection -- I totally ignored it.
        Thanks for enlightening me.
        
        David Maus wrote:
        > At Sun, 14 Nov 2010 15:56:20 -0500, Nick Dokos wrote:
        >> Perhaps it'd be possible to (optionally) add an "id" selector to the
        >> timestamp <span> elements and use that for CSS manipulation, tied to an
        >> org-mode ID or some other unique id? Or perhaps just postprocess the HTML
        >> output to add such ids.
        >
        > Or make the HTML export add a timestamp keyword specific class to the
        > timestamp keyword span element. So you could use:
        
        I guess that'd be the way to go. In fact, I envision more than a color
        background: I'd wanna use an image background. Something like:
        
            ,----------------,
            | DEADLINE       |
            |----------------|
            | 2010-11-15 Mon |
            `----------------'
        
        just below the heading.
        
        
        > #+begin_src css
        > .timestamp-kwd-scheduled + .timestamp { color: red; }
        > #+end_src
        >
        > Cf. http://www.w3.org/TR/CSS2/selector.html
        >
        > I recorded a WISH for this in the issues file.
        
        Working a bit more on my CSS (that should become a PROP for Worg3.css), I
        envision as well a nicer "calendar icon" for the dates (a priori, inactive
        timestamps telling when the meeting took place or when the note was taken):
        
              ,------,
              | Mon  |
              |------|
              | Nov  |
              |  15  | (in bigger size)
              | 2010 |
              `------'
        
        That could be placed on the left, in the margin, for example.
        
        But, to be able to do such a thing, we would even need the different
        components to be selectable:
        
        - year
        - month
        - day
        - day name
        
        Best regards,
          Seb
        
        -- 
        Sébastien Vauban
        
        
        _______________________________________________
        Emacs-orgmode mailing list
        Please use `Reply All' to send replies to the list.
        Emacs-orgmode-mXXj517/zsQ@public.gmane.org
        http://lists.gnu.org/mailman/listinfo/emacs-orgmode
        
        ^ permalink raw reply	[flat|nested] 5+ messages in thread

end of thread, other threads:[~2010-11-15 10:08 UTC | newest]

Thread overview: 5+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2010-11-13 23:24 How to distinguish timestamps in CSS? Sébastien Vauban
2010-11-14 20:40 ` Christian Moe
2010-11-14 20:56   ` Nick Dokos
2010-11-14 21:47     ` David Maus
2010-11-15 10:08       ` Sébastien Vauban

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).