WebHelp Responsive: Custom CSS as addition to default CSS

B-E-N
Posts: 122
Joined: Thu Mar 24, 2016 5:54 pm

WebHelp Responsive: Custom CSS as addition to default CSS

Post by B-E-N » Mon Aug 15, 2016 11:23 am

Hello,

we have created a custom template for our WebHelp Reponsive output (Oxygen 18.0.1).

I would like to leave the default CSS untouched and have the things we want to change in a second CSS file, that we add via the args.css parameter. But it doesn't work like that, it seems. Is the args.css file not applied at the last position during processing?

What would be your suggested way to work with a custom CSS for WebHelp Responsive? The only way that currently works is writing all changes directly into the skin.css file.

alin
Site Admin
Posts: 140
Joined: Thu Dec 24, 2009 11:21 am

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by alin » Wed Aug 17, 2016 10:12 am

Hello,

I have tested the scenario you described with <oXygen/> XML Editor 18.0, build 2016081012 (the latest available on www.oxygenxml.com). It seems that the custom CSS file specified via the args.css parameter is the last one listed in the <head> of the HTML page, after the skin.css reference. Thus the style rules specified in the custom CSS override the ones in the skin.css.

When the args.css parameter points to a local CSS file, you should also set the args.copycss parameter to yes. This way the application will copy the custom CSS to the output directory. Have you set this parameter?

You can read more about how to customize the WebHelp Responsive output using a custom CSS in our User Manual:
https://www.oxygenxml.com/doc/ug-editor ... custom_css

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

B-E-N
Posts: 122
Joined: Thu Mar 24, 2016 5:54 pm

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by B-E-N » Wed Aug 17, 2016 12:29 pm

Hm, I did it like you said, but it doesn't work.

The WebHelp Responsive output does not take the custom CSS into account. args.copycss is set to "yes" by default.
The custom CSS is not mentioned in the output files and the custom CSS file is also not copied into the output folder.

If I copy the content from the custom CSS into the skin.css, everything works as intended.

Do I need to use the other CSS parameters as well? args.csspath and args.cssroot

alin
Site Admin
Posts: 140
Joined: Thu Dec 24, 2009 11:21 am

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by alin » Wed Aug 17, 2016 2:40 pm

Hello,

