Applying CSS customization to attribute text boxes in Oxygen editor

[chrispitude]

Hello to my Oxygen friends! It's been awhile.

We have a specialization of the DITA <data> metadata element. I would like to customize its appearance in Oxygen's editor as follows:

• Show a label before the element
• Show a label before each attribute text entry box
• Always show the @name and @value attributes (because it can have other attributes too)

Using a cc_config_ext.xml file and a CSS file, I can get close; initial element insertion looks like this:

image.png (10.64 KiB) Viewed 422 times

But then when I start editing the attribute values, funny things start happening to the text boxes and labels (duplicate boxes appear, labels disappear).

What is the correct way to customize attribute text entry fields in CSS? I tried to copy what i saw in Oxygen's own CSS files, but clearly I am missing some aspect.


Testcase here:

oxygen_css_attribute_styling.zip

(17.83 KiB) Downloaded 29 times

To run,

• Open the Oxygen project file.
• Open the DITA topic file.
• In the Styles drop-down, apply the incremental CSS.
• Insert a <data> element.
• Add some attribute values.

Thanks!

[Radu]

Welcome back Chris
I cannot quite reproduce the problem:

Oct-31-2024 14-18-08.gif (100.55 KiB) Viewed 384 times

Regards,
Radu

[chrispitude]

Hi Radu,

Interesting! With a fresh install of Oxygen XML Editor 2024091606 on my Windows 11 system, here is what I see:

oxygen_css_attribute_styling.gif (656.7 KiB) Viewed 341 times

When I first insert the <data> element, the labels are missing. If I enter and delete values, somehow new text fields with labels appear, but then when I enter values a second time, the old no-label text fields also appear.

[Radu]

Hi Chris,
I still cannot reproduce the problem but on my side this selector does not take effect:

Code: Select all

.topic\/data:before {
   content: oxy_label(text, " Category: ", width, 5ex) oxy_textfield(columns, 12, edit, "@name");
   content: oxy_label(text, " Keyword: ", width, 5ex) oxy_textfield(columns, 12, edit, "@value");
}

The original selectors from "Oxygen XML Editor/frameworks/dita/css/core/-topic-specialization.css" are something like this:

Code: Select all

*[class~="topic/data"][name]:before(2) {
    content: oxy_textfield(edit, '@name', columns, 10);
}
*[class~="topic/data"][value]:before(1) {
    content: " "oxy_textfield(edit, '@value', columns, 10);
}

A CSS selector which matches attributes (in this case both the class and value attribute) has a higher specificity than the one you are writing which matches only the class value.
So maybe I would re-write the CSS like this:

Code: Select all

.topic\/data {
 display: block;
 background-color: #FFE;
}

/* element label */
.topic\/data:before(3) { content: "My metadata: "; }

*[class~="topic/data"][name]:before(2) {
    content: "";
}
/* attribute labels */
*[class~="topic/data"][name][value]:before(1) {
   content: oxy_label(text, " Category: ", width, 5ex) oxy_textfield(columns, 12, edit, "@name") 
    oxy_label(text, " Keyword: ", width, 5ex) oxy_textfield(columns, 12, edit, "@value");
}

Regards,
Radu

[chrispitude]

Thanks Radu! I had forgotten to consider overriding the existing <data> CSS properties with equal or greater specificity.

I tried your suggestion and it got me close, but funny things still happened when I typed attribute values, moved the cursor, deleted values, and moved the cursor. I realized that when I deleted the values, the attribute itself was getting deleted (which I noticed in the open Attributes view) and that caused the corresponding [attributename] selector to no longer apply. With that realization (plus your reminder), what I was seeing made sense.

I ended up using !important to show the labels with highest specificity whether the attributes were present or not:

Code: Select all

/* attribute labels */
.topic\/data:before(2) {
   content: oxy_label(text, " Category: ", width, 5ex)
            oxy_textfield(columns, 12, edit, "@name") !important;
}
.topic\/data:before(1) {
   content: oxy_label(text, " Keyword: ", width, 5ex)
            oxy_textfield(columns, 12, edit, "@value") !important;
}

and everything worked perfectly. (My actual application is for a DITA specialization of <data>, so it is desirable to assume that the @name and @value attributes will be used.)

Thanks very much!