Hazard Statement Styling

dpksaini89
Posts: 50

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: 5689

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: 4

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: 5689

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
DennyKim
Posts: 4

Re: Hazard Statement Styling

Thu Aug 16, 2018 11:35 am

Hello,
first, I would like to thank you for your previous assistance. I have experimented the "-domain-hazard-d.css"-file and changed it so that much of it now complies with DIN EN82079 and ISO7010 Standards.
But currently, the hazard symbol appears in every type of <hazardstatement>-Element (danger, warning, caution, notice/note) which is not tolerable.

So my question: how do I prevent thte hazard symbol from appearing in a <hazardstatement type="notice">-Element, while the other <hazardstatement type="notice">-Elements must have the hazard symbol? What method must I apply?

In line 55 - line 90, the css-coding currently looks like this:

Code: Select all


 *[class~="[color=#0040FF]hazard-d/statement"/hazardstatement[/color]"][type:"[color=#0040FF]notice[/color]"] {
       display:block;
       background-color:blue;
       border-bottom: 2pt solid;
       padding:0.4em 0.2em 0.2em 0.8em;
       font-weight:bold;
       font-size:1.2em
  }

 /*
  * Try to put all caps on the known types.
  */
  *[class~="hazard-d/statement"/hazardstatement][type]:before {
       content: url("../img/warning-black30.png") " " attr(type);
  }




Best regards,
Mr. Kim
Radu
Posts: 5689

Re: Hazard Statement Styling

Thu Aug 16, 2018 1:42 pm

Hi,

I'm sorry but I do not understand what you mean. Could you also post some small DITA XML code snippets showing those two situations?

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

Re: Hazard Statement Styling

Thu Aug 16, 2018 3:08 pm

How do i prevent the yellow triangle with the expression mark from appearing in the top left corner, when I want to create a NOTICE-hazardstatement??

Image

This is the code written in the oxygen xml css file for DITA-topic hazard statement:

*[class~="hazard-d/statement"/hazardstatement"][type:"notice"] {
display:block;
background-color:blue;
border-bottom: 2pt solid;
padding:0.4em 0.2em 0.2em 0.8em;
font-weight:bold;
font-size:1.2em
}

/*
* Try to put all caps on the known types.
*/
*[class~="hazard-d/statement"/hazardstatement][type]:before {
content: url("../img/warning-black30.png") " " attr(type);
Dan
Posts: 298

Re: Hazard Statement Styling

Thu Aug 16, 2018 3:56 pm

Hello Mr. Kim,

I think you should write your CSS customization rules as:

Code: Select all

*[class~="hazard-d/hazardstatement"][type="notice"]:before {
    content: oxy_uppercase(attr(type));
}


*[class~="hazard-d/hazardstatement"][type="notice"] {
  display:block;
  background-color:blue;
  border-bottom: 2pt solid;
  padding:0.4em 0.2em 0.2em 0.8em;
  font-weight:bold;
  font-size:1.2em
}

1. I have corrected the class expressions.
2. I have removed the icon from the "content" expression leaving just an uppercase value extracted from the type attribute. You can use instead the string "NOTICE", since we matched the notice type.

Let us know if you have more questions.
Many regards,
Dan
DennyKim
Posts: 4

Re: Hazard Statement Styling

Mon Sep 10, 2018 4:31 pm

Currently, the "NOTICE"-hazardstatement also produces the General Hazard Symbol.

How do I remove the image and replace it with different image? Note that the other hazard-statement-types DANGER, WARNING and CAUTION must remain how they are and inclede the General Hazard Symbol ISO-W001.

In the -topic-body.css:262, I found the following css-code:

Code: Select all


*[class~='topic/image' ]{
         content:attr(href , url); 
 }
 
 

The css-file @domain-hazard-d.css looks like this:

Code: Select all

 +[class~="hazard-d/hazardstatement"][type="notice"] {
        display:block;
        color:rgb (255,255,255);
        background-color: rgb(21, 72, 137);
        padding:0.4em;
        padding:0.1em;
        padding:0.1em;
        padding:0.1em;
 }


So what is the next step??
Dan
Posts: 298

Re: Hazard Statement Styling

Thu Sep 13, 2018 10:26 am

You should save the image for notice next to the customization CSS file.
After this, add in you CSS:

Code: Select all

*[class ~= "hazard-d/hazardstatement"][type = "notice"]:before {
    content: url("other_notice_icon.png") " NOTICE";
}

In this way you are changing the icon and label of the notice hazardstatements with the ones of your choice. Or you can simply remove the url() expression to remove the icon from the notices.

Many regards,
Dan

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

Who is online

Users browsing this forum: No registered users and 0 guests