Start Building Professional
Web Apps Today

dynamic styling

Hello,

I want to know (for your latest rel3 compoenents), if there's a way for us to easily propages global changes to your predefined styles dynamically. More precisely, we wish to allow our clients to have an option on a webpage to change say, all the FONTs to size 10 or all FONT-FAMILY to arial.

Pretty much we want to implement what you guys showed as a sample, under your dhtmlx v2 menu component where theres a 'settings' menu that the user can change the styling of the webpage.


Is there any way hard/easy to do this? without having to write predefined css files that overwrite the original ones???
Btw, we plan to have 99% of our webapp ui built with your components, so we only expect the dynamic styling to propagate all the changes to all dhtmlx components within the main dhtmlx layout object

Thank you,

>>we wish to allow our clients to have an option on a webpage to change say, all the FONTs to size 10 or all FONT-FAMILY to arial.
The styling of component splitted in many different styles, and adjusting necessary ones dynamically may be problematic.
Component doesn't provide ready solution, but it possible to create the new css rules through the script , with existing names, which will modify existing rules. So you can adjust existing rules dynamically.

>>the dynamic styling to propagate all the changes to all dhtmlx components within the main dhtmlx layout object
You can define a custom skins for all component and redefine them instead of separate styles. It would be possible to create a code which update skins for whole layout as single operation, but it will not work for separate styles. Separate styles will need to be updated one by one, which is pretty big peace of coding. 

hello,

thanks for the reply...is it possible to provide some code snippets for implementing your suggestions.

For example, assume that we use your dhx_blue skin for ALL dhtmlx components we use. How would we be able to go about to change just the font-family or font-size of all the components? (with pure javascript)

As far as i understand your 1st suggestion, i thought about that too...but how can i do the overriding of the existing rules? The problem is about finding and selecting those specific rules!


Any suggestions are welcome on this...really hoping to be able to get this to work!


Thanks,

josh

>>How would we be able to go about to change just the font-family or font-size of all the components? (with pure javascript)
In skin based solution you will need to create a custom skin fo any vairation of font-size|font-family and use setSkin api call to change the look of component to the new one. 

>>but how can i do the overriding of the existing rules?
Sample attached

>>The problem is about finding and selecting those specific rules!
Yep, it may be problematic, currently only grid's styles fully documented.