Customized CSS in DITA framework add-on

Pascale
Posts: 40
Joined: Wed Jan 29, 2014 4:30 pm

Customized CSS in DITA framework add-on

Post by Pascale » Fri Jul 17, 2015 1:11 pm

Hi,
I have a custom DITA framework that has been defined as an extension of the out-of-the-box DITA framework, and we deploy our custom framework as an add-on. So far, so good.
Now, I want to add styling to my specialized elements and to override some of the default styling defined in ${frameworks}/dita/css_classe/dita.css.
Oxygen user guide says that "The easiest way of customizing the default CSS stylesheet of a document type is to create a new CSS stylesheet in the same folder as the customized one", but I want to deploy my CSS in my add-on and leave the default DITA framework unchanged.
I tried to use

Code: Select all

@import "${frameworks}/dita/css_classed/dita.css";
in my CSS but then I get an error "Cannot load the associated CSS file(s)", as it seems that the frameworks variable is not resolved.
I also tried to add both my own CSS (without the @import statement) and the dita.css files using the the Document Type Association preferences panel (Author/CSS) in Oxygen, but then I can have one or the other, not the merge of the 2 CSS.
Can you help ?
Tx, Pascale

alex_jitianu
Posts: 688
Joined: Wed Nov 16, 2005 11:11 am

Re: Customized CSS in DITA framework add-on

Post by alex_jitianu » Fri Jul 17, 2015 3:43 pm

Hello Pascale,

Yes, editor variables are not resolved inside CSS imports. Possible solutions:
- Inside your extension, when you add the new CSS, leave it without a title. The Alternate check box should not be selected either. What will happen is that this CSS will now contribute to all other main CSS.
- Create a catalog and add it in the Catalogs tab of the framerwork. Inside the catalog, map the predefined location http://www.oxygenxml.com/extensions/aut ... Custom.css to your CSS, like this:

Code: Select all

<uri name="http://www.oxygenxml.com/extensions/author/css/userCustom.css" uri="path/to/custom.css"/>
Oxygen will automatically resolve this predefined location through the catalog so this is one way to load your CSS.

Best regards,
Alex

Pascale
Posts: 40
Joined: Wed Jan 29, 2014 4:30 pm

Re: Customized CSS in DITA framework add-on

Post by Pascale » Wed Jul 22, 2015 11:37 am

Hi Alex,
thanks for the answer.

I tried the first option you suggested and it seems to work, however I would like to understand:
1. how do I control the priority of the CSS rules. Does the order of appearance in Extension/Author/CSS panel? Should my custom CSS be defined before or after the css_classed/dita.css ?
2. I have in fact 2 CSS that I want to alternate. How can I do that ?

For the second solution, I am a little bit puzzled. What is the the predefined location http://www.oxygenxml.com/extensions/aut ... Custom.css ?
If I use it, do I have to declare also the CSS in the Extension/Author/CSS panel or should I remove it from that list?
By the way, I have already a catalog for my DTDs. Can I just add the statement to the existing catalog or is it preferable to use a second, distinct, catalog for the CSS ?

Note I have set my custom CSS in Extension/Author/CSS panel, and that custom CSS imports the base css_classed/dita.css.
Thus I assume that what I could do also is to add in the catalog something like

Code: Select all


  <rewriteSystem 
systemIdStartString="css_classed/"
rewritePrefix="file:///C:/Programs/Oxygen/frameworks/dita/css_classed/" />
Can you please confirm?

Best regards,
Pascale

alex_jitianu
Posts: 688
Joined: Wed Nov 16, 2005 11:11 am

Re: Customized CSS in DITA framework add-on

Post by alex_jitianu » Wed Jul 22, 2015 1:38 pm

Hello Pascale,

1. Put your CSSs last in the list. They will be loaded after the built-in ones and from the selectors with the same priority yours will prevail. If your selectors have a greater priority then the order doesn't really matter but I recommend putting them last anyway.
2. Which version of Oxygen are you using? In version 17.0 we've added a new way of combining alternate CSSs (controlled by the optin Enable multiple selection of alternate CSSs). Depending on how this option is:
2.1 if it's selected. You're alternate CSSs are layers that the user can activate or deactivate. These layers are applied over the current main CSS (one with title and marked as not being alternate). These alternate CSS don't have to import the default CSS, they just define the rules that are specific to them.
2.2 if it's not selected. When you will activate your alternate CSS the rules from css_classed/dita.css wont be loaded unless:
-- your alternate CSS imports css_classed/dita.css but this approach implies you copy all the CSS from the base framework into your extended framework (as you discovered in your original post you can't import a CSS from the base framework). That's why maybe the next solution is preferred
-- in your extended framework edit the entry ${baseFramework}/css_classed/dita.css and delete the title. This will make it contribute to all other CSSs. Add another entry with the title "Default" that uses a CSS without any rule. You're alternate CSS wont have to import css_classed/dita.css no more.

http://www.oxygenxml.com/extensions/aut ... Custom.css is just an URL that we always try to resolve through catalogs. THis gives you the opportunity to intercept this call (through a catalog mapping) and return a file with your additional CSS rules. If you already have catalog you can very well add a mapping for this URL directly in it.
I have set my custom CSS in Extension/Author/CSS panel, and that custom CSS imports the base css_classed/dita.css.
Thus I assume that what I could do also is to add in the catalog something like
I think you are thinking that your EXtension and the base DITA framework are next to each other so why not redirect the CSS from the base framework by using the catalog. Unfortunately in wont work. Because your framework is installed as an add-on it will end up in a different frameworks location (somewhere in user preferences) while the base DITA framework is inside frameworks directory from the installation directory.

Best regards,
Alex

Post Reply