Judging by my reading on this forum, I’m not the only one flummoxed by Xojo’s implementation and/or explanation of css styling for the web apps.
I know CSS, but obviously the methodology is different here. I have a stylesheet attached to my app object. I’ve also created individual style entries in that HTML header box. Still, I can only define some styling in the “Opening” event of controls. I have no idea how to implement styles.
There is a thing called a “theme” that we can supposedly implement and call by name, but I see no concrete (understandable by me) example of how to do this (I know what a “theme” is in terms of bootstrap or another CSS framework, but I don’t know how to apply it here). I don’t know if I can write a definition for an input tag in CSS and have it apply to a text box in Xojo. I’ve tried to apply a class to it, but I see no result.
So, how do I name and create a “webstyle”.
What is a “Xojo-Webstyle-control” and where do I find one?
I’ve read several tutorials on the forum all the way back to 2015 on how to use CSS in Xojo, but some of these features seem to have been deprecated. In my opinion, it’s probably time for someone to write an updated and hopefully really detailed tutorial on exactly how to style a webpage in CSS. From my dim understanding to date, this Web 2.0 thing seems to have broken at least as many things as it has fixed. Not that it’s a bad idea to update your programming paradigm. It’s just that the changes are hard to follow if someone at the company is not disseminating the requisite information to the community as quickly as the changes are being made.
Assuming I’m missing something, if someone could point me to a current article or two, I’d appreciate it.
To apply a Bootstrap theme, you simply drag the stylesheet file in to the navigator at the left of the IDE. As long as it’s named appropriately, it will be used.
WebStyles, as they existed in Web 1.0, do not really exist anymore, though more recently the ability to get an object of them has been made easier. Each control has a Style property, which is the new WebStyle, and you set properties on that. If you don’t want to use the prebuilt properties or need to set CSS values that aren’t supplied there, you can use the Value method to supply anything you like:
me.Style.Value( "background-color" ) = "#000"
If you don’t like the built-in WebStyle, I’ve implemented GraffitiWebStyle for my products, which allows you to continue to use static named style objects (Examples). It gets close to the original WebStyle without the visual designer, and I’ve built a Style Convertor for converting those old Web 1.0 style files to GraffitiStyles or the new WebStyle implementation.
I’ve tried the bootstrap thing. I should have probably mentioned that I’m a noob with Xojo web (though I’ve lurked about in these forums for awhile) and once I got the bootstrap into Xojo I didn’t know how to reference it. I don’t want to use bootstrap anyway (ditto for my other web projects in php) so I tried to reference my own css stylesheet, and embed my own inline styles, to no avail. I had some luck doing borders in individual controls, but this value syntax you stuck in your reply is a little goldmine. This seems to work fine when the documented uses of background-color do not.
I don’t really know how well the old procedures work(ed). I’m going from the forum posts of others. Basically, I’m unfamiliar with the terminology (webstyles and themes) and don’t know how to use stylesheets in Xojo so a lot of what seems intuitive to you is kind of lost on me. I have no trouble adding a stylesheet to an html web page or applying individual styles to html elements. Extending anything like that paradigm to Xojo, however, seems fruitless.
Thank you for referencing your Graffiti styles, which I’ve seen many times before in my search for controls. This is overkill for my extremely prosaic needs (basically I want every control transparent and borderless) but this looks like a great example of what Xojo should have in its form toolkit.
I love the language but I am not happy with the forms on either web or desktop.
My thanks for the me.Style.Value() tip. That’s a keeper.
fritz
Bootstrap is what Xojo Web is built on. You need to create a custom Bootstrap theme to modify the defaults to what you want your app to look like. You can’t just throw Bootstrap away. Once you’ve added the bootstrap.min.css file to your project, it should just work. Refer to this page and this blog post for more information.
Well, that’s clear enough. Not a fan of bootstrap, but I’ll give it another shot. At least I’ll stop wasting my time trying to get my controls to inherit CSS definitions.
I’ll see how many style features I can implement through the value syntax you provided. It seems to work for everything I’ve tried with buttons and text fields, so I’ll try the rest right now.
Thanks for the reference to the blog post. I scour the forums and the docs but I completely missed that one. I’ve read about rolling your own CSS in various places, but I have to consider that post the final word.