Styles - Does Xojo cascade as I expect?

Targets Web
1

WebLabel1, WebTextField1, WebTextArea1, WebPopulMenu1 and WebListbox1 are part of WebContainer1.
WebContainer1 is part of WebPage1.

TextStyle1 - a WebStyle that defines a font, font color and font size (and nothing else)
BackStyle1 - a WebStyle defines a background color (and nothing else)

I assign TextStyle to WebPage1 (desiring this to cascade to all subcomponents within the page).

Question 1:
Is that sufficient such that WebLabel1, WebTextField1, WebTextArea1, WebPopulMenu1 and WebListbox1 will adhere to TextStyle1’s definition (assuming I do not override that style somewhere in the middle)?

Question 2:
If I now assign BackStyle1 to WebTextField1 - will WebTextField1 now exhibit background properties according to BackStyle1 AND font properties according to TextStyle1?

2

AFAIK, No.
But you can use a self defined Style as Super for your next Style and so on. You still need to tell each Object which style to use.

3

Oh wow - I didn’t even realize I could use self-defined styles as supers to other styles. I see that now. That is certainly helpful. Thanks.

4

You can apply custom web styles in the following manor to page elements, by this little known method.

  1. create and name an empty webstyle in the IDE.
  2. place your custom style in the App.Header with a classname exactly the same as the empty style created in the IDE.
  3. set elements on your webpage to your custom style in the Xojo Inspector using the “Style” property drop-down, as normal.

Some would say this is a “bad idea,” yet it has never posed any conflicts, has always worked, and productively… makes sense :slight_smile:

5

Web Custom Controls has a ton of methods related to styling. You can…

  • Apply multiple WebStyleTD instances to a control. This lets you mix/match without carefully planning inheritance.

  • Create WebStyleTD instances at runtime.

  • Modify WebStyles, WebStyleTDs, and individual controls at runtime.

  • Set any CSS property you want. (Though I should note that you could potentially cause bugs with this ability. Obvious example: using CSS to hide a control means myControl.Visible won’t work so well until you clear your own CSS.)

  • Easily use Google fonts. (There are free ways to do this one.)

  • Import CSS code directly into a new WebStyleTD.