Learning CSS

Targets Web
1

I am slowly working my way through CSS in Xojo 2022 web projects. I am having trouble identifying the relationship between the Xojo interface items and the attributes they are bound to in the CSS.

For example, when I inspect the page elements in Chrome I notice Xojo.css and Xojo classes are often applied to elements but I see no Xojo.css file in the final project. Same with datatables.min.css.

Has anyone worked out how to make the required associations to competently modify the final look?

I was next planning to extract the Xojo.css from Chrome and add it to my Xojo project as I did for a min.css file. Has anyone tried this type of approach with any success?

TIA

2

If you want to override the styling of a Web application, your best bet is to build your own Bootstrap theme.

Required reading
Bootstrap Build

1 Like
4

Thanks Anthony. I have read both and downloaded a Bootstrap CSS file. I will continue to dig.

1 Like
5

Hello @Ed_Renaud ,

I already started to look into We API 2.0 applications. I have some notions of CSS. Let me shed some light.

Where does come from Xojo.CSS

On my computer running Windows 10 its here C:\Program Files\Xojo\Xojo 2022r1\Xojo Resources\WebFrameworks\XojoWeb\Libraries\Xojo:

image

Xojo is the client-side portion of the Xojo Web framework. If you do not use a different CSS file, this is the one that will be used. I just ran a Debug Build of a small test project that was loaded in to Edge. This is where Xojo.CSS is found in the app (I load the Web Tools):

image
image687×531 47.5 KB

This part of the mystery is now solved.

Let’s have a look at my small test app, this is what it looks like:
image

Please no that for this app I don’t use the default CSS file xojo.css, more on this later. Now lets have a look at the control in the Inspector:

image
image314×556 9.96 KB

Note the Indicator DropDown: it is use to link to a CSS style. My CSS style file is called bootstrap.css. The value of Indicator is set to Primary. This is at the beginning of the CSS file:

image
image611×673 31.2 KB

This is where Primary comes from. Note the Bootstrap version: Xojo is compatible at this time V 4.6. So If you want to use a different CSS file, make sure to it is compatible with 4.6.x. Thing is there a CSS version newer than that.

Regarding using a custom CSS file, it has to be called bootstrap.min.cc. min means it’s a minified css file, all the New Line have been purged. Be sure to download the minified version for Xojo and the non-minified for you want to read it :slightly_smiling_face:.

Hope that help for a beginning. CSS is much deeper than that.

2 Likes
6

Those are inside the compiled program.

You can modify the files inside the Xojo install path, so when your app is compiled, those files are going to be in the app.

But, it is NOT a good idea, the special way xojo uses css, any change could be broken in the next release. So, yes, the best alternative is to use a theme. and be limited by its reach. It is a shame that xojo is not RAD anymore for css as web 1 was with the styles.

7

Thanks Gilles. I had pretty much discovered what you shared but thanks for taking time to reply…

8

Thank you Ivan. Pretty much my conclusion as well, though I am discovering how to change a couple of things to improve what I need…