Need help with WebHelp skins - top nav button padding

[Nick27]

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

[Willam_van_Weelden]

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.

[Nick27]

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.

[Willam_van_Weelden]

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.

[Nick27]

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

[Willam_van_Weelden]

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.

[Captiv8r]

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.

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