Hazard Statement Styling

dpksaini89
Posts: 48

Hazard Statement Styling

Tue Jul 10, 2018 10:01 am

Hi, The preset Hazard statement styling layout is not very good, it does not differentiate between a warning and a caution, A lot of space is left blank after the hazard statement, If howtoavoid field has multiple statements it doesnot allow to insert ordered or un-ordered list.
Image
Image

Kindly help us in getting a proper hazard statement: Something like shown below
Image
Radu
Posts: 5620

Re: Hazard Statement Styling

Tue Jul 10, 2018 3:45 pm

Hi,

I will add an issue on our side to try and better style the hazard notes in a future version.
In the meantime the CSS rules for hazardstatement can be found here:

OXYGEN_INSTALL_DIR\frameworks\dita\css\core\-domain-hazard-d.css

and you can try to override them in your own custom CSS to provide your own styling for it.
About this remark:

If howtoavoid field has multiple statements it doesnot allow to insert ordered or un-ordered list.


The list of allowed child elements for the howtoavoid according to the DITA 1.3 specification is this one:

https://www.oxygenxml.com/dita/1.3/specs/contentmodels/cmlth.html#cmlth__howtoavoid

you can probably use a DITA <sl> (simple list) inside it.

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
DennyKim
Posts: 1

Re: Hazard Statement Styling

Fri Aug 10, 2018 3:50 pm

Hi
I would like to know how to change the background color of each specific hazardstatement type .
The current
OXYGEN_INSTALL_DIR\frameworks\dita\css\core\-domain-hazard-d.css as of line 55 is written:

Code: Select all


*[class~"hazard-d/statement"] {
  display:block;
  background-color:#f57222
  border-bottom: 2pt solid;
  padding:0.2em;
  font-weight:bold
  font-size:1.8em
 
 

}
In DITA-Framework, I would to have the background color for a
- <hazardstatement type="danger"> with background-color in red;
- <hazardstatement type="warning"> with background-color in orange;
- <hazardstatement type="caution"> with background-color in yellow;
- <hazardstatement type="notice"> with background-color in blue without the icon;

So my question: How do I write/modify the css, so that each hazardstatement type changes color? Could you present me the code?

Thanks in advance.. best regards
Mr. Kim
Radu
Posts: 5620

Re: Hazard Statement Styling

Mon Aug 13, 2018 8:09 am

Hi,

Maybe you could add in your custom CSS extra selectors looking like this one:

Code: Select all

*[class~="hazard-d/hazardstatement"][type='danger'] {
  background-color:red;
}


This topic describes how you can debug your CSS selectors to see that you match the proper constructs:

https://www.oxygenxml.com/doc/versions/20.1/ug-editor/topics/dcpp_debugging_the_css.html

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest