Dudas del Fire Fox

With a seemingly endless collection
of add-ons, extensions and extras, Firefox is one of the most
customisable browsers. But you can take your customisations even
further by changing the graphics and adding your own add-ons and
extensions. We'll start by customising the graphics of a
typical Firefox skin. Because there are hundreds of graphics files in a
typical skin, a complete makeover can take a day or two. Smaller tweaks
are much simpler, however, and we'll explore a couple of simple ways to
create good-looking graphics.Themes are supplied as '.jar'
files, which are really renamed zip files. You'll find several
directories inside: Browser, Communicator, Global, Help and Mozapps.
There may also be a directory called Aero that duplicates some of
these; effectively it's a separate collection of files and directories
that's only used by themes running on Vista. Elsewhere, Browser is the
most important directory for customisation because it includes the most
obvious graphics and some of the CSS. The Global directory includes CSS
files that define the layout of the different browser windows, and
Mozapps and Help define the look and feel of the Help dialog and the
browser extras, including the Extension Manager and Update Wizard.
Customised themes also contain extra files, including 'preview.png' – a
preview of the skin. It's essential to update the two manifest
files – 'contents.rdf' and 'install.rdf' – in our new theme, even
though we haven't changed anything else. These files pass essential
information to Firefox about the contents of the theme, including the
name, compatible version numbers, author details and so on. There's a
template for contents.rdf here.
Copy this to a text editor and then do a global search and replace to
change 'My_Theme' to a name that you've chosen yourself. Similarly, you can find a template for install.rdf here.
You can add additional author information here and also define the
versions of Firefox that your new theme works with. The one minor
complication is that you'll need to fill in a custom UUID in the
<em:id> field. Use the UUID generator to generate this and paste it into your edited version of install.rdf. Customise the themeNow
that you know how to put together the bare bones of a skin, we can
start making some creative changes. Look in the browser directory for
the files 'toolbar.png' and 'toolbar-small.png'. These include all of
the main toolbar buttons arranged in a grid. The reason why there are
so many copies is to show the buttons in different states – normal,
pressed, disabled, hover and active. The easiest way to create
replacements is by using layers. Photoshop is ideal for this, but tools
like GIMP will work too. On one layer, you create the basic shapes.
Higher layers can alter their colours: lighting up a button when the
user moves their mouse over it or desaturating it if it's disabled, for
example. This means that you only have to draw your icons once, and
it's much easier to ensure consistency between buttons. Other effects
that can work well include giving the buttons a plastic look with a
sweep of translucent white around the top and a darker sweep around the
base, or boosting the outlines to make them look set into the interface
instead of just floating over it.




For
now, just do something obvious but simple to see it in action: alter
the buttons' hue in your art package of choice. For the time being,
resist the urge to change any of the icon sizes. These are controlled
by the CSS files packaged with each theme, and strange things will
happen if you don't update them properly.Repack the file back
into a zip file but change the extension to '.jar'. Install it like any
other skin and you should see your modified toolbar. If you want to,
you can now rework the other toolbar buttons. Colour changes are fast,
simple and rewarding. Because button design is difficult if you're not
artistic, another quick cheat is to download a selection of skins and
assemble a custom collection of other people's button designs into a
unique toolbar of your own. This is fine as long as you don't
distribute the toolbar.But what about the CSS? There's a lot of
it, but a quick way to find the links between the various image files
and the CSS placeholders that define where they appear in the browser
frame is to do a global search. If you edit the 'browser.css' file,
it's easy to see where the toolbar graphics fit in, and it's also easy
to change the size and position. You can take the CSS much
further by changing background colours and other basics, but this is
where updates can become more complicated. To create a coherent look
you'd need to change all of the elements, which would take a while.
It's easier to use a supporting add-on like AnyColor to work out a colour scheme and then work on the detailed graphics later. Customising the codeSo
what about customising the code? Nothing matches the satisfaction of
getting your hands dirty, but there are good reasons not to – not least
of which is that the build process isn't straightforward. For Windows
developers, the instructions on the Simple Build page
don't work. The build system uses an awkward combination of Gnu Make
and MS compiler tools, and both of these environments have severe
dependency issues. The Windows dependencies at least seem to
have been listed properly, so Visual Studio Express should give you all
the libraries you need, but on the Gnu side you'll need a full version
of Gnu for Windows that includes MinGW and MSYS and extra libraries
such as GTK+ before the Configure tool will spit out a working
collection of Make files. If you look at the Linux Build prerequisites, the list of extras you need for Windows is similar. You can find most of the extra DLLs here. Copy
the binaries either to your Windows System32 folder or the main
Binfolder in the Mozilla Build directory. The rest will need to be
installed by hand. Where Windows binaries aren't available, build them
from scratch. A far easier alternative is to use Greasemonkey,
an extension that adds customisable scripts to specific web pages. If
you wanted to, you could mash up Google's services so that your Mail
and Calendar are on the same page. A good Greasemonkey script can add
features to a site long before its original creators get round to it,
and integrate them so well that onlookers won't realise that there's
anything extra going on.To learn Greasemonkey scripting, take a look at the code for the free scripts available here.
Platypus is a WYSIWYG front end (for an up-to-date version install it
from the Firefox add-on pages) that lets you selectively remove or
modify elements from pages through a point-click menu full of options.
It's easy to remove specific ads and logos, and more skilful coding
would make it possible to killfile posts from certain posters in an
online forum. It's a good idea to use Platypus for crude selection as a
front-end processor, and then combine it with more detailed
Greasemonkey coding for more sophisticated effects.