XF 1.0 Playing With Color

In a previous video, we looked at various style property options and also touched briefly on the XenForo color palette.

The color palette is an integral part of the style property system, and so it is open and extensible, allowing interaction and extension through the add-on system.

This video shows an add-on defining a new color and adding it to the global palette, and then shows a few of the tools XenForo provides for quickly and easily manipulating the palette, so that administrators can create the basis for new styles in seconds.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

View the video at full-size by clicking the full-screen gadget in the bottom right of the control bar.

 

[Poltergeist]

You can easily import and export styles in XenForo.

Very cool. Looking forward to learning xenForo when I'm setting it up on one of my sites.

 

[---MAD---]

Amazing work!

 

[feldon30]

XenForo have once again completely leapfrogged the competition.

Color customization in vBulletin started out simply in 2.0 series (and presumably 1.0?) with a color control panel. We could change the color of all elements. It made sense because it was about 40 colors. vBulletin 3 went the route of a large color/style sheet where we could change every color independently. This increased the number of color swatches exposed to the user to nearly 150. vBulletin 4 should have been when someone said "whoa! we need to do something different". Instead, they headed down the same road, implementing nearly 400 stylevars/color parameters.

Kier obviously realized that each forum has a color palette of about 15-20 colors which are reused throughout. Most forum admins will never need the ability to independently change 150 or 400 colors. But, that functionality is always available to them by simply breaking the inheritance and modifying the CSS directly.

Also, the ability to shift the hues of an entire style, or one sub-palette of a style is absolutely genius. In the past, I've taken a screen shot of a style, dragged it into Photoshop, and used color replace until my eyes bled to try to get a new style that looks good. And I've made use of websites that help you pick 3-4 complementary colors. You've replaced all that work with a slider.

I was wondering when I watched the Style Inheritance video how you would indicate that a property has been customized in this style. In the past it's been either red text, or a thick border, and our only option has been to Revert an entire section of colors or other CSS properties. Here, you pick the colors/elements to revert, and click go. Genius UI design.

XenForo looks to be just FUN to customize.

 

[Mez]

Yay for automated lilification

 

[wanchope]

This sounds Nice to Me.I don't have $$$ but I gonna borrow.I gonna borrow.I gonna borro!!!

 

[Erik]

XKier obviously realized that each forum has a color palette of about 15-20 colors which are reused throughout. Most forum admins will never need the ability to independently change 150 or 400 colors. But, that functionality is always available to them by simply breaking the inheritance and modifying the CSS directly.

I believe you can add or remove colors as well, so themes can have as many or as few color swatches as they want.

 

[CallieJo]

This is beautiful! Simply beautiful! Great job!!

 

[Paul B]

Apart from the forum images

and the unread image

what other images are there?
I suppose there are also the sticky, locked icons and also the attach icons, page icon, etc. although they're far more generic so in theory shouldn't need changing.

Whilst the css based colours are easy to change thanks to the Style Properties system, it's going to be much more difficult to get icons to match.

I'm wondering whether it might be possible to either use pure css & html to create some of these or to drop them altogether as my graphic skills are decidedly lacking.

 

[Erik]

Apart from the forum images

and the unread image

what other images are there?

I suppose there are also the sticky, locked icons and also the attach icons, page icon, etc. although they're far more generic so in theory shouldn't need changing.

There are a number of transparent gradient images. However, these work with the custom-color CSS and shouldn't need changing for simple color changes.

Whilst the css based colours are easy to change thanks to the Style Properties system, it's going to be much more difficult to get icons to match.

I'm wondering whether it might be possible to either use pure css & html to create some of these or to drop them altogether as my graphic skills are decidedly lacking.

I've actually tried thinking this through and experimenting with it in theory, and the short answer is that for complex shapes (i.e. not circles, triangles, rectangles, or rounded rectangles - for these will can use standard block elements and some CSS tricks), it is pretty much impossible. While you could use the canvas tag, there is no solution that exists currently that will work in all browsers without any sort of hacks.

 

[Paul B]

There are a number of transparent gradient images. However, these work with the custom-color CSS and shouldn't need changing for simple color changes.

Yes, I've seen those in action in Firebug.
I'm not going to pretend I understand how they work though

I've actually tried thinking this through and experimenting with it in theory, and the short answer is that for complex shapes (i.e. not circles, triangles, rectangles, or rounded rectangles - for these will can use standard block elements and some CSS tricks), it is pretty much impossible.

That's what I thought.
I might just replace the speech bubbles with a basic shape and use the same transparent css effect as the other elements.
I just know that whatever I do in PSP is going to result in something nasty looking

 

[Peggy]

I just know that whatever I do in PSP is going to result in something nasty looking

awww now, you never know til you try.

 

[Paul B]

awww now, you never know til you try.

I have done.

Trust me, it wasn't pretty

 

[Peggy]

I have done.

Trust me, it wasn't pretty

So try, try again!

 

[atomjani]

I have some idea.
We can add permission for groups. Example john is in registered groups. He can creating new style and he can use it. The other group members can't create new style style. And he can sent the new style to admin. Admin seeing and admin can aprove the style. After the other members can use this style.

 

[Dad.]

That is just remarkable.

 

[Shelley]

Literally you can make a fully fledge style colour change within 30 seconds and that is no exaggeration. What would have taken you hours to do with other solutions in re-colouring gradients, Getting the right blending modes perfect can be done in a fraction of the time with the new style system. It's simply amazing and such a huge time saver not to mention even novices will find it extremely easy to make colour changes. Click, done. click done, click done (30 seconds later) save = style colour change. Great work.

 

[Robert F Schmitz]

And to think what I need to currently go through. This is why I plan to get a license tomorrow.

 

[ghostwriter]

well played.

 

[jeniverre]

Now this is awsome! =)

 

[Pope Viper]

This is not current functionality within XF? If not (and I've not delved deeply into the admin side due to RL overwhelming me), when can we anticipate it coming out?