Pages: 1
Print
Author Topic: Custom CSS not being read for webhelp output  (Read 1666 times)
niallglynn
Member

Posts: 2


« on: February 11, 2016, 09:39:01 AM »

Hi Folks,

I am trying to generate webhelp output. I am pointing towards a specific custom css in the Specific CSS field. I also have the 'ANT_PARAM_args.copycss  =  yes' entered in the Other output parameters window.

When I generate the help, the body pane does not reflect the font specifications in my custom css. In fact, when I view the custom css in the output folder values, I see that they have been replaced by the webhelp.css values.

Does anyone know how to resolve this?

Regards,
Niall.
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2513



WWW
« Reply #1 on: February 12, 2016, 02:45:55 PM »

I've tried exactly what you describe and it works for me.

The "Specific CSS" setting puts that filename into a <link> in the HTML pages' <head>, similar to this:
<link rel="stylesheet" type="text/css" href="mycustom.css"/>

Check to see that that is being done.

You also seem to have copycss set correctly (ANT_PARAM_args.copycss  =  yes), and that tells the DITA OT to actually move the CSS from the location you specify to the root folder of the output.

If those two things are happening (the file is at the correct place and being loaded) and your CSS settings are not being reflected in the HTML then your problem is probably a CSS cascading issue. Some other CSS selector may be taking priority.
Logged
niallglynn
Member

Posts: 2


« Reply #2 on: February 15, 2016, 02:57:36 AM »

Hi Derek,

Thanks for your reply.
How to I ensure that the CSS selector is working correctly?

In the source of the html output I see the following:
<link rel="stylesheet" type="text/css" href="../../../commonltr.css"/>
<link rel="stylesheet" type="text/css" href="../../../commonltr_customised.css"/>

It reads the settings from the first css file, the second is my customised one.

Regards,
Niall.
« Last Edit: February 15, 2016, 03:05:13 AM by niallglynn » Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2513



WWW
« Reply #3 on: February 15, 2016, 01:08:02 PM »

This is essentially website development at this point. You will need to understand the CSS cascading rules and specificity. Those are (in brief) anything read in later (from the same or another CSS file) is used if it has the same or higher specificity. Google "css selector specificity rules" for more info. However, keep in mind that you can also set properties in different selectors that effectively change the look of the same element.

You might want to use a tool designed to help figure that out if you cannot do it by looking at the files and the selectors you have created. You will see recommendations on various tools and methods for understanding this when you Google for the keywords above.
Logged
Pages: 1
Print
Jump to: