theme contrast between select and input background color and text color

[tempcke]

Hi,

I would like to report an irritating bug with WHM and cPanel.

in several places a light colored css background is set on input elements such as <select> <input type=text etc however no css color is defined. Beings I'm using a dark theme in my operating system by default these elements have a black background with white text, so when you use css to change the background color without changing the font color I end up with white on white, so what I type (or select in the case of select boxes) is not visible.

In the attached screenshots you can see some examples, the WHM one I have typed list in the search and used SHIFT+LEFTARROW to highlight the last 2 letters so you can see that it is typed in,

The solution is simple, anytime you define a background color in css also define color, and vise-versa

Thanks

Todd

 

[cPanelAdamF]

do you have similar issues in Paper Lantern?

 

[tempcke]

no idea what Paper Lantern is but the issue is common with several websites and web based interfaces. Which is why when you define a background color it is important to also define a foreground color. This is an easy fix, it is just css.

input and select boxes to not inherit colors from there parents but instead from the operating system's theme.

 

[tempcke]

oh and you can see from the 2nd attached image that buttons are affected also

 

[Infopro]

The solution is simple, anytime you define a background color in css also define color, and vise-versa

oh and you can see from the 2nd attached image that buttons are affected also

This is an issue with your custom windows theme, not cPanel necessarily.

Beings I'm using a dark theme in my operating system by default these elements have a black background with white text, so when you use css to change the background color without changing the font color I end up with white on white, so what I type (or select in the case of select boxes) is not visible.

I've got no clue what sort of theme you're using, or more importantly browser, to give you any details on how to fix this, but you should be able to exclude your cPanel & WHM pages from being affected by operating system style issues like this.

 

[tempcke]

This is an issue with your custom windows theme, not cPanel necessarily.


I've got no clue what sort of theme you're using, or more importantly browser, to give you any details on how to fix this, but you should be able to exclude your cPanel & WHM pages from being affected by operating system style issues like this.

No, I am a web developer so trust me I understand exactly what is going on.

The issue is with the css used in WHM & cPanel pages, css is being used to set the background color of some form elements which have text in them. All browsers will have form elements default styles defined by the operating system theme, however most of these of those styles can be changed with css within the webpage itself. WHM/cPanel has used css to set the background color of textboxes, select boxes, and buttons without setting the text color. As a result if someone has a dark theme (such as high contrast in windows, or xfce-dusk in linux/xfce or any number of other dark theme's that use a dark background and light foreground for form fields) the text ontop of the form fields within cPanel/WHM will not be visible.

for example, the WHM search bar is styled this way from the file /cPanel_magic_revision_1384143148/templates/menu/command.min.css:
#quickJump {
background: none repeat scroll 0 0 #FFFFFF;
border: 0.077em solid #CCCCCC;
border-radius: 0.231em;
box-shadow: 0 0 0.231em #CCCCCC inset;
box-sizing: content-box;
font-size: 1em;
height: 1.923em;
line-height: 1.923em;
overflow: visible;
text-indent: 0.231em;
width: 100%;
}
this is from WHM's css
as you can see the background is being set to #FFFFFF (or white)
however there is no color defined
simply adding color:#000000;
will fix this issue

likewise in cPanel this is in the css:
select {
background: none repeat scroll 0 0 #FFFFFF;
text-decoration: none;
}
resulting in select boxes with a white background but no defined foreground color, so if the default from the os is white text on black background and you change the background color to white you end up with white text on a white background, again this is an easy fix:
select {
background: none repeat scroll 0 0 #FFFFFF;
text-decoration: none;
color:#000000;
}

also these styles affect buttons
.create-button, .input-button {
background-image: url("/cPanel_magic_revision_77566434206.5545/frontend/x3/branding/ui_sprites_bg_snap_to_smallest_width.png");
background-repeat: repeat-x;
}
.create-button, .input-button {
background: none repeat scroll 0 0 #E6ECF6;
}
.input-button {
font: 11px Verdana,sans-serif;
vertical-align: middle;
}

again background is defined but not foreground

the same issue exists on the tickets.cpanel.net website when creating an account, input fields have a white background with no defined foreground.

