Customise Outer Close Button

Page: 1

Author Post
Member
Registered: Dec 2009
Posts: 39
Hi - just upgraded to 7.2.0 - great job!

I hesitate to say "this might be useful for others", until you've given your seal of approval ;)

I needed to "customise" the Close Button (showOuterClose: true) - I couldn't find any relevant documentation, but, from experimentation, I think the following applies:-

1) The outer "crossed circle" takes its colour from textColor: ....

2) .... which changes to strongTextColor: on hover ....

3) .... while the background colour is always boxColor:

In my application I wanted to create a Close Button that didn't use the default colour scheme, so I added this to my page:-

<style>
a.nofloatbox.fbOuterClose.fbx
{
color: red !important;
background-color: white !important;

}
a:hover.nofloatbox.fbOuterClose.fbx
{
color: blue !important;
}
</style>

It works for me, but if this isn't acceptable, or there's something in the Options that I've missed, please let me know.
« Last edit by springknees on Wed Jun 08, 2016 6:56 am. »
Administrator
Registered: Aug 2008
Posts: 3381
Looks good to me too, almost.

Kudos for putting it in the page CSS and not modifying floatbox.css. Less risk of side-effects and, most importantly, it won't get trashed when Floatbox is updated.

The only thing is, you've got !important on those styles so you don't need the hyper-specificity of stringing all those class names together. And there's no guarantee the 'nofloatbox' and 'fbx' classes will persist through all future versions. This simpler and more readable rule-set is enough to get the job done:
.fbOuterClose
{
color: red !important;
background-color: white !important;

}
.fbOuterClose:hover
{
color: blue !important;
}
Member
Registered: Dec 2009
Posts: 39
One day I might possibly get my head around css.

In the meantime, I flounder about, and only stop tinkering when things appear to work. If I'd spent a little more time, I might conceivably have hit upon your elegant mark-up, but I doubt it :D

Any kudos should be reserved for you, for having spent a year slaving to get this latest release for us to use!

Many thanks.
Administrator
Registered: Aug 2008
Posts: 3381
Thank you, for the opportunity to use the word "hyper-specificity".

Page: 1