Supporting multiple custom colorThemes

Page: 1

Author Post
Member
Registered: Feb 2014
Posts: 1
Hi,

Just a small changed request. We had a need for multiple custom themes.

In v4 we simple used the other colors as these also added additional CSS classes so we could customise them. In v6 the colors do not add additional CSS classes, only 'custom' does.

So in v6 we no longer have the ability to use multiple custom themes.

The change I would like made is for (in the minified code) "custom"==xw be changed to "custom"==xw.substr(0,6) so any colorTheme beginning with "custom" works. This would allow us to do 'custom1', 'custom2' etc, without breaking backwards compatibility.

Is this something that can be included in the next dot release, or is there another way I can do this? (until then I'll just edit the minified JS)

Cheers

- Mike
Administrator
Registered: Aug 2008
Posts: 3382
The custom color theme isn't a great way to configure floatbox colors now that there's a bunch of color settings right in the options. It's really only useful if you want to use customized graphics as the background images for the various control widgets.

Use classOptions, and color preferences assigned to those class options. For example, you might add the following to your options.js file.
customColor: {
colorTheme: 'white', // for the controls backgrounds
overlayColor: '#1b2642',
boxColor: '#eed39e',
outerBorderColor: '#da7b4d',
innerBorderColor: '#da7b4d',
textColor: '#555',
strongTextColor: '#000'
},
contentBackgroundColor and boxBackgroundImage could go in there too if you want.
(Remove the final comma if this is the last entry in the classOptions section.)

Then simply assign that class to a floatbox link to assign those colors to its floatbox. You can put the class name directly in the class attribute (class="customColor") or in the options (data-fb-options="className:customColor ...")

Now you don't need to fiddle with css and you don't need to load the custom.css file. And you can of course setup as many different classes as you want.

colorTheme:custom is very much legacy for old versions and is not a recommended approach.
Member
Registered: Nov 2014
Posts: 9
Hi,

although styling via your Options and the class-based Options pretty much allowed me to match our one layout, I'm concerned about achieving our other layout where gallery control elements are placed at different positions.

Thus +1 for multiple custom colorThemes (with class-name based scope?).
Administrator
Registered: Aug 2008
Posts: 3382
If I'm understanding you correctly, you would just use the various positioning options to put the controls where you wanted. For example, "controlsPos:tr".

The classOptions can assign any of the available Floatbox options, not just the ones for color.
Member
Registered: Nov 2014
Posts: 9
not quite. I need top put the "prev" control on the left side of the content and the "next" control on the right side, for a gallery, while the close should be 'tr', but over the tr corner, not inside the "padding area". Also, I need to build a pagination, but this is just my task list :-).
Administrator
Registered: Aug 2008
Posts: 3382
The Options Reference is the definitive list of the available options for modifying the floatbox's appearance, behaviour and layout. It tells you what can be customized and how to do it.

Here's a few that pertain to what you are asking about:
Quote
navType - 'overlay' | 'button' | 'both' | 'none'
Sets the type of navigation controls to display. 'overlay' is the "Prev/Next" image overlay.' 'button' gives "<<prev||next>>" in the controls area of the floatbox frame. Overlay navigation is not available for html and multi-media content, just for images.

centerNav - true | false
The controls are positioned in one of the box's corners. Usually the < prev || next > controls are right beside the close button. With this option you can move the nav controls to the center of the top or bottom border area, away from the close button.

showClose - true | false
Enables/disables display of the close button in the floatbox border area.

showOuterClose - true | false
Enables/disables display of the round external close button that can be shown at one of the top corners of a floatbox.
Member
Registered: Nov 2014
Posts: 9
Thank you very much! (we show inline html for which there is no nav overlay, but I managed to build my own using your API and changing overflow and sizes and moving overflow to my inline html.)

Page: 1