CSS classes of controls for custom CSS stylesheet

Targets Web
1

Hi,

Is it possible to know the CSS identifiers of controls so that they could be styled with an attached external CSS sheet. Also, how does one attach an external CSS style sheet.

thank you,

Dan

2

I believe you can add a CSS link at design time via the WebApplication.HTMLHeader property.

Xojo web controls have IDs which change each session, so you can’t really use them to select elements from a CSS file. If you set a Xojo WebStyle for a control it will have a class named after the WebStyle. Where the class is set can vary as some controls are nested (i.e. containing div versus actual element). But I assume you could use WebStyles to mark controls, then modify appearance via a CSS file you’ve added to HTMLHeader.

If you have Web Custom Controls you can, at run time, use CSS to construct new WebStyleTD objects and apply multiple WebStyleTD’s to a control. You can also modify style objects (WebStyle and WebStyleTD) and controls directly at run time. There’s a number of convenience methods and CSS constants for common styling options, but you can use any CSS with the caveat that you could potentially impede functionality with some CSS. (Example: if you make a button invisible via CSS then the Visible property won’t work.)

WCC also has a method for dynamically loading header files into a session at run time.

3

Thanks Daniel,

Do you know what the class name would be of a control, when it has a style associated.

** Edit **

Would it be the name of the Style Class?

** Edit **

At this stage I don’t want to go into Web Custom Control development, if possible.

thanks,

Dan

4

And another question.

All of my controls are included in containers. Does this impede in including a linkg to a CSS style sheet in the page HTML “header”?

thanks,

Dan

5

[quote=186077:@Daniel Gross]Thanks Daniel,

Do you know what the class name would be of a control, when it has a style associated.

** Edit **

Would it be the name of the Style Class?

** Edit **

At this stage I don’t want to go into Web Custom Control development, if possible.

thanks,

Dan[/quote]

If you look at the page code in a browser developer console, you will see that classes have the name of the WebStyle. When there is no WebStyle, style is _DefaultStyle.

6

Great. Thanks.

7

Keep in mind that changing the styles in this way is unsupported and that we periodically change the structure of the DOM in ways that may break these customizations.

8

HI Greg,

Thanks.

So, how can one use in a supported (and simplest) way CSS (preferably included in a style sheet), that is not included in the current style object properties?

Dan

9

There is currently no built-in way to use raw CSS in our web framework.

The reason I made this statement is that we’ve seen users do this in the past and then report bugs that have manifested because the styles and classes have been changed.

10

Hi Greg,

Thanks for your response.

I am wondering about what exact change you are referring to.

a) the developer changed the name of style class in the program and then the CSS didn’t work anymore?
b) Xojo changed how styles are translated internally to CSS classes and identifies, and hence the CSS didnt work anymore?

if you could clarify that would be great.

thanks,

Daniel

p.s. Beside this question, i think the key issue is how a Xojo developer can most easily make best use of the rich features provided by CSS, in particular those that go beyond what is currently offered by Style properties.

11

We reserve the right to change the behavior of the framework as necessary, and I can’t speculate about future changes.

Most Xojo developers have no interest in dealing with CSS directly… That’s why they use our framework.

If you want more control over your own controls, check out the websdk in the extras folder.

12

Thanks Gerg,

Any plans in expanding the properties, to include more CSS keywords. The WebSDK is indeed an option, but its much more complex to design, than using properties in the style class.

thanks,

Daniel

13

Let’s put it this way… We are aware of the deficiencies in WebStyle, but I’m not at liberty to discuss future plans.

14

A DOM friendly way to change CSS.

  1. paste the css in the page header
  2. create a webstyle with the same name as the css class name you desire to use; do not set any styles in the empty webstyle xojo editor.
  3. using the property inspector, select the empty webstyle name (that has the EXACT same name as the css class name you pasted in the header)

The empty style will be over-ridden by the one pasted in the header :slight_smile:

**This does not break or mess-up the Xojo DOM web structure. You can apply css’s not offered by Xojo in this manor. It’s compatible with RS 2011 through current versions.