Two Logos in Webhelp, iFrames Responsive, Blue.hmskin

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
Gerold Krommer
Posts: 113
Joined: Fri Mar 06, 2015 12:09 pm

Two Logos in Webhelp, iFrames Responsive, Blue.hmskin

Unread post by Gerold Krommer »

Hi,

after a lot of hassle with CHM (every MS patch gives a problem, grr!) I have decided to move to the eWriter Format. As this is in the middle of the project I'm A LITTLE BIT under time pressure :-) and could really need some advice...

I decided to start based on Webhelp, iFrames Responsive, Blue.hmskin.

My customizations are quite ok, I'm failing on three related issues

1. I want my companys logo on the left of the header and the customers logo on the right.
2. The text (project title) should be centered in the window. In the Standard defintion the text is centered between the left (company) logo and the right window border .
3. If the window gets to small both logos should disappear not just one.

Challenge oder am I just overworked and underpaid...?

If it is better to use another skin as the bases I'm open to negotiations.

Kind regards,

/Gerold
User avatar
Tim Green
Site Admin
Posts: 23154
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Two Logos in Webhelp, iFrames Responsive, Blue.hmskin

Unread post by Tim Green »

Hi Gerold,

This is relatively easy to achieve, you just have to know how, and it's a lot easier if you're already familiar with the skin. 8)

First open the Layout template in the skin (Configuration > Publishing Options > WebHelp > Layout) and locate these lines of code:

Code: Select all

#hmheadbox a.logo {  /* Your logo in the top-left corner  */
      float: left;
      max-height: 60px;
      }
Add this directly after it:

Code: Select all

#hmheadbox a.logo.right {  /* Your logo in the top-right corner  */
      float: right;
      max-height: 60px;
      }
I've made this a sub-class of "logo", so that this one will also automatically be hidden when the page is made narrower.

Then scroll down and find the source code that inserts the logo:

Code: Select all

<div id="hmheadbox">
     <a class="logo" href="<%COMPANY-LOGO-LINK%>"><img src="<%COMPANY-LOGO-IMAGE%>" style="border:none" /></a>
Then you want to insert your code for your logo on the right directly after it, like this:

Code: Select all

<a class="logo right" href="<%COMPANY-LOGO-LINK%>"><img src="<%COMPANY-LOGO-IMAGE%>" style="border:none" /></a>
This is an identical copy of the one for the left. The ONLY difference is the class="logo right". Note the space before the word "right" and that both are inside the quotes. That is essential for it to work. You then need to replace the variable references for the link and the image with your own references. Add your logo image to the Baggage of the skin and make sure that its name contains no spaces or special or accented characters.

If you like you could create similar variables for the logo filename and link in the variables section of the skin. Then you wouldn't need to edit the source code again to change them.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Gerold Krommer
Posts: 113
Joined: Fri Mar 06, 2015 12:09 pm

Re: Two Logos in Webhelp, iFrames Responsive, Blue.hmskin

Unread post by Gerold Krommer »

Tim,

as usual 100% accurate and up to the Point. Thanks for saving me a lot of time where I have 'Überfluss an Zeitmangel' (literally : abundance of lack of time).

A minor unrelated issue I have: For aestetic reasons (customers words not mine, to go better with the logos) I changed the Color of the Header background to White (by Setting SKIN-HEADER_COLOR to #FFFFFF) and because the Navigation Icons weren't visible then changed SKIN-ICONS to hm_webhelp_buttons_blue. This had some undesired side effects.. :-)

First of all not only the box on top has a White Background now, but also the top of the Navigation bar and the topic title.
Secondly, the Color of the selected item in the TOC is White (on White) so effectively invisible. If I select another entry the source appears and the selected entry vanishes.

I'm beginning to realize that I cannot call my HTML/CSS Know-how even BASIC...

Thanks,

/Gerold
User avatar
Tim Green
Site Admin
Posts: 23154
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Two Logos in Webhelp, iFrames Responsive, Blue.hmskin

Unread post by Tim Green »

Hi Gerold,

The problem with the SKIN-HEADER-COLOR variable is that it's pretty global. Basically, it gives a quick, one-step way to change the color of the entire theme, because it sets the entire background of all header components. If you want to be more specific you have to edit the actual CSS. You can change the individual colors of the backgrounds of the TOC header and topic header, but this causes a problem: The invisible "handle" a couple of pixels wide for dragging the border between the TOC runs all the way up between the TOC and topic headers. If you change the TOC header color to be different from the main header background color you will see a narrow line of main background color between the TOC header and the topic header. If you change the color of the handle from transparent to the new color of the TOC header, then you will get a narrow line of that color all the way down to the bottom of the page, which also doesn't look good.

The main conclusion of this is: These skins are designed to have the same consistent header color for main header, TOC header and topic header. You can only change that if you're OK with having the narrow stripe of a different color between the TOC and topic headers. To get rid of that would require a significant redesign of this skin type. :?

I can provide instructions for changing the individual header colors if you want; it's not difficult. However, I don't think you'd be happy with the results...
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Post Reply