How to style WebToolbar text color? (2020r1.1)

did someone know how to change the text color of a webtoolbar?

Public Sub ToolbarStyle(t As WebToolbar)
  
  t.Style.Value("background") = "rgb(41,67,78)"
  
  t.Style.Value("color") = "white" '???
  t.Style.Value("text-shadow") = "2px 2px 4px #000000"
  
End Sub

you could use my ExtendedWebStyleClass and do all thing with CSS:

1 Like

i just wonder why “color” at label work and at toolbar not.
the text-shadow works in toolbar.
maybe i need a different keyword to access the toolbar text or its because the toolbar is not finished?
it is just a mini project to play with to test web 2.

@MarkusR
Sorry, I’m (very) late to your party.

The reason is that the color is already defined “before” your style element will hit in. You can change it via CSS in HTML Header of your project in the IDE, as follows:

<style>

.navbar-light .navbar-brand {
    color: #0096ef;
}

</style>

I had to change it today my self, and found your question. So I thought it might help others posting the current solution. I hope it will change in a future version. Especially tweaks in the web toolbar is most likely something many users want to be able to change in the IDE. … for instance my customers: I don’t want to tell them how to change CSS, this will easily end in a complete disaster :wink: .

2 Likes

Try instead of t.style.value…

Public Sub ToolbarStyle(t As WebToolbar)
Var myNewStyle As New WebStyle
myNewStyle.backgroundColor = &cff0000 // red
myNewStyle.Bold = True // etc..
t.style = myNewStyle // Assign it a new style so xojo knows it's changed.
End Sub

it does not change the text color. i guess this WebToolbarButton have its own Style. but this button .Style propertie there is not a WebStyle.

Public Sub ToolbarStyle(t As WebToolbar)
  Var myNewStyle As New WebStyle
  myNewStyle.backgroundColor = &cff0000 // red
  myNewStyle.Bold = True // etc..
  myNewStyle.ForegroundColor = Color.White
  
  t.style = myNewStyle // Assign it a new style so xojo knows it's changed.
End Sub

Perhaps some css?

<style>
.navbar-light .navbar-nav .nav-link {
    color: rgba(255,255,255);
}
</style>

On app HTML Header

Has there been any improved methods for this (styling the text associated with a WebToolbar item)? Right now I can set the color of the BootstrapIcon, but the associated caption is always ‘black’. Love to be able to set it to match the BootstrapIcon. Currently using 2021 R3.1

In the latest version you can use the following code:

Me.Title = "My Title"
Me.Icon = MyIcon
Me.style.BackgroundColor = &cD3D3D3

ok, and is ForeGround TextColor now also possible in Toolbar?

Me.Title = "My Title"
Me.Icon = MyIcon
Me.style.BackgroundColor = &cD3D3D3
Me.style.BorderColor = &cFF5733
Me.style.ForegroundColor = &c2ECC71
2 Likes