Change the Slider Left and Right Buttons on the Top Navigation Skin

As an online help interface, I really like Flare 11's 'Top Navigation' skin. It looks modern and doesn't use frames, but it does have some limitations when it comes to editing the user interface. One of these is the inability to change the slider buttons that allow users to scroll through the slider images. This is especially frustrating as MadCap's choice of colours for the default slider images aren't particularly effective with their own demo design, as you can see below.

Let's be clear on this - when I mention the slider left and right buttons, I'm referring to the small circular images with chevrons on, not the larger circles in the slider itself (there is an interface for changing those).As you can see from the image of the default buttons, the grey-on-grey isn't a fantastic choice, given the grey background, but at least it is complementary. But if you are using a different colour background, the grey left and right slider buttons can really look odd. Unfortunately, there's no slider setting that allows you to change the graphics or alter their colours - frustrating!

You Can Customise the Left and Right Slider Buttons

Just because there's not an easy-to-use slider left/right setting in Flare 11, that doesn't mean you can't change the buttons. You can swap them out for different graphics (as shown below), but it gets a little bit fiddly and you need to dig deep into the bowels of Flare itself. So brace yourself.

The easiest way to change the left and right slider buttons is to:

1. Go into the Output folder after the build has taken place.
2. Find Skins > Default > Stylesheets > Images > MCSlider_Controls.png. That png file is the slider buttons.
3. Either edit the MCSlider_Controls.png file in a paint program or add your replacement graphic to this folder. Rename the existing MCSlider_Controls.png file and give your replacement file the MCSlider_Controls.png name.

But this way of making the changes post-compilation sucks, because you will need to re-do it every time you rebuild the output. I don't know about you, but I'd prefer to side-step that extra hassle.So here is the way to do it once, and then never have to worry about it again:

1. In Windows Explorer, browse to the Program files folder (Program Files or Program Files (x86) ) and then find:MadCap Software\MadCap Flare V11\Flare.app\Resources\WebHelp2\Desktop\Skins\Default\Stylesheets\Images\MCSlider_Control.png.Make sure you have administrator privileges on this location, as you are going to need to add, rename, and move files. You may need to change the permissions on each folder, so it is a good idea to make a note of what security restrictions are currently in place before you change them.
2. Copy that MCSlider_Control.png file and rename it to something like Original_MCSlider_Control.png. You need the copy so that if you ever decide to go back to using the default grey images, you have them stored in a safe place.
3. Now, you can either edit the MCSlider_Control.png file to meet your requirements or you can copy your own image to this folder, and then rename your own image to: MCSlider_Control.png. Remember that the background of the image needs to be transparent, otherwise you will get an ugly block where the edge of the button image overlaps the background.
4. When Flare 11 builds the output, it takes the MCSlider_Control.png from this location and 'injects' it into your Output folder. As you have replaced or edited the MCSlider_Control.png image, it will 'inject' your edited version rather than the original. And it will do that every time you build your online help.

Remember, if you build a different output, Flare will still use the MCSlider_Control.png that exists in the Flare WebHelp2 directory. You will need to go back and swap/edit it if your custom version is unsuitable for another project. Sadly, this is something you will need to do each time you build a project that needs different slider left and slider right buttons. (Unless you can write a program to swap them out automatically, which I am sure is possible).If you are happy with your new buttons and can't imagine you'll need to change them again, it is a good idea to go back and re-apply the security restrictions on the Flare folders.

But It's Not Just the Slider Left and Slider Right Images?

Ah, eagle-eyes! You've spotted that the folder that contains the MCSlider_Control.png file also contains other images. Can you do the same thing with those, and swap them out for alternative images? Yes, you sure can. But as always, make sure you back up the original images first, otherwise you'll lose them forever and be unable to go back to Flare's default files (unless you reinstall and who wants to do that?).