DITA Editor style – add a background image?

[leo71]

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.0AuthorDITAXACs1.2ditabaseditabase-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.

Reply

[mag3737]

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 …

Reply

[Derek Read]

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

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

Reply

[leo71]

Thank you very much.

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

Perfect!

Reply

[Author]

Posts