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