Web2 - Themes customization

I don’t understand how I can change the default Bootstrap settings.
just for example, how I can set the size of controls and fonts to be similar to Web1?
thank you.

With Web 2.0, settings are located in .CSS files. The contents then should be edited to change styles.

See Changing the appearance of controls — Xojo documentation

You will find other information about Bootstrap as well in the Xojo documentation.

I don’t know how it works, I hope you will excuse me if I ask banal questions.
so I have to modify the properties of each control?
isn’t there an option to select valid properties for the entire theme (e.g.: large, normal, small), so each element (controls, font size, etc.) are proportionate to the others?

There is no option in Xojo yet, there is a feature request to add that to Xojo, you can upvote it if you want this feature:
72882 - Bootstrap supports “Large”, “Default” and “Small” buttons

1 Like

thank you AlbertoD. I voted.
in the meantime, if it is possible to do something to set the small size for individual elements (like buttons, text fields, font and so on), do you have some examples?

It looks like Bootstrap Magic : Generate your own Bootstrap themes quickly and easily bootstrap magic creates Bootstrap 4 themes that you can use with Xojo up to version 2023r1.1

Bootstrap build: https://bootstrap.build/app
creates Bootstrap 5 themes that you can use for a future Xojo 2023r2

I just played with them but not fully tested.

Another option, to show something like this:
image

is to change the Style.FontSize to something smaller, in this example in the Opening event of the WebTextField at right I used this code:

Me.Style.FontSize = 8

Works with other controls too:
image

I’m not sure if the code works with every control, you will have to test.

1 Like

WebPopupMenu:

I would like to set the font size (13, for example) in the rows of the list.
As far as I understand, after reading the documentation and running some tests, the only way to act on the style is to use WebMenuItem

for example (from the documentation):

Var item As New WebMenuItem("Police")
item.TextColor = Color.Blue
Me.AddRow(menu)

but there are few properties (e.g. TextColor) and I don’t see FontSize.

If I missed it, does anyone know how to set the FontSize?

thank you

you can make a simple websdk to get the size of the buttons available, or even outline.

see

enjoy !


@Ricardo_Cruz you could include this extended example into next releases ?

3 Likes