How can I add icons or images to tabs? I can add it nearly everywhere except in tabs. The same CSS commands that works in other places won’t work here.
For example:
background-image:url(’\Icons\cross.png’);
Tab buttons are not accessible within the tabs’ scope, you need to target them from the parent’s css:
> inner > .navigation > .tablink:nth-child(1) {
background:red
}
1 Like
Thanks for the response
I guess you mean this.
I created a panel, added 2 tabs. I would expect the tab number one change the background color, but nothing happens .
Also tried tab id and other background colors etc with no results.
I assumed you were using v1, you’ll need to adjust the css selectors (you can use the browser’s devTools to inspect the widget’s structure), If I remember correctly replacing inner with .panel should do.
> .panel > .navigation .tablink:nth-child(1) a {
background:red
}
Thanks! That works nicely.
How can I change the background color or the icon when the tab is active?
I know how to change the font color with this:
–color-raised:rgba(30,50,80,1);
But can’t get it with background.
Obviously using icons would be nice to know how to change the icon or the icon filter when a tab is active.
.tablink elements have an extra class "on" when active, so you’d write `.tablink.on.
Thanks, can you add an example as you did with this?
.panel > .navigation .tablink:nth-child(1) a {
background:red
}
Yes:
.panel > .navigation .tablink.on:nth-child(1) a {
background:red
}