Icons on list items in Author view

Post here questions and problems related to oXygen frameworks/document types.
BB_[A]
Posts: 14
Joined: Tue Jun 02, 2020 1:50 am

Icons on list items in Author view

Post by 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?
Bill Burns
bb@simplea.com
512-646-2100
--
We are [A]
simplea.com
Radu
Posts: 8991
Joined: Fri Jul 09, 2004 5:18 pm

Re: Icons on list items in Author view

Post by 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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
BB_[A]
Posts: 14
Joined: Tue Jun 02, 2020 1:50 am

Re: Icons on list items in Author view

Post by BB_[A] »

Thanks, Radu. Worked like a charm.

Bill
Bill Burns
bb@simplea.com
512-646-2100
--
We are [A]
simplea.com
raybiss
Posts: 31
Joined: Sat Jan 17, 2015 6:21 pm

Re: Icons on list items in Author view

Post by 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
Posts: 31
Joined: Sat Jan 17, 2015 6:21 pm

Re: Icons on list items in Author view

Post by raybiss »

After reviewing my post...
I tried both "upper-alpha" and "lower-alpha" :)
Radu
Posts: 8991
Joined: Fri Jul 09, 2004 5:18 pm

Re: Icons on list items in Author view

Post by 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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
raybiss
Posts: 31
Joined: Sat Jan 17, 2015 6:21 pm

Re: Icons on list items in Author view

Post by raybiss »

Thanks Radu!
Post Reply