Using css-classes

[dieter]

Hello,
we have problems with designing our Profound applications homogeneous. In the Visual Designer there are many widgets of the same type with different colors and fonts. But there is no "family" of well harmonizing components. So we wish to customize the components. Our web programmer think the best way to customize the layout of the components is to use css classes. Is this the correct approach? If we want to use our own css classes, where should the classes be located? In which directory? Is \profoundui\htdocs\profoundui\userdata\custom the correct directory?

What can we do to use our classes in the Visual Designer? Is it a good idea to create custom widgets for every component we want to use? Can custom widgets "use" our own css-classes so that the custom widgets appear in the Visual Designer in the same layout as they appear in the application?

Our css classes should not have an impact on our Genie sessions.

Can you give me some advices?

Thanks,
Dieter

[Scott Klement]

If you put a CSS under userdata/custom, it will be picked up automatically, and it will be used by both the designer and the runtime of ProfoundUI. Though, you might want to create a directory like userdata/custom/YOUR_COMPANY_NAME, just to be a bit more organized... and that way, it's clear that these are your customizations.

To be a bit more organized, we usually recommend something like

userdata/custom/YOUR_COMPANY/css
userdata/custom/YOUR_COMPANY/themes
userdata/custom/YOUR_COMPANY/widgets
etc

PUI searches out all of the css, js, etc files within all subdirs under userdata/custom, and automatically links them into ProfoundUI screens.

You could use a CSS file in there to override the default styling... for example, you could override the "label" class to change the appearance of a label, and it'd look that way both in your runtime and the designer.

Unfortunately, not all of our widgets are fully controlled by CSS styling. Panels, dialogs, styled/gradient buttons, for example, use images to control their appearance. This gave us the ability to create effects that aren't (or weren't at the time) available in CSS. A lot of that stuff is now available in CSS, but for backward compatibility with older browsers we still use the images.

What might work better for many things is to create a set of custom widgets. Many of our customers will do this by picking a widget and settting up the styling, the properties, etc the way they want them, then they just use their custom widgets, and it's all styled the way they want -- but also has the properties set to the defaults they prefer, which is somewhat more powerful than the CSS styling can accomplish. You can also specify the images used for the widgets that are styled using images this way, giving you complete control -- and without messing up the original copies that we provifde. Custom widgets would also be kept in userdata/custom.

We have docs on how to do this, here: http://www.profoundlogic.com/docs/displ ... evelopment (There are also some examples shipped with the product.)

All of these can be used in the Visual Designer.

[dieter]

Scott,

thank you for your answere. It was very helpful. We have just created 3 derived widgets which are basing on our css classes. With the help of our web programmers it was not very difficult. Now we have the strategy to derive all widgets we want to use and let them base on our own css classes. When a new Profound release comes, there should be no problem, because all our widgets are derived from the origin widgets. If a widget in a new release has new attributes or new functionality, it should have affects on our widgets. We hope, that this is correct.

Thanks,
Dieter

[dieter]

Hello,

Scott told me, that if we put our own css-classes under userdata/custom, the classed should be used automatically by the designer and by the runtime of ProfoundUI. So we created a folder "ecclesia" under userdata/custom. In that folder there a 2 files: "ecc_widgets.css" and "ecc_widgets.js". The designer really picks these files automatically. We can see our changes on the widgets directly in the designer. But when we run a Genie-Session in which our ProfoundUI application is called, there are no changes on the widgets. We analyzed the problem an we saw that our "ecc_widgets.js" and "ecc_widgets.css" are not loaded.

Our workaround is, to load our custom files directly in the start.html. (Maybe this is the best solution anyway). But is there a bug in ProfoundUI that the ressources under userdata/custom are not loaded automatically? Or is there a switch to activate this behavior? Again: It is loaded by the designer automatically!

Dieter