Question CSS change color of "enter full screen" icon

maitre
Topic Author
Offline
New Member

6 days 13 hours ago #1 by maitre

CSS change color of "enter full screen" icon was created by maitre

Hi there,
I cannot find the appropriate selector to change the color of the "enter full screen" icon for the interactive tree. Can someone point me to the right direction?
Thanks.

Please Log in or Create an account to join the conversation.

bertkoor
Offline
Platinum Member
Greetings from Utrecht, Holland

6 days 11 hours ago - 6 days 11 hours ago #2 by bertkoor

Replied by bertkoor on topic CSS change color of "enter full screen" icon

There are two classes used: wt-icon-enter-fullscreen and wt-icon-exit-fullscreen.

The icon inside these (from FontAwesome) take their color by default from

Code:

.btn-link, .nav-link, a {
color: var(--link-color);
}

You can use the developer tools of your browser to figure that out.

So if you change the link color variable, ths icon also changes color.
To override only the icon color, eg green when inactive and blue on hover:

Code:

.wt-icon-enter-fullscreen, .wt-icon-exit-fullscreen {color: #0F0}
.wt-icon-enter-fullscreen:hover, .wt-icon-exit-fullscreen:hover {color: #00F}

stamboom.BertKoor.nl runs on webtrees v2.2.1

Last edit: 6 days 11 hours ago by bertkoor.

Please Log in or Create an account to join the conversation.

maitre
Topic Author
Offline
New Member

6 days 10 hours ago #3 by maitre

Replied by maitre on topic CSS change color of "enter full screen" icon

Thank you for this, it works fine!

Please Log in or Create an account to join the conversation.