About Box image border

[awargo]

I have our company logo set as the "About Box" image. The picture doesn't have a border but in the WebHelp output it shows a border. I have tried to look through the skin styles and can't find how to take the border off. Could someone please tell me how to get rid of the border if it is possible? Thanks!

[LTinker68]

Double check that the img tag in the stylesheet has the border set to "none" or 0.

[awargo]

Will that change all of the other images in the project? I need my images in the project to have borders, just not the about box image.

[LTinker68]

Yes, it would it for all of them. Try it first, though, just to make sure it does change the appearance of the graphic in the About box. If it does, then you have two options. I'm pretty sure it does, because I always remove the border from the <img> tag and I don't ever remember seeing a border around the image in the About box. But test it anyway.

Option 1, you set the base <img> tag to have a border of none or 0, so that the About graphic doesn't have the border. You then create a custom <img> class that has a border set to whatever, and you apply that class to all the <img> tags throughout your project. That would be a simple find-and-replace in Flare to change <img to <img class="withBorder".

Option 2, you manually modify the MadCapToolbar.js file to apply a border of "0" to the About box. If you change the MadCapToolbar.js in the Flare program files location, then that change will filter down to all projects. If you don't want that change to filter down to all projects, then you modify the MadCapToolbar.js file in that project's output folder so that it only affects that project. But that means you'd have to make the change every time you do a build.

Obviously, Option 1 is the easiest method.

[Ineffable]

I have the same issue with the close button in the Concept Links dropdown. I have a subclass with the border removed, but I can't figure out how to apply it to the close button graphic (CloseButton.gif).

The image defaults to the <img> class, natch, but I can't seem to find out how to edit it, other than the .js file that controls its behavior--way outside my realm of knowledge.

Any advice? I've done quite a few post-build hacks that I am sick and tired of having to manage (i.e., remembering to replace files X and Y in the Output folder).

Thanks.

[LTinker68]

You could try reversing things. Set the base img tag to have a border of 0, then use sub-classes for those images that you do want to have a border. All MadCap features that include hyperlinks or pseudo-hyperlinks (drop-down, togglers, etc.), will use the style from the base img tag which in this case is no border.

[Ineffable]

You could try reversing things. Set the base img tag to have a border of 0, then use sub-classes for those images that you do want to have a border. All MadCap features that include hyperlinks or pseudo-hyperlinks (drop-down, togglers, etc.), will use the style from the base img tag which in this case is no border.

That's a great idea. Why didn't I think of that? (I didn't, which is why I'm on the forum.)

Thanks!

[doc_guy]

Obviously, Option 1 is the easiest method.

Depends on how many images you have in your project.... It also requires you to select the class of image each time you insert an image going forward.

I'd go with option 2, if I were doing it.

[doc_guy]

Of course, with option 2, you will have to re-make the change in the javascript file each time you upgrade Flare. You'll also have to make the change on each computer that you use to build Flare projects.

[NorthEast]

If you need the border to be set on your normal img tags, then there's an option 3 - set a different style for the img tag when it's used inside a concept link box.

Code: Select all

div.MCKLinkBody img
{
	border-style: none;
}