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

Targets Web
#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
#2

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

1 Like
#3

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.

#4

@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
#5

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
#6

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
#7

Perhaps some css?

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

On app HTML Header

#8

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

#9

In the latest version you can use the following code:

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

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

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