changing colors for topic & nav panels (html5)

[sellarush]

(Note: I'm new to flare, but not to html/css)

I want to change the colors of the containers for the topic and navigation panes, which requires setting properties for several different classes using the Skin Editor. I've been able to change *all but one* element: the navigation panel container. Can someone help me figure out that last puzzle piece?

In the Skin Editor: Styles tab, MC provides great screenshots delineating what each style & property covers (you can see them here: http://webhelp.madcapsoftware.com/flare ... _HTML5.htm), but I cannot find any style that covers this element. The navigation panel container is the counterpart to the topic panel container (style: Topic Container). It's the visual border around the tabs, runs underneath the tab labels, and surrounds the Nav show/hide button. (see attached image--it's that pale blue border contrasting the crazy colors). There's a Navigation Panel style, but it doesn't cover this particular piece.

When I bring up my help in Firefox & use Firebug, I can select the Nav container and locate the class controlling it: "tabs-panel". I'm able to change the background color property for that class in Firebug, so I know that's the right class, but there's no tabs-panel style in the Skin Editor or in styles.css.

Would appreciate any suggestions. It's probably something ultra simple that I'm missing. (For example, are there skin themes or templates that let you quickly apply global color schemes without having to bit fiddle all the individual elements?) Thanks!

(whoops, just found the skins gallery http://www.madcapsoftware.com/downloads ... llery.aspx , but still want to know how to change the Nav panel container element, Thanks)

[doc_guy]

Hey, Sellarush, welcome to the forums.

This is the setting you want to change:

styles.png

There are two settings here. One is Background Color. This is used in non-CSS3 browsers (Internet Explorer). The other setting "BackgroundGradient" is what is used by CSS3-browsers (everything but IE).

Have you tried setting both of these?

-Paul

[doc_guy]

Oh. Relooking at your image, I'm thinking that at least one of these is set to the yellow color in the active tab. Make sure both are set to the yellow color, and then see if that fixes it. Next, check it in multiple browsers and see if the problem persists in more than one browser.

-Paul

[sellarush]

Yep, that was it! Thanks. I got into trouble misinterpreting how style inheritance was working re Navigation Tab and Navigation Tab:TOC.

[doc_guy]

Yep, that was it! Thanks. I got into trouble misinterpreting how style inheritance was working re Navigation Tab and Navigation Tab:TOC.

A *very* easy mistake to make! One I made many, many times until I finally understood what was happening here.

[jimgilliam]

cantfindthissetting2.PNG

cantfindthissetting.PNG

Paul, I have changed this setting, and it's still not changing the container element. I've added an attachment. I'm using IE9.

Hey, Sellarush, welcome to the forums.

This is the setting you want to change:

styles.png

There are two settings here. One is Background Color. This is used in non-CSS3 browsers (Internet Explorer). The other setting "BackgroundGradient" is what is used by CSS3-browsers (everything but IE).

Have you tried setting both of these?

-Paul

[Paul Griffiths]

I'm trying to do this too, with no success so far. Can anyone provide updated instructions for Flare 10? Many thanks.

Or is there no way to do this in Flare, and I need to load an external skin.css?

[Charlie Nickell]

I had the same problem. I changed the color in the skin editor but it didn't take effect. Also, I couldn't find any Navigation styles in the Stylesheet Editor. Where are they?

My workaround was this:
1. Right-click the skin file in the Project Organizer and select Open with > Internal Text Editor.
2. Open the Find and Replace window. Tick the checkbox next to Find in source code.
3. Find: the hexcode of the color you want to change. Replace with: the hexcode of the color you want to see.
4. Find and replace as you wish.


I figured out the hexcodes for the colors I wanted to replace by building the project and opening it in a Chrome window. Right-click on the color you want to change and select Inspect element. All the hexcodes are in the Styles box at the bottom of the Elements window.

Hope this helps