Changing abrowser's buttons font color (SOLVED)

7 replies [Last post]
arielenter

I am a member!

I am a translator!

Offline
Joined: 08/25/2010

Since a few updates I noticed that abrowser's default buttons font color was changed to white, making them very difficult to read with their gray background.

I didn't find any post about it, so I wanted to share how I was able to change this.

1.- Open abrowser and press ALT to show the top menu, then click on Help → Troubleshooting Information

2.- Click the Show Folder button beside the Profile Folder entry.

3.- Once there, look for and open your abrowser's profile directory. If you haven't create any other profile, that will be the one that ends in ".default"

4.- Create a directory and name it "chrome".

5.- Go into the recently created directory "chrome" and create two files with the following names: "userChrome.css" and "userContent.css".

6.- Copy and paste the following in the two files and save.

button, input[type="submit"], input[type="button"] {
color: black ! important;
}

7.- Finally restart abrowser.

Maybe some one can come up with a better code.

Another thing that can be appreciated is that the buttons seem to be a little small. Apparently they lack upper and bottom paddings. This could be solved with a little extra css code, but for now, I think I'll leave them as they are as they don't bother me too much and I'm hopping this will be solved in future updates.

I believe this is an abrowser bug so I might file a bug report if others are having the same problem.

Thank you all.

arielenter

I am a member!

I am a translator!

Offline
Joined: 08/25/2010

UPDATE: SEE MY LATEST UPDATE, THANK YOU

We shouldn't use "! important" in my code, other wise font color on custom made websites would be overwritten as well :S

So the code should be as follow:

button, input[type="submit"], input[type="button"] {
color: black;
}

Thank you all.

Magic Banana

I am a member!

I am a translator!

Offline
Joined: 07/24/2010

Thank you!

Here is a command line (to copy-paste and execute in a terminal) to do the whole process, not overwriting (just appending the new rules) profile-directory/chrome/userChrome.css and profile-directory/chrome/userContent.css if they already exist:
$ chrome=~/.mozilla/abrowser/$(grep Path= ~/.mozilla/abrowser/profiles.ini | cut -d = -f 2)/chrome; mkdir -p $chrome; echo 'button, input[type="submit"], input[type="button"] {color: black ! important;}' >> $chrome/userChrome.css; echo 'button, input[type="submit"], input[type="button"] {color: black;}' >> $chrome/userContent.css

jules_verne
Offline
Joined: 01/02/2017

Thank you very much! This was quite annoying. I had to change to Icecat in order to run around the problem.

arielenter

I am a member!

I am a translator!

Offline
Joined: 08/25/2010

UPDATE:

userChrome.css controls the look of abrowser's windows (Closing confirmation prompt and Save/Open dialog for example) and userContent.css control the default appearance of the content on websites.

It seems that userChrome.css does require "! important" to work, so it's fine to add it since it won't affect the content of website as userContent.css does.

Therefor you should use the following code in userChrome.css:

button, input[type="submit"], input[type="button"] {
color: black ! important;
}

And leave userContent.css as before:

button, input[type="submit"], input[type="button"] {
color: black;
}

I'll open a bug report for this.

Magic Banana

I am a member!

I am a translator!

Offline
Joined: 07/24/2010

I modified the command line above accordingly.

arielenter

I am a member!

I am a translator!

Offline
Joined: 08/25/2010

Here is the bug report: https://trisquel.info/es/issues/23037

pete
Offline
Joined: 01/05/2011

Many thanks to arielenter and Magic Banana for their contributions.

I just copied and pasted Magic Banana's code into a terminal and all is well now. :-)