Customizing Mozilla Firefox<base href="http://www.atruereview.com/" /> <link rel="shortcut icon" href="http://www.atruereview.com/images/favicon.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="http://www.atruereview.com/templates/rt_versatility_iii/css/template_css.css" rel="stylesheet" type="text/css" /> <link href="http://www.atruereview.com/templates/rt_versatility_iii/css/style10.css" rel="stylesheet" type="text/css" /> <link href="http://www.atruereview.com/templates/rt_versatility_iii/slimbox/slimbox.css" rel="stylesheet" type="text/css" /> <link href="http://www.atruereview.com/templates/rt_versatility_iii/css/rokmoomenu.css" rel="stylesheet" type="text/css" />  <link rel="shortcut icon" href="http://www.atruereview.com/images/favicon.ico" /> <style type="text/css"> td.left div.moduletable, td.right div.moduletable, td.left div.moduletable-hilite1, td.right div.moduletable-hilite1, td.left div.moduletable-hilite2, td.right div.moduletable-hilite2, td.left div.moduletable-hilite3, td.right div.moduletable-hilite3, td.left div.moduletable-hilite4, td.right div.moduletable-hilite4, td.left div.moduletable-hilite5, td.right div.moduletable-hilite5, td.left div.moduletable-hilite6, td.right div.moduletable-hilite6, td.left div.moduletable-hilite7, td.right div.moduletable-hilite7, td.left div.moduletable-hilite8, td.right div.moduletable-hilite8 { width: 175px; } div.wrapper { margin: 0 auto; width: 868px;} </style> <script type="text/javascript" src="http://www.atruereview.com/templates/rt_versatility_iii/js/mootools.r462.js"></script> <script type="text/javascript" src="http://www.atruereview.com/templates/rt_versatility_iii/js/roktools.js"></script> <script type="text/javascript" src="http://www.atruereview.com/templates/rt_versatility_iii/js/mootools.bgiframe.js"></script> <script type="text/javascript" src="http://www.atruereview.com/templates/rt_versatility_iii/js/rokmoomenu.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { new rokmoomenu($E('ul.nav'), { bgiframe: false, delay: 500, animate: { props: ['opacity', 'width', 'height'], opts: { duration:400, fps: 100, transition: Fx.Transitions.sineOut } } }); }); </script> </head> <body id="page_bg" class="f-default"> <script type="text/javascript" src="http://www.atruereview.com/templates/rt_versatility_iii/js/slimbox.js"></script> <div id="fxContainer"> <div id="fxTarget"> <div id="fxPadding" class="wrapper"> </div> </div>  </div> <div id="template" class="wrapper"> <div id="header"> <a href="http://www.atruereview.com" class="nounder"><img src="http://www.atruereview.com/images/blank.png" style="border:0;" alt="" id="logo" /></a> <div id="banner"> <div class="padding"> <form action="index.php?option=com_search&Itemid=5" method="get"> <div class="searchroflmao"> <input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputboxroflmao" type="text" size="20" value="search..." onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> </div> <input type="hidden" name="option" value="com_search" /> <input type="hidden" name="Itemid" value="5" /> </form> </div> </div> </div> <div id="horiz-menu" class="moomenu"> <ul class="nav"> <li><a href="http://www.atruereview.com/">Home</a></li> <li><a href="http://www.atruereview.com/news/">News</a></li> <li><a href="http://www.atruereview.com/search.html">Search</a></li> <li><a href="http://atruereview.com/oldrev.php">Old Reviews</a></li> <li><a href="http://www.atruereview.com/atruereview/articles.php">Old Articles</a></li> <li><a href="http://www.atruereview.com/contact/contact.html">Contact</a></li> <li><a href="http://www.atruereview.com/links/links.html">Links</a></li> <li><a href="http://www.atruereview.com/accessories/2.html">Reviews</a></li> </ul> </div> <div id="top"> </div> <div class="clr" id="mainbody"> <table class="mainbody" cellspacing="0" cellpadding="0"> <tr valign="top"> <td class="left"> <div class="moduletable"> <h3> Main Menu </h3> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="left"><td><a href="http://www.atruereview.com/" class="mainlevel" >Home</a></td></tr> <tr align="left"><td><a href="http://www.atruereview.com/news/" class="mainlevel" >News</a></td></tr> <tr align="left"><td><a href="http://www.atruereview.com/search.html" class="mainlevel" >Search</a></td></tr> <tr align="left"><td><a href="http://atruereview.com/oldrev.php" class="mainlevel" >Old Reviews</a></td></tr> <tr align="left"><td><a href="http://www.atruereview.com/atruereview/articles.php" class="mainlevel" >Old Articles</a></td></tr> <tr align="left"><td><a href="http://www.atruereview.com/contact/contact.html" class="mainlevel" >Contact</a></td></tr> <tr align="left"><td><a href="http://www.atruereview.com/links/links.html" class="mainlevel" >Links</a></td></tr> <tr align="left"><td><a href="http://www.atruereview.com/accessories/2.html" class="mainlevel" >Reviews</a></td></tr> </table> </div> <div class="moduletable"> </div> </td> <td class="mainbody"> <table class="sections" cellspacing="0" cellpadding="0"> <tr valign="top"> <td class="section w99"> <div class="moduletable"> </div> </td> </tr> </table> <div class="padding"> <h2 align="center"> <?php include '../banner.php' ?> </h2> <h2 align="center">Customizing Mozilla Firefox (cont.)</h2> <p align="left"><strong>Using CSS Styles:</strong></p> <p align="left">To edit IE's look, you need to edit the registry or have some third party application. Even then, you are limited in what you can do; not so with Firefox. I initially found this when I wanted to extend the Google search bar because it is so small that you can never view every word in multi-word search.</p> <p align="center"><a href="atruereview/firefox/newtoolbar.gif"><img src="atruereview/firefox/newtoolbarth.gif" alt="Customizing Mozilla Firefox" border="0" width="350" height="259"></a><br> <font size="-1">Click on image for larger picture</font> </p> <p align="left">I found information to do this on Firefox's <a href="http://www.Mozilla.org/support/firefox/tips">web site</a>. In this section, I want to make you aware of what you can do, not so much show you every code snippet. With that said, to make any of these adjustments you have to edit the userChrome.css file. On Windows XP this is located under the C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\ You will find an 8 character folder with the .default extension. Rename the userChrome-example.css to userChrome.css and edit the features you want.</p> <p align="left">I added this code:</p> <blockquote> <pre>/* Make the Search box flex wider (in this case 600 pixels wide) */ #search-container, #searchbar { -moz-box-flex: 600 !important; }</pre> </blockquote> <p align="center"><a href="atruereview/firefox/bigsearchbar.gif"><img src="atruereview/firefox/bigsearchbarth.gif" alt="Customizing Mozilla Firefox" border="0" width="350" height="261"></a><br> <font size="-1">Click on image for larger picture</font> </p> <p align="left">You can also edit font colors, sizes, and types. This is very useful if you use a Windows theme that doesn't allow you to see the menus very clearly. Below is code to edit both the buttons font and the active tab color.</p> <blockquote> <pre>/* Change color of active tab */ tab[selected="true"] { color: red !important; } /* Change color and font size of button text */ .toolbarbutton-text { font-size: 8pt !important; color: #5B6BAF !important; font-family: Arial bold !important; } </pre> <p align="center"><a href="atruereview/firefox/cssedit.gif"><img src="atruereview/firefox/csseditth.gif" alt="Customizing Mozilla Firefox" border="0" width="350" height="261"></a><br> <font size="-1">Click on image for larger picture</font> </p> </blockquote> <p align="left">If you are looking for a full list of components that can be changed with styles, try Firefox's <a href="http://www.Mozilla.org/unix/customizing.html#usercss">web site</a>.</p> <p align="left">You can see the endless possibilities, but let me add another file in, user.js. This file will have to be created for it does not exist by default. Here you can control more of the functionality of Firefox such as pop windows, site blocking and tabbed browsing. One feature is to add extra options for tab browsing. As mentioned before there is a nice extension that does this but you might not want to use it. Adding the following code will unlock the other features of tabbed browsing.</p> <blockquote> <pre>// Reveal more tab/window options: user_pref("browser.tabs.showSingleWindowModePrefs", true);</pre> </blockquote> <p align="left">If you aren't a javascript programmer you are probably lost when changing these options. An easier way to change options is to bypass the .js file and type <strong>about:config</strong> into your URL box. This brings up a list of options that you can configure by clicking on them. Such options could be changing the default search engine in case you hate Google, or reordering them.</p> <p align="center"><a href="atruereview/firefox/aboutconfig.gif"><img src="atruereview/firefox/aboutconfigth.gif" alt="Customizing Mozilla Firefox" border="0" width="350" height="256"></a><br> <font size="-1">Click on image for larger picture</font> </p> <p align="left"><strong>Conclusion:</strong></p> <p align="left">Firefox is a good solid browser, but what gets missed is that it is the most customizable browser I have ever seen. Hopefully, this article has opened your eyes to customizing your browsing experience so that it fits your needs.</p> <p align="left"><a href="atruereview/firefox/firefox_extensions.php"></a> <a href="firefox/firefox_extensions.php">Previous (Extensions & Live Bookmarks)</a></p> </div> </td> </tr> </table> </div> <div id="footer" class="clr"> <div class="rk-1"> <div class="rk-2"> <div id="the-footer"> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-6922792-1"); pageTracker._trackPageview(); } catch(err) {}</script>  </div> </div> </div> </div> </div> </body> </html>