Oxygen XML Forum

Hello,

I have 2 problems with styling the Responsive WebHelp output.

Problem no 1:

I am trying to Customize Responsive WebHelp output with a Custom CSS. I set the args.css parameter to the path of my custom CSS file. Also, I set the args.copycss parameter to yes.

In my custom CSS file there is the following code:

.wh_search_input navbar-form wh_main_page_search {
background-color: #8ac340;
}

I am trying to change the background colour of the element with class '.wh_search_input navbar-form wh_main_page_search' of your 'green' template. After applying transformation scenarion nothing happens.

Problem no 2:

Also, how can I remove this green leaf from the tiles menu?

Please help. Thank you,
Anna

Dear Anna,

Please note that all the values you included in the selector are class attribute values on the same elemnt, so you need to use .className syntax, and you need to match only on one such class value, like below:
Note that a selector like .class1 .class2 .class3 does not match an element with all those class values, but it will match on an element having a class attribute containing "class3", with an ancestor having the class attribute containing "class2", having at its turn an ancestor element with the class attribute containing "class1".

There are many CSS tutorials available where you can get these clarified.

You can use a CSS inspector available in modern browsers to identify what CSS rules are applied on specific content. In the case of the leaf, you should be able to find that it is generated as static content from the following code: so in order to remove the leaf you should overwrite the content property to make it empty You might also find useful tips and tricks about customizing the WebHelp output in the "DITA publishing with Oxygen XML Editor" webinar presented by my colleague Alex Jitianu. The webinar recording and samples can be found at this link:
https://www.oxygenxml.com/events/2016/w ... _dita.html

Best Regards,
George