Pages: 1
Print
Author Topic: DITA Editor style - add a background image?  (Read 2351 times)
leo71
Member

Posts: 25


« on: June 28, 2013, 02:09:03 AM »

XMetal Version#: 8.0.0.036

I have custom note types and to make it clear the right note type is selected I would show the note image.

C:\Program Files (x86)\XMetaL 8.0\Author\DITA\XACs\1.2\ditabase\ditabase-base-override.css
[class~="topic/note"] {
   background: url('../../shared/images/demo.png') no-repeat scroll 0 0 transparent;
}

or background-image: url('demo.png');

I tried several options, but don't know if there is some sort of limitation, disabling image backgrounds at all.

The XMetal example having the yellow background worked fine, so I am editing the right file and class.




Logged
mag3737
XMetaL Evangelist
Administrator
Member

Posts: 117

I even use XMetaL to write my business letters.


« Reply #1 on: June 28, 2013, 01:38:10 PM »

XMetaL doesn't support the "background" or "background-image" properties.

You can do an image with the :before pseudo-selector:

[class~="topic/note"]:before
{
   content: url('note.gif');
}

[class~="topic/note"][type~="tip"]:before
{
   content: url('tip.gif');
}

But I can't see an obvious way to get BOTH the image and a text label such as "Note" or "Tip". Simply putting both in the content: property didn't do it. Maybe Derek knows ...
Logged

Tom Magliery
JustSystems Canada, Inc.
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2621



WWW
« Reply #2 on: June 28, 2013, 01:46:12 PM »

This is supported:
content: "some text " url('tip.gif');

This is not supported:
content: url('tip.gif') " some text";
Logged
leo71
Member

Posts: 25


« Reply #3 on: July 02, 2013, 07:41:37 AM »

Thank you very much.

This works very well. It must just provide the user feedback that they have entered the right othertype note.

Perfect!
Logged
Pages: 1
Print
Jump to: