Not able to apply css styling to pdf

[takolkar]

Hi,
I am working on

API documentation

where I need to generate it in pdf format.
The end result is plain black and white. But I want to add styling to the document using custom css.
I have followed all the steps in
https://www.youtube.com/watch?v=rs04iX_RdIk
and
https://www.oxygenxml.com/doc/versions/ ... yling.html

But they still doesn't seem to work using css class. Though I am able to apply css only using the tags, but not using the class.

Here is the example of code I am using:

custom.css

Code: Select all

.key {
    background-color: red !important;
}

*[outputclass~="key"] codeblock,
*[outputclass~="key"] pre,
*[outputclass~="key"] code {
    background-color: red !important;
    text-align: center;
}

file.dita

Code: Select all

  <codeblock outputclass="key" id="codeblock_jzg_2z1_lbc">
                    {
  "reponseMsg": "Request is successfully recieved but it is still in progress.",
  "requestId": "xxxbc8bf20xxx0000",
  "statusCode": 202,
  "message": "OK",
  "timeGenerated": "2023-02-11T00:00:00.000Z"
}
                </codeblock>

[julien_lacour]

Hello,

This is normal, the selectors are incorrect for your use-case, for example if you translate *[outputclass~="key"] codeblock this means "any element whose outputclass contains 'key' having a descendant codeblock". This isn't your case as the outputclass is in the codeblock, not in an ascendant node.

A correct selector could be:

Code: Select all

codeblock[outputclass~="key"]

Or directly

Code: Select all

*[outputclass~="key"]

Or using both class and outputclass:

Code: Select all

*[class~="pr-d/codeblock"][outputclass~="key"]

Regards,
Julien

[takolkar]

Hi Julien,

Thanks for you reply. I tried the code you sent but still the same. The class doesn't seem to work. Could it be the case that I am missing any setting or making any other syntax error?
FYI, I have added the reference of the class in .opt file and also added as a parameter in args.css.
Also, as mentioned earlier, the styling using tags seem to work too, it's just the css class that is not working.

Below is the styling that is working using tags:

Code: Select all

code,
pre {
  font-family: "Courier New", Courier, monospace;
  background-color: #2c3e50; /* Dark grey background */
  color: #f8f8f2; /* Light text color */
 
  padding: 15px;
  display: block;
  overflow: auto;
}
pre {
  padding: 15px;
  background-color: #2c3e50; /* Dark grey background */
  color: #f8f8f2; /* Light text color */
  border: 1px solid #444444;
  border-radius: 5px;
  margin: 10px 0;
} 

Thanks

[julien_lacour]

Hello,

All the class selectors should work from the moment they are valid and you run the DITA Map PDF - based on HTML5 & CSS transformation scenario.
You can try to debug your CSS to see which rules are applied and which are not. You simply need to open the merged.html file in your favorite browser and inspect it.

Regards,
Julien