Change tab font size using userchrome.css

User Help for Mozilla Firefox
Locked
nabilalk
Posts: 135
Joined: February 7th, 2007, 5:37 pm

Change tab font size using userchrome.css

Post by nabilalk »

Hi, I have a friend who is starting to lose his sight. I figured out how to increase the font size of the address bar as well as the search bar already, using some UserChrome.css tweaks and the ChromeEdit Firefox add-on. I can't find a code to increase the font size displayed on the tabs, or bookmark bar. Any suggestions?

Here is the UserChrome.css

Code: Select all

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/*
 * Some possible accessibility enhancements:
 */
/*
 * Make all the default font sizes 20 pt:
 *
 * * {
 *   font-size: 20pt !important
 * }
 */
/*
 * Make menu items in particular 15 pt instead of the default size:
 *
 * menupopup > * {
 *   font-size: 15pt !important
 * }
 */
/*
 * Give the Location (URL) Bar a fixed-width font
 *
 * #urlbar {
 *    font-family: monospace !important;
 * }
 */

/*
 * Eliminate the throbber and its annoying movement:
 *
 * #throbber-box {
 *   display: none !important;
 * }
 */

/*
 * For more examples see http://www.mozilla.org/unix/customizing.html
 */
/*tab .tab-text {
  font-size: 20px !important;
}
/* change the tab toolbar height */
.tabbrowser-tab {
  height: 40px !important;
  padding-right: 4px !important;
}
.tabbrowser-strip {
  height: 40px !important;
}



/* searchbar font type size */
   #searchbar { font-family: Arial !important; font-size: 14pt !important;
   }
/* Change address bar font */
   #urlbar{ font-family: Arial !important; font-size: 14pt !important;
   color: Black !important; background-color: White !important;
/* change all the fonts together */
menubar,
menubutton,
menulist,
menu,
menuitem,
textbox,
toolbar,
.tab-text,
tree,
tooltip,
sidebarheader,
statusbar
}


The tab text code doesn't seem to be working. What am I missing?

Code: Select all

/*tab .tab-text {
  font-size: 20px !important;
}

Also, is there a 3.1b2 compatible FF theme that will increase the size of these elements? I couldn't find one. Thanks!

-nka
User avatar
m:a:r:k
Posts: 239
Joined: June 4th, 2005, 8:55 am
Location: Highland

Re: Change tab font size using userchrome.css

Post by m:a:r:k »

Try my Firefox link below for some ideas.
But mostly the code above does nothing. Most is commented out. The only viable bit is the /* change the tab toolbar height */ part.
The section after that is badly constructed.

The tab text code also has a /* at the beginning which is part of a comment.
This will probably work.

Code: Select all

.tab-text {
  font-size: 20px !important;
}


To change the font size universally:

Code: Select all

/* global font */
* {
  font-size: 12pt !important;
  font-family: Verdana !important;
}


A font like Verdana is easier to read because the characters are more widely spaced than, say, Arial.
Mark

My Firefox and Thunderbird userChrome.css collection
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Change tab font size using userchrome.css

Post by Frank Lion »

http://www.accessfirefox.org/Metal_Lion_HiViz_300.php

This will also be updated to the latest Firefox version soon.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
alterna
Posts: 3993
Joined: January 16th, 2007, 8:27 am
Location: Big Apple

Re: Change tab font size using userchrome.css

Post by alterna »

try

Code: Select all

/* Set font for tabs' text */
.tabbrowser-tab  .tab-text
    {
      font-size: 20pt !important;
      font-family: Copperplate Gothic Bold !important; }

adjust size and font to taste

for appropriate tab height

Code: Select all

/* change the tab toolbar height */
.tabbrowser-tab {
  height: 24px !important;
  padding-right: 4px !important;
}
.tabbrowser-strip {
  height: 24px !important;
}
"So it goes" - Kurt Vonnegut, Jr.
Bozz
Posts: 2684
Joined: October 18th, 2007, 1:53 pm

Re: Change tab font size using userchrome.css

Post by Bozz »

Code: Select all

/*tab .tab-text {
  font-size: 20px !important;
}

Remove /*

Your code works for me.
nabilalk
Posts: 135
Joined: February 7th, 2007, 5:37 pm

Re: Change tab font size using userchrome.css

Post by nabilalk »

Frank Lion wrote:http://www.accessfirefox.org/Metal_Lion_HiViz_300.php

This will also be updated to the latest Firefox version soon.


Hi, that looks exactly like what I'm looking for. Please post on this topic or IM me when the update is available. Thanks!

-nka
nabilalk
Posts: 135
Joined: February 7th, 2007, 5:37 pm

Re: Change tab font size using userchrome.css

Post by nabilalk »

m:a:r:k wrote:Try my Firefox link below for some ideas.
To change the font size universally:

Code: Select all

/* global font */
* {
  font-size: 12pt !important;
  font-family: Verdana !important;
}


A font like Verdana is easier to read because the characters are more widely spaced than, say, Arial.


Thanks Mark. Your code worked nicely ;-) What code should I use to force all the text displayed on web pages to have the same global font? I have adjusted the font settings in Contents page, and unchecked "allow pages to choose their own fonts...". However, some pages display a different font than others.



-nka
Last edited by nabilalk on December 20th, 2008, 9:57 pm, edited 2 times in total.
nabilalk
Posts: 135
Joined: February 7th, 2007, 5:37 pm

Re: Change tab font size using userchrome.css

Post by nabilalk »

I would like to set a global display font of 18 Verdana for all web pages. How can I do that?

Thanks everyone for your thoughtful suggestions!
dfdij
Guest

Re: Change tab font size using userchrome.css

Post by dfdij »

This is all above my head. Where do you paste the code once you select all? I've gotten to the chrome message in the profiles fine. But what to do next?
Guest
Guest

Re: Change tab font size using userchrome.css

Post by Guest »

Honestly, does one need a computer degree simply to increase the font size in the toolbar? Why isn't Firefox making this easier on users?
Locked