Hello,
after upgrading to release 2020r1 i cannot use WebStyles anymore in a Web-Project.
How can i use it? Or how to create new (i need to set colours/font for labels).
There is a Font section for WebLabels:
New WebStyle (using code) for 2020r1: WebStyle — Xojo documentation
You can change the Background Color using:
Me.Style.BackgroundColor = Color.Blue
in the Opening Event.
Hi,
this is working for labels. But for WebCheckBox, WebTextField, WebButton and a lot of other controls i do not have the possibility to set font and other values. In Release 2019 it was possible to set the style in the inspector, but in Release 2020 i cannot find it. And also it looks like i cannot change font / colour and so on:
R2019 - i created a WebStyle and assigned to the control:
In R2020
I understand your frustration, we are on the same boat. Xojo2020 Web 2.0 is a new version with many changes.
They changed the way the overall application looks like by using Bootstrap themes. Easy styling for individual controls is not present right now.
There are several threads about styling and several Xojo users are trying to easy the conversion of Web 1.0 Styles to make them work with Web 2.0, because there is the need to have those in Xojo2020. You can visit Web - Xojo Programming Forum to read more about that.
For now, the overall look of your web application can be changed by dropping a new bootstrap.min.css to your application. You can find several free themes on the internet. One site that has a few is: https://bootswatch.com/
If you want to change individual controls, you need to use code to do that, that’s why I posted the link to the docs. If you want to change the Background on any of those controls (WebCheckBox, WebTextField, WebButton) you will need to use code in the Opening event:
Me.Style.BackgroundColor = Color.Blue
You can visit https://documentation.xojo.com/api/user_interface/web/webstyle.html for more information. One important Method is Value, you can use CSS Style Properties, here is a list: HTML DOM Style object
Take a look at the work presented here:
https://forum.xojo.com/t/web2-0-external-libraries-and-helpers-example-project-nash/
https://forum.xojo.com/t/i-try-to-bring-some-of-the-webstyle-functionalities-from-web-1-to-web-2-0-heres-my-project/
https://forum.xojo.com/t/how-to-use-google-fonts-for-web-2-0/
somethings can be a little complex for some users, definitely more complex than what Web 1.0 offered with WebStyles.
I still hope that Xojo can add some easy CSS Style creation and CSS Class option to a future Xojo Web 2.0 release.
Hello, does anybody know how to set the WebToolbarButton position to the right? The .Position property should work but it’s not happening. I checked the Toolbar example and it didn’t have this property. Thanks!
Indeed. For instance, selecting an outline button instead of a normal button would require changing the class associated with the button. We can go a long way with style adjustments but not all the way. I discovered a bootstrap theme editor that I can use (free) to edit relatively easily (relatively is key here!) a base theme. It is largely hit and miss for me right now, but the tool does help to some extent with easing the pain of CSS. Here is the site you can download your edited theme as bootstrap.min.css and use it directly on Xojo 2020 R1.