3

I have recently begun using the DarkGreen theme for Gnome 3, however there are some problems on some webpages in FireFox regarding text input fields. This happens in the search field on Google, some fields on Facebook, etc...

This theme uses a dark background and light color text for input fields by defaut. I have managed to modify the foreground color of input text succesfully for those fields that were never affected (from near white to gray), but it doesn't help for the "broken" fields. I also want to change the background color for all input fields to white, but I get no luck with that either.

In the theme folder there is a gtk folder with a css file. Here are the relevant contents, the comments are what I changed:

@define-color theme_base_color #202020;
@define-color theme_text_color #25DC00; /* #ffffff */
@define-color theme_bg_color #121212;
@define-color theme_fg_color @theme_text_color;
@define-color selected_bg_color #3E8753;
@define-color selected_fg_color #ffffff;
@define-color theme_selected_bg_color @selected_bg_color;

@define-color menu_bg_color #555555;
@define-color menu_fg_color @theme_text_color;

@define-color menu_combobox_border @theme_selected_bg_color;
@define-color menu_separator mix (@theme_bg_color, @menu_bg_color, 0.90);

@define-color insensitive_bg_color alpha(#0b0b0d, 0.0);
@define-color insensitive_fg_color alpha(#717171, 0.50);
@define-color insensitive_border_color alpha(#717171, 0.50);

@define-color entry_text_color /* #fafafa */ #707070;
@define-color entry_background_a #ffffff;
@define-color entry_background_b #ffffff;
@define-color entry_background_c #ffffff;
@define-color entry_background_d #ffffff; /* 121212 */

@define-color frame_color #707070;

Is this CSS file the only thing I would need to change?

1

3 Answers 3

5

I'm suggesting a different way that is specific to Firefox to achieve what you want.

Close (exit) all instances of Firefox.
Go to your profile folder. It is here: /home/your_name/.mozilla/firefox/randomstring.default
In there, look for a subfolder called chrome. If it doesn't exist, create it.
If chrome does exist, look for a file called userContent.css. Otherwise, create an empty file with this name in the chrome folder.
Now open userContent.css with a text editor and paste in this code:
INPUT, TEXTAREA {color: black !important; background: #aaaaaa !important; }

Save the file (as plain text) and close the text editor.
Restart Firefox.
You should now have black text on a light gray background. You can use whatever color combination you prefer.

Notes: chrome and userContent.css are case-sensitive and should be spelled correctly.
The settings here will take precedence over those in the OS theme and will remain the same in Firefox irrespective of which gtk theme you switch to.

(By the way, you maybe interested in the Stylish extension and a whole variety of styles created by users and hosted at userstyles.org.)

Edit:
I'm providing some links related to users wanting Firefox not to be influenced by the OS (gtk) theme. Please note that I have not checked whether the solutions suggested still work or not. These links are more by way of background:
How can one make firefox ignore my GTK theme entirely?
Bug 70315 - text in menus and boxes unreadable if using dark GTK theme (for Seamonkey)
Any way to prevent Firefox from using the OS native colors?

11
  • Thanks, I will try to do it this way :) I've noticed that in the theme CSS there are also color definitions that have chrome in their name. Could they be of influence? I doubt it since I've already tried editing them as well.
    – MarioDS
    Dec 11, 2012 at 11:25
  • Apart from the Chrome browser, the term chrome can just refer to the user interface as opposed to the web page. You can take a look at this Q&A for more on the usage of chrome.
    – user25656
    Dec 11, 2012 at 11:41
  • Thanks, it's good to know that now. I've come across an explosion of terms, I'm new to the Linux world. I've only installed Ubuntu a couple of days ago, but before that I had a little experience with VMs we used in school (there was CentOS as well). They had an older version of Gnome. I started with Unity, I switched to Gnome 3, both are based on GTK3, they use Metacity (or Compiz?) as window managers, Nautilus is the file browser... You know, it can get confusing if you're just starting out :)
    – MarioDS
    Dec 11, 2012 at 17:16
  • Your answer helped out really well. The problem is whenever a website does not set default values for some elements, the theme kicks in. I don't think it's right that a theme should apply to web content. Can I disable this? I even had a problem with the skype website, which appeared mostly black, so I added default background for body = white. I have the feeling that I could end up continuously adding default values in userContent.css...
    – MarioDS
    Dec 12, 2012 at 16:40
  • Sorry for the late response! My answer is limited to the areas of web pages in which the user is required to input text such as search boxes and text areas. Am I correct that your comment above is related to other parts of the web page?
    – user25656
    Dec 13, 2012 at 1:37
1

I found the following on the ArchLinux Wiki, which can directly be applied to the problem here. I found the result to be nicer than the previous one from user25656.

The approach is the same: You create /home/<your_name>/.mozilla/firefox/<randomstring>.default/chrome/userConent.css with the following content:

input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']) {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

#downloads-indicator-counter {
    color: white;
}

textarea {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

select {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

(I can't comment due to my low reputation, that's why this is a new answer.)

0

I followed dd23's suggestion, and it mostly worked, although only for half of the messed up elements on affected pages. I found a different CSS that appears to work a bit better.

By the way, you can also use the Stylish Firefox Add-On to apply this CSS.

/*
* Use this css file to eliminate problems in Firefox
* when using dark themes that create dark on dark
* input boxes, selection menus and buttons. Put this
* in the ../firefox/default/chrome folder or your
* individual user firefox profile chrome folder.
*/
input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
input[type="radio"],
input[type="checkbox"] {
border: 2px inset white ! important;
background-color: white ! important;
color: ThreeDFace ! important;
-moz-appearance: none !important;
}
*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
}
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
}
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}

Solution from PabloTwo on the Fedora forums. This is also mentioned in comment 15 on the Mozilla bug report. Yup, this is a known bug.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .