Customizing the WebHelp Output with a Custom CSS
Post here questions and problems related to editing and publishing DITA content.
-
- Posts: 3
- Joined: Wed Jun 07, 2017 1:42 pm
Customizing the WebHelp Output with a Custom CSS
Post by a_kaludzinska »
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
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
Re: Customizing the WebHelp Output with a Custom CSS
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
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:
Code: Select all
.wh_search_input {
background-color: #8ac340;
}
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:
Code: Select all
.wh_side_toc .active:before{
content: "\e103"; /* the leaf symbol */
}
Code: Select all
.wh_side_toc .active:before{
content: "";
}
https://www.oxygenxml.com/events/2016/w ... _dita.html
Best Regards,
George
George Cristian Bina
Return to “DITA (Editing and Publishing DITA Content)”
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen JSON Editor
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service