What is a Style Sheets?

I keep reading a few things in the forum about style sheets being the replacement for web styles. Where can I find more information on style sheets? Anybody have an examples of style sheets? I really want be able to start converting my project to Web 2.0 but I just dont have enough information. Thanks for any help.

Web 2.0 uses Bootstrap 4 theme. What you see when you first open a project and start adding controls is that theme.

If you’re interested in seeing some others, go to http://www.bootswatch.com and download the bootstrap.min.css file for one of the themes. Once you have it, drag it into the Navigator and it’ll update everything in one shot.

1 Like

i would say its a list of styles.
www.w3schools.com/css
wiki/Bootstrap

I do not create Web sites I write apps that are useful in our manufacturing that can be easily deployed and updated because they run in a browser. UI design is an important element in what I do as is responsiveness and I’m not trilled that Web 2.0 seems to be more geared to the Web site developer and bypasses the enterprise internal app development needs of a number of folks based on the complaints I’ve read so far.

So I’m trying to adapt to this new paradigm of using Bootstrap and Web 2.0 to control the basic web page styles and responsiveness, but I’m still a bit lost in controlling things especially styles. I downloaded a bootstrap.min.css from http://www.bootswatch.com called Spacelab, and rather than rolling my own toolbar as I have in the past, I’m trying to use the Xojo toolbar control but it appears to be different from the Spacelab NavBars or at least I have no way to select which color NavBar style that is shown on the Bootswatch sample page for Spacelab. I want to use the “navbarColor01” and what is defaulted in the Toolbar is “navbarColor03”. (The example project toolbartest.xojo_binary_project has been helpful but is nothing like the tutorial by Paul Lefebvre I found on YouTube.) I’d like for the Label Icon in the Toolbar to be bigger but there appears to be no control for that at all. If this is supposed to be “more flexible” than Web 1.0 I’m having great difficulty seeing it. Everything I would have wanted to do using this Toolbar and failed at could be done with styles and a combination of various controls in Web 1.0, yet I’m trying to make it work regardless.

The other thing I have found difficult to find is a simple tool to edit the color scheme of a bootstrap theme. Everything I’ve downloaded and tried is a full Web site development product and really isn’t suited for just editing and compiling a Bootstrap.CSS theme into a bootstrap.min.css. It would be great if there was a tool built into Xojo to edit the bootstrap theme colors, but alas I’m sure that won’t happen any time soon.

Heavy sigh!

1 Like

You need to select WebToolbar11 from the Xojo example, then go to Inspector and change the indicator to primary.

DOH! OK now I see that.

Is there any way to have the toolbar appear lower then a rectangle. I’ve tried putting it in a container control but it still pops to the to with the position set to Top or Inset.

It also doesn’t appear to let me adjust the height. Is height set by a Bootstrap value? I’m still looking for a visual Bootstrap CSS editor.

I have found this site useful in the past, especially when trying to figure out why a style is or isn’t working
https://wattenberger.com/blog/css-cascade

As a web developer I can assure you it’s not.

Not in any way.

It’s definitely there to aid web app development but need a mindset shift from 1 to 2.

What Xojo Inc have done is actually very clever and we’ll all look back on this in times to gone and realise they they (and @Greg_O_Lone in particular) have done is definitely the way forward.

It might not be the best framework to have chosen, the most popular isn’t always the best but as they’ve gone with BS4 and not say Framework 7 then we’ll just have to adapt.