Hello all,
Well I have my web app functioning properly. Now I’d like to make it pretty. Can anyone suggest resources to learn how to add color to the various elements of a Web App? I am using a bootstrap that is orange, but it only really appears on the perimeter of fields and buttons, not anywhere else.
Thanks in advance!
Tim
One rule all developers should follow, you are certainly very good at developing apps, but you aren’t a UI/UX designer.
Don’t try to make the design completely on your own, there’s a good chance it will look terrible.
There are many UI kits available from ui8.net and even some bootstrap themes that are easy to import.
That is usually a very good source of inspiration to enhance the look and feel of your app 
Can you share the bootstrap name, screenshot of what you see and more information on what you want to change (an example or two).
There are different ways to change things.
Jeremie,
How are those ui8 kits integrated into Xojo?
Bear in mind that I have not done this before - using a UI kit and I do not know CSS etc.
Tim
Hi Alberto,
Sorry for the fumbling but this css and bootstrap stuff is all new to me. Using it is still muddy to say the least.
The one I am trying out, is called United - Ubuntu Orange downloaded from Bootswatch. It is zipped here too.
United - Ubuntu Orange.zip (61.6 KB)
I do not really know what I want to do as this is a blank slate. I know that I want to do background colors, add color to PageToolBar and other elements.
Thank you,
Tim
First is to know what you want to change (and why).
The idea of Bootstrap Themes is to use one that you like for your project.
As you know, you can see what the colors look like here:
I will say that you can try what WebStyle offers first, see if they don’t change the way you like it and see if you can figure it out if CSS is needed (of course you can ask here).
The bootstrap that is in there already has the colors I like (from the sample at Bootswatch.com).
I want to:
1 add color to the background.
2. add color to the ToolBar
3. add color to the containers
This is what it looks like now:
Is there anything in the docs explaining how to use bootstraps? From what I could find, there appears to be an assumption that developers just know how to use these. I definitely do not!
Or any other resource for suggested reading/learning?
TIm
Start here for background:
Here’s a free Boostrap theme editor that can help you customize:
https://bootstrap.build/
Thank you!
Tim
Boostrap is a very commonly-used web UI framework developed by Twitter. There’s a ton of information at your fingertips, all you need to do is google. And make sure you’re using Bootstrap 5.x themes with Xojo. 4.x themes will not work.
I did that, but lacking the basics and thinking “how do I implement” in Xojo is where the mind fart comes in.
I’ll check out the blog you suggested Anthony.
Thank you!
Add this code to the opening event (page, toolbar, container):
me.Style.BackgroundColor = color.Orange
I’ve prepared a little free tool for creating Bootstrap themes a while back. It doesn’t cover every single Bootstrap setting, but maybe you find it useful for some projects: