Icons on list items in Author view

[BB_[A]]

I'm developing css formatting in AUthoring view for some elements that will become bootstrap components when transformed. I can apply some styling using the outputclass, but Oxygen seems to ignore some properties that I would think would be supported, like

*[outputclass~="considerations"] {
list-style-image: url('../art/blue-check.png');
}

list-style-type doesn't appear to work in this context either.

content: url('../art/blue-check.png') works on the ul where the outputclass is assigned, but I need to style the li elements, which don't have an outputclass.

Any suggestions or workarounds?

[Radu]

Hi Bill,

I'm afraid that the Oxygen desktop application's Author visual editing mode does not support the CSS "list-style-image" property:
https://www.oxygenxml.com/doc/versions/ ... pport.html

If we manage to add support for it in a future version we'll update this thread.

Maybe instead you can use a :before selector like:

Code: Select all

*[outputclass~="considerations"] > *:before {
content: url('../art/blue-check.png');
}

Regards,
Radu

[BB_[A]]

Thanks, Radu. Worked like a charm.

Bill

[raybiss]

Hi,
Is the "list-style-type" CSS property supported in Author mode (version 24.1)?
I've been trying to style a list with @outputclass="upper-alpha" and

Code: Select all

    *[class ~= "topic/ol"][outputclass ~= "lower-alpha"] {
        list-style-type: lower-alpha !important;
    }

But I can't get the list style type to change.
This page somehow says it can be done.
https://www.oxygenxml.com/doc/versions/ ... pport.html
All other CSS properties on the <ol> element seem to work.
Regards,
Raymond

[raybiss]

After reviewing my post...
I tried both "upper-alpha" and "lower-alpha"

[Radu]

Hi,

The "list-style-type" CSS property is supported by our Author visual editing mode, for example if you have a generic XML document like this:

Code: Select all

<root>
    <ol>
        <li>aaa</li>
        <li>aa</li>
    </ol>
</root>

and a CSS like this:

Code: Select all

* {
    display:block;
}
li {
    list-style-type:lower-alpha;
    display:list-item;
    margin-left: 2em;
}

the list style type should be properly rendered in the Author mode.
But you are trying to customize the DITA visual editing with extra CSS selectors.
For DITA CSS editing we use the ":marker" pseudo class to set a counter on each list item.
In the Oxygen main menu Window->"Show view" there is a "CSS Inspector" view which is quite useful to show you the already defined CSS styles for the current element. So it's an useful instrument to help you debug CSS customization problems.
In your case the CSS selector to accomplish what you need would probably look like this:

Code: Select all

*[class ~= "topic/ol"][outputclass ~= "lower-alpha"] > *[class~="topic/li"]::marker{
        content: counter(item-count, lower-alpha) ". " !important;
}

Regards,
Radu

[raybiss]

Thanks Radu!