Hey, first of all, as one of many users, I woud like to say Floatbox is THE best lightbox-like script ever!

Well... let's get to the point.

It's not really an issue, but I'm finding myself struggled in creating a custom theme in floatbox.css or inline, I thought that would be a good idea to separate all theme related parameters into one CSS file for each theme availabe and then making the script call that file according to the theme option.

EXAMPLE - Let's say I'm setting page-specific options, with theme set to blue, like this:

<script type="text/javascript">
  fbPageOptions =  {
    theme:&#039;blue&#039;,
  };
</script>

So the script would catch that and call a CSS file called "fbTheme_Blue.css" (that's only a name suggestion!) containing all the parameters related to that specific theme.


IMHO... Maybe this is a better approach to the theme feature, because it will allow a optmized managment of themes letting the user edit JUST the CSS file specific to that theme and keeping floatbox.css safe and sound.

Developer(s): Please forgive me if you already thought in this approach and did not adopted it for some reason. If possible, just try to give some explanation regarding this subject.



Thanx!!!!

Hi Caio,

I very much appreciate suggestion from the community, and most of them end up getting implemented, but I'm not seeing much bang for the buck on this one. Here's some things on the downside:

Adds complexity. Wherever possible, simple is best and dynamically adding css files is not the simplest approach.

Probably won't work everywhere. My gut tells me that some older browsers will not correctly update with dynamic css includes. I strongly suspect there will be trouble with IE6 and some other older browsers. The amount of testing involved for all different browsers and different platforms is far from trivial.

Need to keep the same strategy of assigning "*_color" ids to floatbox elements because you can have more than one floatbox open at a time, and they can use different color themes at the same time. (So there is no simplification of the css, it would just be spread across many files instead of one.)

If you're modifying the floatbox css, you are modifying the distribution files to the same extent whether it is in one or multiple files.

I'm not sure exactly why you are struggling with a custom theme, but let me offer some pointers about the floatbox css.

First, the only thing you should be changing in there is the colors that are assigned to the various themed elements. These entries are commented in the css and all have the "*_color" format for names. (Some of these entries are direct color references, and some are background image references for the different coloured gifs used on the control widgets.)

Resist the temptation to change anything else in the css. Everything in there has a purpose and changing settings may not break the browser you are testing with, but will likely break something in at least one browser somewhere.

Floatbox layout is mostly done in the code and not in the css. Other than custom colors in the css, use the 50+ configuration options to control appearance and layout. Most of what you probably want to customize can be managed through these options.

I hope this helps...

Hey thx for the reply!

After your explanation, be sure I will spend more time playing with the config options.

So far, all I want is a more complex interface (floatbox window) with some images, maybe, for border, close button, nav buttons and something else I don't remember right now.

Thx and if I have another question or suggestion, I'll post it.