Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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?

share|improve this answer
    
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. –  MDeSchaepmeester Dec 11 '12 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 '12 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 :) –  MDeSchaepmeester Dec 11 '12 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... –  MDeSchaepmeester Dec 12 '12 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 '12 at 1:37
show 6 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.