6 Replies Latest reply on May 20, 2010 5:32 AM by Captiv8r

    Need help with WebHelp skins - top nav button padding

    Nick@Tag Level 2

      RH8 HTML

      hi all

       

      I'm working on a csutom skin for a client, and I'm running into a couple prioblems.

       

      The top nav area, Contents, Index etc etc has been made but between the buttons I get spacing. All around them infact, above, below and between. The main issue is the spacing between the buttons, its causing me problem because the buttons when all joined have a banner of text reading across them, with this spacing it of course looks broken and seperated.. Im sure I've taken it out before, but I cant seem to do it.

       

      Any help greatly appreciated!!!

       

      ~Nick

        • 1. Re: Need help with WebHelp skins - top nav button padding
          Willam van Weelden Adobe Community Professional & MVP

          Hi,

           

          The buttons in the toolbar are placed within a table. The html file holding the bar is whskin_tbars. The table is build in whtbar.js. You can change the styling and padding by modifying the styling in the function writeStyle(bMiniBar) in whtbar.js.

           

          The class of the table that holds the buttons is 'clsToolbarBackground'. (You can also add a css file to the topic, but the script inserts a style block. You'll need the !important declaration to overwrite the styling from the script.

           

          Greet,

           

          Willam

           

          This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

          • 2. Re: Need help with WebHelp skins - top nav button padding
            Nick@Tag Level 2

            Thanks for that Willam, very useful indeed. I have been able to remove the padding around the buttons.

            Im coming up against a weird problem though,

             

            I have a background image set in the skin, repeating across the top of the toolbar, simply carrying along the same gradient style from the buttons.

            But this does not line up with the button at the bottom of the toolbar area.

             

            In IE8 it looks perfect, however FF and Chrome and both rendering this with a small gap. Not sure if it’s a browser issue, or an additional setting.

             

            Maybe you've encountered this before?

             

            Thanks again, your help already has been very very useful.

             

            This e-mail has been scanned for all viruses by Star.

            • 3. Re: Need help with WebHelp skins - top nav button padding
              Willam van Weelden Adobe Community Professional & MVP

              Hi,

               

              Can you post a pictrue of how it looks in IE and FF? I know that IE renders the heading slightly different that FF, but I don't know what you need. There was an issue with FF before and a little tweaking in the javascript solved it. But I'll need to know exactly what you want to change.

               

              Greet,

               

              Willam

               

              This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

              • 4. Re: Need help with WebHelp skins - top nav button padding
                Nick@Tag Level 2

                Capture1.gif

                Capture2.gif

                 

                 

                 

                You can see that in FF at the last button the alignment is dropping. The same is true for Chrome. Yet IE is going fine. I changed the height of the image that is being used there, it fixes it, not very nicely in FF and Chrome, but then of course it moves out of alignment - not really a solution.

                 

                Any tips will be greatly aprpeciated.

                 

                Thanks,

                Nick

                • 5. Re: Need help with WebHelp skins - top nav button padding
                  Willam van Weelden Adobe Community Professional & MVP

                  Hi,

                   

                   

                   

                  There are two approaches. You'll have to check which one works for you:

                   

                  1. position the buttons only

                   

                  2. position the entire table with the buttons.

                   

                   

                   

                  1. If you only position the buttons, you’ll leave the rest of the rendering intact. Open whtbar.js and go to line 278, the function getImage. On line 290 there’s a line sI+=”border=0 align=\”absmiddle\”>”;. Replace this line with:

                   

                        sI+=" border=0 align=\"absmiddle\" ";

                   

                        if(gbIE == false)//Not Internet Explorer

                   

                              sI+="style=\"position: relative; top: -1px; ";

                   

                        sI+=">";

                   

                  Replace the value -1px until it renders correct.

                   

                   

                   

                  2. The second option is to completely move the table. In whtbar.js, go to line 148, the function writeStyle. On line 247, replace sStyle+="margin:2px;}\n"; with:

                   

                  sStyle+="margin:2px;";

                   

                        if(gbIE == false)//Not Internet Explorer

                   

                              sStyle+="position: relative; top: -1px;";

                   

                        sStyle+="}\n";

                   

                   

                   

                  Two notes:

                   

                  ·         Both modifications target all browsers other than Internet Explorer. To target specific browsers, check the variables you can use in whver.js.

                   

                  ·         Changing either one of these functions will also change the minibar! So double check for the desired result! Hope this helps.

                   

                   

                   

                  Greet,

                   

                   

                   

                  Willam

                   

                  This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

                  • 6. Re: Need help with WebHelp skins - top nav button padding
                    Captiv8r Adobe Community Professional & MVP

                    Hi Willam

                     

                    I was looking at this and pondering something. You say "Position the buttons only". I'm not sure if I'm repeating what you just said of if my proposal is different. You be the judge. Apologies if I'm way off base here.

                     

                    What I would do is just have the single background for the main toolbar with the line across. Then I would use button images where only the main icon appears along with the text.

                     

                    Similar to below. Left side is probably the way it is today and the right side is proposed. The red area would be simply rendered as transparent with whatever you used to create the button images. This way the button icons would just float on the background and one would have no concern about alignment.

                     

                    tmp1.PNG

                    Cheers... Rick

                     

                    Helpful and Handy Links

                    RoboHelp Wish Form/Bug Reporting Form

                    Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!

                    Adobe Certified RoboHelp HTML Training

                    SorcerStone Blog

                    RoboHelp eBooks