Selecting among CSS alternatives by hotkey

[PaulHayslett]

My apologies if this has been covered before...

My client wants a hotkey which will toggle between 2 CSS stylesheets in Author mode. The stylesheets are set up in our custom framework -- the users can switch back and forth using the "Author CSS Alternatives" toolbar dropdown. The client just wants to be able to do this without needing to use the mouse.

Is there a way to attach a hotkey to the items in that toolbar dropdown? Failing that, is there an easy way to set up an action which selects the stylesheet? Failing that, can someone point me to the API class which controls the current stylesheet? (Sorry, I can never seem to find anything in javadocs.)

Thanks in advance.

[Radu]

Hi Paul,

Unfortunately we do not yet have a feature for this. We'll consider adding this in a future Oxygen version.
An alternative if the alternate CSSs are not that different would be not to use alternate CSSs at all but to have a single CSS with custom pseudo classes set on certain selectors.

For example you can use a non standard (custom) pseudo class to impose a style change on a specific element. For instance you can have CSS styles matching a custom pseudo-class, like the one below:

Code: Select all

   :root:simplified section {

      display:none;

   } 

.....

   section {

      display:block;

   } 

By default a section will be a block element. But by setting the pseudo class "simplified" on the root element, all sections will be hidden.
To change the pseudo class on a certain element you can create a custom Author Action (and add it to the toolbar for example). The action can use a particular available operation called ro.sync.ecss.extensions.commons.operations.TogglePseudoClassOperation to set or reset a pseudo class value on a certain element. And used-defined Author extension actions can be assigned keyboard shortcuts.

Regards,
Radu

[PaulHayslett]

Thank you for the reply.

I think the pseudo class suggestion will work. As it happens, the two CSSs currently differ only in that one element is hidden in one of them, just as in your example. (In fact, that one is implemented by @import-ing the other CSS and overriding that one element's style.) So your example is a perfect fit.

Thanks again.