-
Posts
-
Hi,
I have the problem, that in my browser (Firefox 113.0 on Windows 10 professional. desktop) ENFOLD produces dark scrollbars at the right of the browser’s window. This bothers me a lot because the design of my website is very light and white.
Apparently I’m not the only one with this problem:
https://kriesi.at/support/topic/scrollbar-farbe-scrollbar-color/I’ve tested various ENFOLD demos because the scroll bar on my ENFOLD 5.6.1 page (not online yet) is dark – that looks bad if you have a bright, white website.
Dark scroll bar:
https://kriesi.at/themes/enfold-overview/
Bright scroll bar:
https://kriesi.at/themes/enfold-freelancer/
Bright scroll bar:
https://kriesi.at/themes/enfold-creative-studio/
Dark scroll bar:
https://kriesi.at/themes/enfold-shop/
My browser’s normal scroll bar is always the light version, e.g. on Facebook or Google search:
Facebook:
Google:
ENFOLD Forum:
Also here in the forum the scrollbars are dark, not for the textbox where I am writing in (it’s normal light grey), but at the right browser window:
Since I am obviously not the only one with this issue:
https://kriesi.at/support/topic/scrollbar-farbe-scrollbar-color/… so what the heck is ENFOLD doing that the scrollbars are dark, but apparently not always.
Unfortunately with my ENFOLD 5.6.1 (still offline, because I’m still working on it) they are also dark, which looks bad, because my website has a very bright, white design.UPDATE:
someone having the same problem, just pointed out to me that this phenomenon is socket color dependent.
My socket color is #333333But that’s very strange … when I now enter a squeaky green #00bd2c as the socket background, the socket and the button-up are squeaky green, but the scroll bar isn’t green, it’s bright as it should be, look here:
And when I change the socket color to my #333333 it looks like that:
And now look:
socket background color in bright pink #ff00ff
the scrollbar is standard grey:
and when I make this pink darker to #8a038a
then the scrollbars get colored in this color:
thus it is not only related to the socket background color, but also to the brightness of that color.
How can I use my standard socket color #333333 AND the standard bright grey scrollbars, not changing all the time I use another socket color?Thanks.
To sum it up:
the scrollbars are dependent on the socket background COLOR and in addition (!) on the brightness/tonal value of this socket background colour:– bright socket background colour = standard light grey scrollbar
– muted, bit darker, middle tonal value socket background colour = coloured scrollbar in the socket’s colour
– dark socket background colour = dark scrollbarHow can I “cut” this dependency?
@BeeCee thank you for tagging me!! That is very interesting, but also explains finally why it is the way it is! 🙏
But why doesn’t the developer know that? :D
Best KiM
Hi,
This is not theme styling, it seems to be a browser “thing”. If the html tag background colour is dark, then the scroll bar will be dark too, and the opposite for light colours. It doesn’t seem to have any other states other than these two, since it’s not reacting to red or blue for example.
Apple.com has a light scroll bar by default, but if the background of html tag is set to a dark colour, then the scroll bar changes as well: https://snipboard.io/Vc3tJB.jpg
Best regards,
RikardThanks, Rikard, but it is indeed related to ENFOLD’s socket color settings:
Set the socket background color to #8a038a then the scrollbars get colored in this color:and this is really not acceptable, sorry. I never had this with other themes.
@mike has dived deeper into it in this old thread:perhaps he has an idea for this issue.
It’s not like it just produces dark or light scrollbars, no, the scrollbars are COLORED depending on the socket background color, see screenshot.
Hi,
Thank you for the information provided.
We have been unable to reproduce the issue on our end. When changing the color of the socket background, the scroll bar remains unchanged. The only aspect that is affected is the background color of the “scroll to top” button. To further investigate the issue, please provide us with access to the site details in the private field. We’ll be glad to assist you.
Best regards,
IsmaelIt’s not a problem of my site, several people have this issue, in ENFOL’s Facebook group and here:
https://kriesi.at/support/topic/scrollbar-farbe-scrollbar-color/ and your own demo sites of ENFOLD produces also different scrollbars depending on socket backg colour, see my first post here with screenshots.Have you tested it on a Windows system?
@blatze you have this problem, too.
Are you on Windows or Apple and what browser do you use? Could you please test if #8a038a as socket background colour produces pink scrollbars at your site, too?
@guenni007 do you have this phenomenon, too?
Hast du das Problem auch, werden deine Browser Scrollbars auch farbig, wenn du in den Themesettings als Socket Backgr Color #8a038a eingibst?
@ismael @mike I have this phenomenon on Windows 10 prof. with Firefox and Chrome browser.Hi,
I use iMac with Chrome, Safari and Firefox. But changing the socket color does not have any impact here.
But I also tried on Windows with Firefox and there it is:
On iMac I only have different colors with different Demo Sites of Enfold just on the bar and only light or dark:
and if you scroll up on Apple you see “behind” the site and there is pink also:
there is NOT a border or something on top!
auch ich sehe es in Firefox (unter WIN10 Pro) so wie @BeeDee es schildert. Meine Farbe ist #aa2f31.
In dieser Form ist es zuvor niemals aufgetreten.
Es kann doch nicht bei verschiedensten Rechnerkonfigurationen am Umfeld (Betriebssystem + Browser) liegen, das wäre doch zu viel “Zufall”?Viele Grüße,
RalfHi @BeeCee,
I can’t reproduce the result you are pointing out either. Tested on Mac and PC: https://wpexpert.se/enfold/
This demo has a dark background colour applied to the html element: https://kriesi.at/themes/enfold-overview/. If it’s changed, then the scroll bar colour will change as well:
https://snipboard.io/7GXynE.jpg. I pointed this out in my earlier post.
This colour is not coming from the socket colour setting, it’s the colour applied to the html element. If you want to change it, then try using this CSS:
html { background: yellow; }Best regards,
RikardThat does not help to solve this, sorry.
I want my socket background color #8a038a but I don’t want scrollbars like 90th style in that color.
The html tag is NOT changed.When you read all the other posts from others … it’s not an issue only at my site, see their screenshots.
Hi,
No one else seems to be having the problem you are having, so a link to where we can see the results you are getting would be a great place to start.
Best regards,
RikardHi Rikard,
You mean no one of your Team. I am having the Same Issue as i wrote before and also another impact..
– @blatze
– @ralfehlers
– Myself
– and your demo siteshave this phenomenon
What result do you have at your Windows PC with Firefox browser when you add #8a038a as socket background colour?
Hi BeeCee,
I tried changing the socket background color and checked it with Windows 11 both in firefox and chrome, and it did not change the scrollbar color.
However, I tried checking on the demos you mentioned and Enfold Shop in particular ( https://kriesi.at/themes/enfold-shop/ ) shows a dark scrollbar in firefox, but scrollbar is the same on chrome. Can you try to add this CSS code in Quick CSS and see if it helps fix the scrollbar color:/* Firefox */ body { scrollbar-color: #c1c1c1 #f1f1f1; } /* Chrome */ body::-webkit-scrollbar { background-color: #f1f1f1; } body::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-left: 2px solid #f1f1f1; border-right: 2px solid #f1f1f1; } body::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; }Hope it helps.
Best regards,
NikkoThanks Nikko, but it has no effect at my site:
I’ve created a link to my testsite in the private content below, thanks for checking.
Hi,
Thanks for that. I’ve added this CSS in Quick CSS:
html { background-color: #fff; }It’s working on your site, please review it.
Best regards,
Rikardvery strange, thanks, this works indeed, but you have no explanation why this is the case with ENFOLD?
I run another site with another theme and there I don’t have this phenomenon – I never had changed the html tag at all with any theme before.It must have something to do with ENFOLD and its socket background color, because you can try it for yourself, when you change the socket background color to the colours stated above, the scrollbars change according to that setting.
Hi,
The scroll to top colour will apply to the html tag as well, that’s why. If you want to override that styling, then please use the CSS I added for you.
Best regards,
Rikard
- You must be logged in to reply to this topic.