Page 1 of 1
Add Logo to WebHelp
Posted: Thu Mar 21, 2013 1:12 am
by 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
Re: Add Logo to WebHelp
Posted: Thu Mar 21, 2013 2:05 pm
by 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
Re: Add Logo to WebHelp
Posted: Thu Mar 21, 2013 8:15 pm
by 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
Re: Add Logo to WebHelp
Posted: Fri Mar 22, 2013 10:07 am
by sorin_ristache
Hi Paul,
Yes, that is correct.
Thanks,
Sorin
Re: Add Logo to WebHelp
Posted: Tue Jul 30, 2013 9:55 pm
by 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
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 10:36 am
by 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
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 3:11 pm
by 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?
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 5:42 pm
by 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
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 6:07 pm
by 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.
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 8:38 pm
by mcverma
Hi Sorin,
sorin wrote:
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.
sorin wrote:
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.
sorin wrote:
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.
sorin wrote:
What Oxygen version do you use?
Oxygen 15
Thanks again for your help.
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 9:05 pm
by jvazquez
sorin wrote: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.
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 9:19 pm
by mcverma
jvazquez wrote: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.
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 11:18 pm
by jvazquez
mcverma wrote: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.)
Re: Add Logo to WebHelp
Posted: Wed Jul 31, 2013 11:39 pm
by 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.
Re: Add Logo to WebHelp
Posted: Thu Aug 01, 2013 3:22 pm
by sorin_ristache
mcverma wrote:I can also see the logo in the output folder.
sorin wrote:
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
Re: Add Logo to WebHelp
Posted: Thu Aug 01, 2013 3:43 pm
by sorin_ristache
Hi Julio,
jvazquez wrote: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:
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:
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
Re: Add Logo to WebHelp
Posted: Thu Aug 01, 2013 4:16 pm
by jvazquez
That worked, Sorin but the other version of the webhelp (index_frames) doesn't get the logo. How can that be fixed?
Re: Add Logo to WebHelp
Posted: Thu Aug 01, 2013 5:53 pm
by mcverma
sorin wrote:
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
Re: Add Logo to WebHelp
Posted: Fri Aug 02, 2013 1:15 pm
by sorin_ristache
mcverma wrote: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
Re: Add Logo to WebHelp
Posted: Fri Aug 02, 2013 3:09 pm
by sorin_ristache
jvazquez wrote: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
Re: Add Logo to WebHelp
Posted: Fri Aug 02, 2013 11:05 pm
by 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.
Re: Add Logo to WebHelp
Posted: Mon Aug 05, 2013 10:25 am
by 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
Re: Add Logo to WebHelp
Posted: Sat Aug 10, 2013 12:07 am
by mcverma
sorin wrote: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.
Re: Add Logo to WebHelp
Posted: Tue Aug 13, 2013 2:52 pm
by sorin_ristache
mcverma wrote: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