Add Logo to WebHelp

[pault]

I know how to add a logo to the contents frame using args.hdr or args.hsf in WebHelp, but I don't understand how to add a logo above the Content and Search tabs? Specifically I would like to add a logo to the left of the displayed title (ie, generated by the name of the ditamap) in the top-left corner. In the frameset view this would be the navigation pane.

Thanks,
Paul

[sorin_ristache]

Hi Paul,

I think the simplest way is adding an h1:before selector in the built-in CSS stylesheet imported in any Webhelp output file (which is an HTML file) or in your own custom CSS stylesheet which you set in the args.css parameter of the DITA Map WebHelp transformation. The built-in CSS stylesheet is either [Oxygen-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\css\toc.css (if you use the frameset version of the Webhelp output, that is the index_frames.html main file) or [Oxygen-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\css\toc.css (if you use the internal frames version of the Webhelp output, that is the index.html main file):

Code: Select all

h1:before {

    display:inline;

    content:url('../img/myLogoImage.gif');

}

where myLogoImage.gif is an image file which you place in the directory [Oxygen-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\img before you start the DITA map Webhelp transformation (so that it can be copied automatically by the transformation to the output directory).


Regards,
Sorin

[pault]

Thanks Sorin,

It didn't occur to me that this could be solved simply using CSS. One slight correction, the internal frames CSS is [Oxygen-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\css\tocWDiv.css

[sorin_ristache]

Hi Paul,

Yes, that is correct.


Thanks,
Sorin

[mcverma]

hi Sorin,

I tried to add the logo using the h1:before code on my custom css, but the logo is not displayed in the generated webhelp.

Should I be using the :before pseudo-element with another tag (for instance, productTitle)?

Thanks

[sorin_ristache]

Hi mcverma,

I assume you tried to add the logo image in the version of Webhelp output without frameset (the index.html main file), not the one with frameset (the index_frames.html main file).

What is the path to the logo image used in the CSS file? Does the logo image exist on disk in the location specified in the CSS, in the output directory (or a subdirectory) of the Webhelp transformation? Please can you send us your output directory of the DITA Webhelp transformation? We will have to look at the output HTML files and the included CSS to find out why the logo image is not added as the pseudo-element h1:before.

What Oxygen version do you use?


Regards,
Sorin

[jvazquez]

I tried the same thing using the css file pointed to by args.css and it didn't work on oXygen 15. When I examined the index.html file, there was no img element prior to the h1.

Is it possible something's missing from the sample code?

[sorin_ristache]

Hi Julio,

You just have to make sure that the relative path to the image logo is correct, which means the logo image should actually exist in the output directory where the CSS selector for h1:before tries to locate and load it. This is why I recommend to store the logo image in directory com.oxygenxml.webhelp\oxygen-webhelp\resources\img, to have it copied automatically to the output directory by the Webhelp transformation. Otherwise you have to make sure you copy it there yourself.

I tested with the h1:before solution added in the CSS stylesheet com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\desktop\toc.css and I confirm that it works in version 15.0 too. If it doers not work for you please send us your customization for the Webhelp transformation and your output directory of the Webhelp transformation for trying to find why it did not work for you.


Regards,
Sorin

[jvazquez]

Hi Sorin,

Finally got this right but the logo's being placed in the content pane and not in the area above, where the titles are.

Closer but not the right place.

[mcverma]

Hi Sorin,

I assume you tried to add the logo image in the version of Webhelp output without frameset (the index.html main file), not the one with frameset (the index_frames.html main file).

Yes, it was the index.html file.

What is the path to the logo image used in the CSS file? Does the logo image exist on disk in the location specified in the CSS, in the output directory (or a subdirectory) of the Webhelp transformation?

I added the logo image in .../frameworks/dita/DITA-OT/plugins/com.oxygenxml.webhelp/oxygen-webhelp/resources/img folder.

I can also see the logo in the output folder.

Please can you send us your output directory of the DITA Webhelp transformation?

I have done so. For testing, the logo I used was the oxygen logo, which is used in the footer.

What Oxygen version do you use?

Oxygen 15

Thanks again for your help.

[jvazquez]

I tested with the h1:before solution added in the CSS stylesheet com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\desktop\toc.css and I confirm that it works in version 15.0 too. If it doers not work for you please send us your customization for the Webhelp transformation and your output directory of the Webhelp transformation for trying to find why it did not work for you.


Regards,
Sorin

Sent a zip file of the output along with the CSS I used to build the output and the logo file (though probably didn't need to send that). I've tried using div#id:before to try to get the logo places before the title but it never seems to get there. Not quite sure what's going on here but it's as if the area the first h1 is in is not affected by the CSS.

[mcverma]

I've tried using div#id:before to try to get the logo places before the title but it never seems to get there. Not quite sure what's going on here but it's as if the area the first h1 is in is not affected by the CSS.

I used the div id for productTitle and did manage to add the logo as a repeating background image, but it did not work when I set it as no-repeat.

[jvazquez]

I used the div id for productTitle and did manage to add the logo as a repeating background image, but it did not work when I set it as no-repeat.

So you were able to get multiple background-images but not a single image? Not exactly what's needed, is it. I will confess to not being very conversant in CSS so could you share the code? (Sanitized if needed.)

[jvazquez]

I tried this:

Code: Select all

#productTitle

{

   background-image:url(mylogo.png);

   background-repeat:repeat;

}

This didn't work at all. I did try using div#productTitle with the same result. The other problem is that this won't work for the other format of webhelp because that div doesn't exist.

[sorin_ristache]

I can also see the logo in the output folder.

Please can you send us your output directory of the DITA Webhelp transformation?

I have done so. For testing, the logo I used was the oxygen logo, which is used in the footer.

Thank you for the files but the output folder (or any subfolder) does not contain a file called logo2.png. I can see that you display the image correctly in the CSS stylesheet oxygen-webhelp\resources\skins\desktop\toc.css:

Code: Select all

h1:before {

	display:inline;

	content:url('../../img/logo2.png');

}

but there is no file logo2.png in folder oxygen-webhelp\resources\img. If I add a file logo2.png in this folder the logo image shows up correctly in the title area.


Regards,
Sorin

[sorin_ristache]

Hi Julio,

I tried this:

Code: Select all

#productTitle

{

   background-image:url(mylogo.png);

   background-repeat:repeat;

}

This didn't work at all. I did try using div#productTitle with the same result. The other problem is that this won't work for the other format of webhelp because that div doesn't exist.

Thank you for the files. The only modification that I needed to make in your files was to set the correct path to the custom CSS file, that is:

Code: Select all

HP_style_CHM.css

instead of:

Code: Select all

C:\hp\Customization-hp\Customization-hp\html\common\css\HP_style_CHM.css

Please set a relative path as the value of the args.css parameter in the Webhelp transformation, that is:

Code: Select all

args.css = HP_style_CHM.css

The hp-logo.png image is already added correctly using a relative path in the custom CSS stylesheet:

Code: Select all

#productTitle h1:before 

    {

        display:inline;

        content:url(oxygen-webhelp/resources/img/hp-logo.png);

        width:80px;

        margin-left:10px;

    }

Regards,
Sorin

[jvazquez]

That worked, Sorin but the other version of the webhelp (index_frames) doesn't get the logo. How can that be fixed?

[mcverma]

Thank you for the files but the output folder (or any subfolder) does not contain a file called logo2.png. I can see that you display the image correctly in the CSS stylesheet oxygen-webhelp\resources\skins\desktop\toc.css:

Code: Select all

h1:before {

	display:inline;

	content:url('../../img/logo2.png');

}

but there is no file logo2.png in folder oxygen-webhelp\resources\img. If I add a file logo2.png in this folder the logo image shows up correctly in the title area.

Hi Sorin,

First of all, thank you for all your patience.

I have recreated all the source files for Webhelp putput, added a new logo, generated the output with both #productTitle hi: before and hi: before pseudo-elements, but neither option works.

I also changed the file path to point to the Resource>Img folder of the output to no avail.

The LOGO2.png is in the Resource>Img folder, but it doesn't display in the output.

I have sent you the new set of zipped files.

Hope you can help with this.

Cheers

[sorin_ristache]

I have recreated all the source files for Webhelp putput, added a new logo, generated the output with both #productTitle hi: before and hi: before pseudo-elements, but neither option works.

I also changed the file path to point to the Resource>Img folder of the output to no avail.

The LOGO2.png is in the Resource>Img folder, but it doesn't display in the output.

I have sent you the new set of zipped files.

I looked in your Webhelp output files but there is only one h1:before in default.css. There is no #productTitle h1:before and no h1:before in the files that you sent. Maybe you modified other toc.css file, not the one from directory [Oxygen-15.0-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\desktop, and that is why your #productTitle h1:before and h1:before do not show up in any output file?


Regards,
Sorin

[sorin_ristache]

That worked, Sorin but the other version of the webhelp (index_frames) doesn't get the logo. How can that be fixed?

Just add the same h1:before code in the toc.css stylesheet from directory [Oxygen-15-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\desktop-frames. You want to set a style in the version of Webhelp output with frames (index_frames.html) so you have to add your style to the CSS stylesheet from the resources\skins\desktop-frames directory, not the resources\skins\desktop one. If the image exists at the location set to the content property then it will be visible just before the main title in the left side frame of the browser page:

Code: Select all

h1:before {

    display:inline;

    content:url('../../img/myLogoImage.png');

}

Regards,
Sorin

[jvazquez]

I'm trying to avoid updating the base plugin. However, I did try this without success. I'm wondering whether the fact that the page appears to be generated by js may be what's hampering getting the logo on that version.

[sorin_ristache]

Hi Julio,

You don't have to modify the base Webhelp plugin, you can add the image logo in a custom CSS that you set with the parameter args.css in the DITA Map Webhelp transformation.

The title area is not generated by JavaScript code. It does not matter that the page contains JavaScript code, the CSS style will be set by the browser. Does the CSS included in your output Webhelp page contain the h1:before CSS code? Can you send us your entire output directory to see if it has the right content? Where did you added the h1:before code, in what CSS file?


Regards,
Sorin

[mcverma]

I looked in your Webhelp output files but there is only one h1:before in default.css. There is no #productTitle h1:before and no h1:before in the files that you sent. Maybe you modified other toc.css file, not the one from directory [Oxygen-15.0-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\desktop, and that is why your #productTitle h1:before and h1:before do not show up in any output file?

Sorry about the delay in responding...I added the pseudo-element in the TOC.css file, but the logo is still not showing up. I must be doing something wrong. I have uploaded the output files again. Do help, if you can.

[sorin_ristache]

Sorry about the delay in responding...I added the pseudo-element in the TOC.css file, but the logo is still not showing up. I must be doing something wrong. I have uploaded the output files again. Do help, if you can.

I opened your Webhelp files in both the Firefox and Internet Explorer browsers and the logo image is displayed correctly next to the main title, please see this image (the internal frames version) and this image (the frameset version). In what browser did you open these Webhelp files? On what platform?


Regards,
Sorin