How to change the font and other atributes of a bootswatch?

Targets Web
1

Hello all,

I have a bootstrap in a web app project. Here is a link to the Bootstrap Bootswatch: United

It appears that there are a number of different heading and other text sizes. How can these be used? Right now my app only uses whatever is out of the box in this theme. What I want to be able to do is to set the font and field sizes smaller than what they are naturally.

Can anyone point me in the right direction to understand how to utilize the full benefits of a bootstrap theme?

Thanks!
Tim

2

One way to use Headings is to add code with the <raw> option, like:

me.Text = "<raw><h1>Heading 1</h1></raw>"

(change to h2, h3 for the other 2)
and. you get this:
image

from this (IDE):
image

3

Thanks AlbertoD.

What about font sizes in WebTextFields, and Buttons etc? Do they all need to be customized like you suggest? Or is there a more “Global” way to do it?

Thanks,
Tim

4

For WebLabel the IDE offer these options:
image

for controls that don’t offer that, you may be able to change the size by adding code like:

me.Style.FontSize = 24
5

How to do a loop so all of fields or other objects can have the same FontSize?
The code below does not work, I was guessing!

For Each WebTextField
  
  WebTextField.Style.FontSize = 14
  
Next
6

If you want all to change then maybe is better to edit your Bootstrap theme.

Other option is to add CSS to App HTML Header.

7

I used the following code to solve my particular issue.

For i As Integer = 0 To Self.ControlCount - 1
  ' Check if the control is a DesktopTextField
  If Self.ControlAt(i) IsA WebTextField Then
    ' Cast the control to a TextField in order to access the Text property
    WebTextField(Self.ControlAt(i)).Style.FontSize = 15
    
  ElseIf Self.ControlAt(i) IsA WebPopupMenu Then 
    WebTextField(Self.ControlAt(i)).Style.FontSize = 15
    
    
  ElseIf Self.ControlAt(i) IsA WebLabel Then 
    WebTextField(Self.ControlAt(i)).Style.FontSize = 15
    
  End If
Next
8

Nice that you found the code that solves your problem.
I prefer adding this to the App HTML Header section:

<style>
.XojoLabel {
   font-size: 15px;
}
.form-control {
   font-size: 15px;
}
.btn {
   font-size: 15px;
}
</style>

Or modify the Bootstrap Theme changing:
–bs-body-font-size
.form-control - font-size
–bs-btn-font-size

For people new to Xojo, when I say App HTML Header I’m talking about this section:

image
image1252Ă—534 91.3 KB

9

Hi AlbertoD

That is much simpler. And all in one place. I’ll give it a try.

Thanks for the tip(s)!

Tim

10

That is much much simpler AlbertoD.

What is the code to use for WebListBox? Or does that one have to be done separately?

Also, where did you find the information to create the code you presented?

Thanks,
Tim

11

Basically I add a control in Xojo, run the project, use the Browser Inspect and see the CSS elements for such control.

image
image434Ă—580 34.5 KB

It looks like the WebListbox uses the body CSS section, so instead of using .XojoLabel you can use body (note: haven’t tested all Xojo controls, I’m not sure what else the body class will change)

image
image1920Ă—1113 226 KB

try this:

<style>
body {
   font-size: 15px;
}
.form-control {
   font-size: 15px;
}
.btn {
   font-size: 15px;
}
</style>
12

Very cool!
Learned a few new things today!

Thank you
Tim

1 Like