Oxygen XML Forum

Posted: **Wed Oct 30, 2024 6:54 pm**

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

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

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!

Posted: **Thu Oct 31, 2024 3:19 pm**

Welcome back Chris

I cannot quite reproduce the problem:

Oct-31-2024 14-18-08.gif

Regards,
Radu

Posted: **Sun Nov 03, 2024 4:47 pm**

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

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.

Posted: **Tue Nov 05, 2024 9:49 am**

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

Posted: **Sun Nov 10, 2024 12:02 am**

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!

Oxygen XML Forum

Applying CSS customization to attribute text boxes in Oxygen editor

Applying CSS customization to attribute text boxes in Oxygen editor

Re: Applying CSS customization to attribute text boxes in Oxygen editor

Re: Applying CSS customization to attribute text boxes in Oxygen editor

Re: Applying CSS customization to attribute text boxes in Oxygen editor

Re: Applying CSS customization to attribute text boxes in Oxygen editor