Page 1 of 1
Icons on list items in Author view
Posted: Tue Jun 22, 2021 10:57 pm
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?
Re: Icons on list items in Author view
Posted: Wed Jun 23, 2021 7:06 am
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
Re: Icons on list items in Author view
Posted: Wed Jun 23, 2021 5:00 pm
by BB_[A]
Thanks, Radu. Worked like a charm.
Bill
Re: Icons on list items in Author view
Posted: Tue Oct 11, 2022 6:08 pm
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
Re: Icons on list items in Author view
Posted: Tue Oct 11, 2022 10:39 pm
by raybiss
After reviewing my post...
I tried both "upper-alpha" and "lower-alpha"
Re: Icons on list items in Author view
Posted: Wed Oct 12, 2022 10:19 am
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
Re: Icons on list items in Author view
Posted: Wed Oct 12, 2022 3:30 pm
by raybiss
Thanks Radu!