Oxygen XML Forum

Posted: **Fri Jun 13, 2025 9:14 am**

Hello,

Does someone know if it's possible to activate/desactivate an alternate CSS defined in an framework extension script directly with javascript (for Oxygen Web Author usage) ?

Code: Select all

<addCss path="css/my-alternate.less" position="before" alternate="true" title="+ My alternate"/>

Thanks for any help.
Regards,
Nicolas

Posted: **Mon Jun 16, 2025 12:54 pm**

Hello,

Sorry for the late reply.

Regarding your question about toggling an alternate CSS added via the framework extension script, one way to influence which stylesheets are loaded is by using the URL parameter stylesheet-titles. This parameter can be set to specify which CSS styles (including alternate ones) are enabled when Web Author loads. For example:

Code: Select all

&stylesheet-titles=Basic,%2B%20Inline%20insertion%20actions

Note that the value here is URL-encoded. When decoded (you can use an online tool or decodeURIComponent() in JavaScript), it becomes: "Basic,+ Inline insertion actions". This corresponds to selecting the "Basic" stylesheet plus the "+ Inline insertion actions" alternate stylesheet that you have enabled in Web Author. This example corresponds to opening a topic from the Samples section on the Web Author Dashboard using the default styles.

You can also set this programmatically as a loading option [1]. For example:

Code: Select all

workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
  e.options["stylesheet-titles"] = "Basic,+ Hints,+ Full width";
});

Here, for example, the document is loaded with the Main style "Basic" and the Additional styles "Hints" and "Full width".

Best,
Cosmin

[1] https://www.oxygenxml.com/maven/com/oxy ... tions.html

Posted: **Mon Jun 16, 2025 4:35 pm**

Thanks Cosmin for these information.
But it seems that once the editor is loaded you can't change this options with new values.

What I want to implement is a toolbar button that permit to toogle a specific alternate CSS.
I tried this, but nothing append:

Code: Select all

let length = workspace.currentEditor.options["stylesheet-titles"].length;
if (length === 1) {
	workspace.currentEditor.options["stylesheet-titles"] = [];
    workspace.currentEditor.options["stylesheet-titles"] = ["Basic", "+ Hints"];
} else {
	workspace.currentEditor.options["stylesheet-titles"] = [];
	workspace.currentEditor.options["stylesheet-titles"] = ["Basic"];
}

Once options are changes, is there a way to execute like a refresh to take into account new values ?

Thanks a lot.
Regards,
Nicolas

Posted: **Tue Jun 17, 2025 2:14 pm**

Hello,

Thank you for the details.

You can implement a custom action [1] on the toolbar that triggers a custom operation. Inside this operation, you can use the following APIs from the IWebappAuthorEditorAccess interface to toggle your alternate CSS:

Code: Select all
```
getActiveCssGroupsTitles
```
: to check which CSS groups are currently active. - https://www.oxygenxml.com/InstData/Edit ... psTitles()

Code: Select all
```
changeActiveCssGroups
```
: to activate the desired CSS group(s). - https://www.oxygenxml.com/InstData/Edit ... .util.Set)

This setup allows you to toggle the alternate CSS when the toolbar button is clicked, based on whether your target group is currently active or not.

Best,
Cosmin

[1] https://www.oxygenxml.com/maven/com/oxy ... ction.html

Oxygen XML Forum

Activate/desactivate alternate CSS with javascript

Activate/desactivate alternate CSS with javascript

Re: Activate/desactivate alternate CSS with javascript

Re: Activate/desactivate alternate CSS with javascript

Re: Activate/desactivate alternate CSS with javascript