Although this is in part because the Operating System theme selected by the user is white on black but one should not be unable to use a theme simply because web authors are lazy :P

On this website, forums.cpanel.net it has been done correctly, input fields have a defined background AND foreground color.

So this IS a bug in the css used for WHM/cPanel and has a serious impact on the user experience

- - - Updated - - -

btw, although I am using firefox, the issue will exist with all other browsers also including chrome, safari and IE

 

[Infopro]

I respectfully disagree with you.

This is a browser settings issue having to do with the Windows High Contrast theme inverting colors.

I also disagree with your suggestion of "web authors" being lazy.

I also disagree with this statement:

So this IS a bug in the css used for WHM/cPanel and has a serious impact on the user experience

There may be some impact, sure. But serious impact and bug? And on how many do you think?

I don't think so. When running the High Contrast theme, it has an impact on all the webpages you visit of course. That is, unless you've configured your browser, FF in this case, to "Allow pages to choose their own colors, instead of my selections above" option. After all, the High Contrast theme is for Windows, not cPanel's style. It sounds as if you're over riding the cPanel color scheme and dislike the result you see. You're not alone.
/https://support.mozilla.org/en-US/questions/972235?

I would agree with your premise, it would be nice if the style took this idea into consideration properly. I think Paper Lantern does. Since you've no idea what Paper Lantern is, I have to wonder what version of cPanel you're on as well. Paper Lantern should be selectable from an off colored drop down selector in your current cPanel, right now I believe.

I tested High Contrast in the latest IE and FF just now. Both have their issues with the High Contrast style to be sure, you bet. But in my testing, duplicating your screenshots is not possible. You appear to be, if that is the default Windows 7 High Contrast theme, using it with a few settings changed somewhere. Fonts and borders on your forms are not default High Contrast color scheme fonts and borders for example. At least not on my end in my testing.

The good news here though is, x3 is on the way out, the older styles are dead, and Paper Lantern is the new, best game in town!


Make sure your cPanel is up to date, switch out to the new Paper Lantern theme, and report back with your findings. cPanelAdamF and his team wants to know how that goes for you, and so do I.

Now is the time to report your findings with Paper Lantern, not x3, you're a bit late on making that one better. Help make Paper Lantern more complete to meet your High Contrast needs, now is the time for that!


Thank you for your extended feedback and explanation.

 

[tempcke]

when you asked about paper lantern you just said: do you have similar issues in Paper Lantern?

Had no idea that was a theme, I never played with the themes in cPanel. I switched to Paper Lantern in one of the cPanel accounts and it is fixed there because you define a text color and a background color. However this does not fix the issues in WHM.

You said that you could not reproduce my exact screen shot, that is because I'm using xfce-dusk theme in linux/xfce

I referred to the high contrast theme in windows as also being affected because other users have complained about it on other websites.

This issue is not with browser settings, else even the paper lantern theme would be affected? so would google.com 's search bar but its not, it works fine. This is a bug in the css for WHM and is extremely easy to fix, just one line color:#000000;

Also, btw this site is also affected: https://tickets.cpanel.net/review/login.cgi it sets the background color but not the foreground color, note the browser is not overriding the foreground color, there is no foreground color defined.

To spend more time trying to argue then understand and make constructive comments and therefore this is a waist of my time. I assumed as a paying customer who uses this product in a thread having to do with user experience you might actually care what your customers think of the product and take suggestions on how to improve it rather than arguing with them.

I not only took the time to report this bug but even took the time to investigate what was causing it and how to fix it yet you just argue.

Clearly you know nothing about webdesign outside of perhaps dreamweaver (another tool used by lazy designers) so why don't you go ask someone you know who is a web designer instead of waisting your time and mine.

Todd Empcke
Logikos Technologies - Owner

 

[Infopro]

Ouch. No need to get mad at me, I'm not arguing with you at all. I even thanked you for your explanation.

I was always too lazy to use dreamweaver, FWIW.

 

[cPanelAdamF]

The internal case number for this bug is 111781. I'm afraid I can't give you an ETA on a fix, however you may watch our Change Logs (http://documentation.cpanel.net/display/ALD/11.44+Change+Log) for it.