In order to be able to debug your problem I need to clarify some details:
  1. What build of Oxygen 18.0 are you using?
    You can find the build number in the About Dialog: Main Menu -> Help -> About
  2. Which DITA-OT distribution are you using:
    1. the built-in DITA-OT 2.x
    2. the built-in DITA-OT 1.8
    3. a custom distribution?
    You can check which is the current DITA-OT distribution in the DITA preferences page: Main Menu -> Options -> Preferences -> DITA
  3. Can you provide a snippet of the <head> element from one of your output HTML files?
    For example, in my case, this is how the <head> element looks like in the index.html page:

    Code: Select all

    
        <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
    /**
    * If an old URL is given, redirect to the corresponding topic from the WebHelp Responsive
    */
    var actualLocation = window.location.href;
    var newLocation;
    if (actualLocation.indexOf('/#')!=-1) {
    newLocation = actualLocation.replace(/\/#/g, "/");
    window.location.replace(newLocation);
    }
    if (actualLocation.match(/\/index\.(.*)#/gi)!=null) {
    newLocation = actualLocation.replace(/\/index\.(.*)#/gi, "/");
    window.location.replace(newLocation);
    }

    function debug(msg, object){
    console.log(msg, object);
    }
    function executeQuery(){
    return true;
    }
    </script>

    <link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/webhelp_responsive_topic.css" />

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/bootstrap/css/bootstrap.min.css" />

    <!-- Bootstrap Optional theme -->
    <link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/bootstrap/css/bootstrap-theme.min.css" />

    <!-- Changes and comments, as side-notes -->
    <link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/p-side-notes.css" />

    <!-- Template default styles -->
    <link rel="stylesheet" type="text/css" href="oxygen-webhelp/template/resources/css/wt_default.css" />


    <script type="text/javascript" src="oxygen-webhelp/resources/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="oxygen-webhelp/resources/localization/strings.js"></script>
    <script type="text/javascript" src="oxygen-webhelp/resources/js/localization.js"></script>
    <script type="text/javascript" src="oxygen-webhelp/resources/js/parseuri.js"></script>
    <script type="text/javascript" src="oxygen-webhelp/resources/js/jquery.cookie.js"></script>

    <script type="text/javascript" src="oxygen-webhelp/resources/js/jquery.highlight-3.js"></script>

    <title>Growing Flowers</title>
    <link rel="stylesheet" type="text/css" href="oxygen-webhelp/template/variants/tiles/oxygen/skin.css" />
    <link rel="stylesheet" type="text/css" href="my-custom-css.css" data-css-role="args.css"><!----></link>
    </head>
    As you can see, the my-custom-css.css CSS file is the last listed link.
  4. Does your custom CSS file refer other resources (other CSS files, images, fonts)? If yes, they can be copied to the output folder using the webhelp.custom.resources parameter (see https://www.oxygenxml.com/doc/ug-editor ... _resources).
Do I need to use the other CSS parameters as well? args.csspath and args.cssroot
No, no other parameters are required. The args.css and args.copycss should be enough if your CSS file does not refer other resources.
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

B-E-N
Posts: 122
Joined: Thu Mar 24, 2016 5:54 pm

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by B-E-N » Wed Aug 17, 2016 3:03 pm

1. XML Editor 18.0, build 2016081012
2. DITA-OT 2.0.1 (custom)
3. The head of our index.html file.

Code: Select all

<head>
<!-- Generated with Oxygen version 18.0, build number 2016051118. -->
<title>WebHelp</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var withFrames=false;

try {
var parentWindow = window.name;
} catch (e) {
debug("Exception: " + e);
}
if (parentWindow == "frm" || parentWindow == "contentwin") {
var link = window.location.href;
var firstAnchor = link.search("#");

window.location.href = link.substr(0,firstAnchor) + link.substr(firstAnchor+1);
}

var webhelpSearchRanking = true;
</script>
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/commonltr.css"
><!----></link>
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/toc.css"
><!----></link>
<link rel="stylesheet" type="text/css"
href="oxygen-webhelp/resources/skins/desktop/toc_custom.css"><!----></link>
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/webhelp_topic.css"
><!----></link>
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/skins/skin.css"
><!----></link>
<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery-1.11.3.min.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery.cookie.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery-ui.custom.min.js"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/js/jquery.highlight-3.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/search/nwSearchFnt.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/search/stemmers/en_stemmer.js"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/localization/strings.js"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/js/localization.js"><!----></script>
<script src="./oxygen-webhelp/resources/js/browserDetect.js" type="text/javascript"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/js/parseuri.js"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/js/jquery.ba-hashchange.min.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/splitter.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/log.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/toc.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/skins/desktop/toc_driver.js"><!----></script>
</head>
4. The custom CSS refers to another bootstrap (so should be already included) font-family to use another icon for the link to the index (not the default book icon anymore). And the custom CSS also has has style information for the custom header and footer components.

alin
Site Admin
Posts: 140
Joined: Thu Dec 24, 2009 11:21 am

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by alin » Wed Aug 17, 2016 4:07 pm

Could please try to change the DITA Open Toolkit option to Built-in DITA-OT 2.x and check if the problem persists?
  1. If yes, please send us the content of the console output. The console output is not displayed by default. To enable it you should go to the DITA preferences page and change the Show console output option to Always.
  2. If no, it is hard to tell what causes the problem. In this case you might try to perform a comparison between the WebHelp plugin from the built-in DITA-OT and the one in your current DITA-OT. Also, you should consider to update to a newer DITA-OT distribution (the one you are using seems to be a little older). Oxygen 18.0 comes bundled with DITA-OT 2.2.3
Also, to see if the problem resides in the WebHelp plugin or in the DITA OT core you should try a DITA XHTML transformation on a DITA topic and set a custom CSS file in same way as above. If the CSS is not copied to the output folder or if it has no effect over the output HTML file then the problem is in your DITA-OT distribution's core.
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

alin
Site Admin
Posts: 140
Joined: Thu Dec 24, 2009 11:21 am

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by alin » Wed Aug 17, 2016 4:24 pm

B-E-N wrote: 3. The head of our index.html file.

Code: Select all

<head>
<!-- Generated with Oxygen version 18.0, build number 2016051118. -->
<title>WebHelp</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var withFrames=false;

try {
var parentWindow = window.name;
} catch (e) {
debug("Exception: " + e);
}
if (parentWindow == "frm" || parentWindow == "contentwin") {
var link = window.location.href;
var firstAnchor = link.search("#");

window.location.href = link.substr(0,firstAnchor) + link.substr(firstAnchor+1);
}

var webhelpSearchRanking = true;
</script>
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/commonltr.css"
><!----></link>
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/toc.css"
><!----></link>
<link rel="stylesheet" type="text/css"
href="oxygen-webhelp/resources/skins/desktop/toc_custom.css"><!----></link>
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/webhelp_topic.css"
><!----></link>
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/skins/skin.css"
><!----></link>
<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery-1.11.3.min.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery.cookie.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery-ui.custom.min.js"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/js/jquery.highlight-3.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/search/nwSearchFnt.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/search/stemmers/en_stemmer.js"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/localization/strings.js"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/js/localization.js"><!----></script>
<script src="./oxygen-webhelp/resources/js/browserDetect.js" type="text/javascript"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/js/parseuri.js"><!----></script>
<script type="text/javascript" charset="utf-8" src="oxygen-webhelp/resources/js/jquery.ba-hashchange.min.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/splitter.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/log.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/toc.js"><!----></script>
<script type="text/javascript" src="oxygen-webhelp/resources/skins/desktop/toc_driver.js"><!----></script>
</head>
After taking a quick look over your HTML snippet it seems that it is not the output of a WebHelp Responsive tranformation.
It looks like it corresponds to the output of a WebHelp Classic transformation.
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

B-E-N
Posts: 122
Joined: Thu Mar 24, 2016 5:54 pm

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by B-E-N » Wed Aug 17, 2016 4:39 pm

My bad, set the wrong checkmark.

Here the WebHelp Responsive output. I'll try your suggestions in a moment.

Code: Select all

    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
/**
* If an old URL is given, redirect to the corresponding topic from the WebHelp Responsive
*/
var actualLocation = window.location.href;
var newLocation;
if (actualLocation.indexOf('/#')!=-1) {
newLocation = actualLocation.replace(/\/#/g, "/");
window.location.replace(newLocation);
}
if (actualLocation.match(/\/index\.(.*)#/gi)!=null) {
newLocation = actualLocation.replace(/\/index\.(.*)#/gi, "/");
window.location.replace(newLocation);
}

function debug(msg, object){
console.log(msg, object);
}
function executeQuery(){
return true;
}
</script>

<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/webhelp_responsive_topic.css" />

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/bootstrap/css/bootstrap.min.css" />

<!-- Bootstrap Optional theme -->
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/bootstrap/css/bootstrap-theme.min.css" />

<!-- Changes and comments, as side-notes -->
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/resources/css/p-side-notes.css" />

<!-- Template default styles -->
<link rel="stylesheet" type="text/css" href="oxygen-webhelp/template/resources/css/wt_default.css" />


<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="oxygen-webhelp/resources/localization/strings.js"></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/localization.js"></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/parseuri.js"></script>
<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery.cookie.js"></script>

<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery.highlight-3.js"></script>

<title>WebHelp</title><link rel="stylesheet" type="text/css" href="oxygen-webhelp/template/variants/smtg/webhelp_beta/skin.css" /></head>

B-E-N
Posts: 122
Joined: Thu Mar 24, 2016 5:54 pm

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by B-E-N » Tue Aug 23, 2016 11:52 am

alin wrote:Could please try to change the DITA Open Toolkit option to Built-in DITA-OT 2.x and check if the problem persists?
  1. If yes, please send us the content of the console output. The console output is not displayed by default. To enable it you should go to the DITA preferences page and change the Show console output option to Always.
  2. If no, it is hard to tell what causes the problem. In this case you might try to perform a comparison between the WebHelp plugin from the built-in DITA-OT and the one in your current DITA-OT. Also, you should consider to update to a newer DITA-OT distribution (the one you are using seems to be a little older). Oxygen 18.0 comes bundled with DITA-OT 2.2.3
Also, to see if the problem resides in the WebHelp plugin or in the DITA OT core you should try a DITA XHTML transformation on a DITA topic and set a custom CSS file in same way as above. If the CSS is not copied to the output folder or if it has no effect over the output HTML file then the problem is in your DITA-OT distribution's core.
  1. I've send you the console output via E-Mail (support@oxygenxml.com)
  2. I can't use the built-in DITA-OT because of our custom framework. The transformation fails then.
Our first WebHelp tests were with WebHelp Classic and Oxygen 17.1. In this version, the custom CSS parameter works as intended. Since Oxygen 18, both the WebHelp Classic and WebHelp Responsive transformation don't take the custom CSS parameter into account anymore. Same framework and DITA-OT version as we used in Oxygen 17.

alin
Site Admin
Posts: 140
Joined: Thu Dec 24, 2009 11:21 am

Re: WebHelp Responsive: Custom CSS as addition to default CSS

Post by alin » Wed Aug 24, 2016 12:03 pm

Hello,

I have tried to reproduce your setup by using the same version of DITA-OT and the WebHelp plugin v18.0. I have managed to use a custom CSS file in the WebHelp Responsive output.
The only problem that I noticed is that the default value of the args.copycss parameter (yes) does not reflect the real value used in the transformation scripts. It seems if you do not set it explicitly to yes, the custom CSS will not be copied to the output. So you have to edit the value of the parameter and select yes in the Value field.

In a previous post you metioned that the default value for this parameter is yes:
B-E-N wrote: The WebHelp Responsive output does not take the custom CSS into account. args.copycss is set to "yes" by default.
This parameter is not listed in your log, so I concluded that you used the default value for it.

So, can you check again the value of this parameter and if it is the case, set it to yes?
Note that, after you edit a parameter and set it a value different from the default one, it should be rendered in bold in the parameters list.


These are the steps that I've performed:
  1. Downloaded the DITA-OT 2.0.1 distribution.
  2. Set the DITA Open Toolkit option to point to it.
  3. Integrated the WebHelp plugin, build 2016081012.
  4. Added a custom CSS via the args.css
  5. Set the value for the args.copycss parameter to yes.
  6. Run a WebHelp Responsive transformation over one of our sample DITA maps
The style rules from the custom CSS reflected in the WebHelp Responsive output.
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

Post Reply