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
12

This may be a bit off topic:
Is there a way to set style like bold, for a specific item in the toolbar that was clicked? or set the colour to highlight what was selected?
I can get the item that was clicked and the caption as per the WebToolBar example file but then trying to use that info to change the clicked items style

13

Hi Jose & others, I hope this is a good place to inject this follow-on questionā€¦

Iā€™m now using 2024 r4.2 and wanted to ask if thereā€™s yet a way to style the text-color of a WebToolbarButton.ButtonStyles.PushButtonā€¦?

Iā€™m still able to set the color of the .Icon property, but nothing for ā€˜captionā€™ (foreground?) color yet?

// Assign button for pause automations
Var PAUSE_AUTOMATIONS As New WebToolbarButton
PAUSE_AUTOMATIONS.Style = WebToolbarButton.ButtonStyles.PushButton
PAUSE_AUTOMATIONS.Caption = "PAUSE AUTO"
PAUSE_AUTOMATIONS.Tag = "PAUSE_AUTOMATIONS"
PAUSE_AUTOMATIONS.Icon = webpicture.BootstrapIcon("pause-circle", Color.FromString("&hFFFFFF"))
PAUSE_AUTOMATIONS.Enabled = False
Me.AddItem(PAUSE_AUTOMATIONS)
14

Was just searching to see if itā€™s possible to assign bootstrap variations to WebToolBarButtons (eg ā€˜Warningā€™, ā€˜Dangerā€™, etc).

I take it from this discussion that this is not possible?

15

You can set the color property of the .Icon to any color you like, but I havenā€™t found a way to independantly color the text (.Caption).

1 Like