Mini TOC proxy

[NorthEast]

Next, I changed the font color of the div.MCMiniTOCLink class discussed in this thread. That had no effect, so I tried adding another MCMiniTOCLink class as a child of the a class. I changed the pseudo classes to show specific colors. None of that worked. All of my links still show as blue and underlined.

Setting the colour for a.MCMiniTocLink should work, I tried it on a blank project on my PC and it works fine.

(In the output files, the links use the style a.MCMiniTocLink and they're contained inside a div.MCMiniTocLink.)

[evanarsdall]

Setting the colour for a.MCMiniTocLink should work, I tried it on a blank project on my PC and it works fine.

OK, I noticed that the child I created was named a.MCMiniTOCProxy (all caps in "TOC") in contrast to your use of a.MCMiniTocProxy. Since Flare won't let you rename or remove an inherited child of "a," I opened the style sheet in Dreamweaver and set the name to MCMiniTocProxy. Now I have my green default color and my visited color, but the hover color (lighter green) doesn't work. Any ideas about that?

[NorthEast]

OK, I noticed that the child I created was named a.MCMiniTOCProxy (all caps in "TOC") in contrast to your use of a.MCMiniTocProxy. Since Flare won't let you rename or remove an inherited child of "a," I opened the style sheet in Dreamweaver and set the name to MCMiniTocProxy. Now I have my green default color and my visited color, but the hover color (lighter green) doesn't work. Any ideas about that?

The style is a.MCMiniTocLink, not a.MCMiniTocProxy.

If you have pseudo classes, the order they're listed in the stylesheet is very important - it should be link, visited, hover, focus. E.g. in my stylesheet I have:

Code: Select all

a,
a:link,
a:visited
{
	color: #0067c5;
	text-decoration: none;
}

a:hover,
a:focus
{
	color: #7fb3e2;
	text-decoration: underline;
}

[evanarsdall]

If you have pseudo classes, the order they're listed in the stylesheet is very important - it should be link, visited, hover, focus.

Dave, thanks for bringing up the order. That was the problem.

The Flare GUI shows pseudo classes in the following order: focus, hover, link, visited. If you create a custom class under the "a" category, it automatically lists them in that order, and you can't change the order in the GUI, as far as I know.

So again I opened the style sheet in Dreamweaver and rearranged the order. Now my hover color is showing.

Cheers,

[LTinker68]

The Flare GUI shows pseudo classes in the following order: focus, hover, link, visited. If you create a custom class under the "a" category, it automatically lists them in that order, and you can't change the order in the GUI, as far as I know.

You can't change the order in the Stylesheet Editor because it lists them alphabetically. The trick is to modify those properties in the correct order, because when you modify a style, Flare adds it to the bottom of the stylesheet file. So if you create a custom <a> class, then set the properties for the link pseudo-class first, then visited, then focus, and then hover, then they'll be added to the stylesheet file in that order.

I've put in a feature request before asking Flare to be a bit smarter about that, especially since people knew to CSS and HTML don't know about the order thing.

Right now, I do what you do, except I just use the Internal Text Editor to manually change the order. I should mention that once you have the pseudo-classes in the stylesheet file in the right order, then you never have to worry about them again. It'll hold that order, no matter how many changes you make to the appearance of those classes.

[evanarsdall]

Nice stuff to know, Lisa. Thank you. I sometimes use the built-in text editor to edit the styles, too, but I just happened to have DW open.

I'm glad to know that the changes will stick.