Tuesday, July 22, 2008

A Mind-Blowing Theme for Firefox

You’d have read about this one in my previous posts, but that is rare cuz this blog is new anyway, so y

ou’d better check out some pictures in my previous post, and if you like the theme, then you can get it here :

icon DOWNLOAD INCOMPLETE

 

Close-up Incomplete v1.2

Preview 2

 

 

 

 

 

Since the release of Firefox 3’s RC1, I’d been using the 3rd version of the fox, and it was superb even in those early days… The autocomplete dropdown was excellent, the redefined icons were classy and witty, security was better, and the browser stable. But there was one thing which always came to my, and I am sure, many others’ minds : Nearly Zilch Themes for Fx 3!!!

Things have changed now, but the number is still low, and still there are very few ‘GOOD’ themes for FX, and whatever themes I set my eyes upon were accompanied by a gray box saying :

One of the worst notifications!!

So… There were two ways : Wait for another 12 months, or change the time limit… I chose the latter, as you’d have read in my previous two posts…

Here is a link to the theme, (which is still in the ‘sandbox’, so you’d have to become a member of addons.mozilla.org for getting the theme), but I’ll notify here when the theme goes public.

DOWNLOAD INCOMPLETE

Hope you enjoy it… And feel free to give your feedback, cuz that will help me make it more ‘Complete’ and help it get out of ‘sandbox’ into the public category.

Sunday, July 20, 2008

Making A Firefox Theme : Part 2

As my previous post showed you the basic way to kick-start your mind in the direction of making a good theme, this one tells how I did it.

First of all, I took a Bible-Blue theme by Bodizzle (AMO), and… well… ripped apart the theme to see its entrails… Then, I set off into creating new icons, but soon saw that just the icons would not do enough, so changed the Toolbar background image… After doing some basic icons, I felt satisfied and used it on Firefox (now I’m calling it Fx)… To tell the truth, it was not bad, so i quickly posted it on AMO (addons.mozilla.org), and even though it recieved many glowing reviews, and a 4.3 star rating, I knew, by use, that just changing the icons and toolbar background wasn’t enough. So I set off a bit deeper, and changed some more icons.

By this time, I came to the saturation point (in the field of icons), and knew I had to put my thoughts to CSS. But when I opened the files, it was next to greek… But that was because I had had a long hiatus from any HTML coding. But as I spent one more day, things started becoming clearer, and I tweaked some properties, and released another version at AMO (very prematurely).

Then after some so-so kind of reaction, I dived into CSS full time, and forgot that I was a human, and spent 2 whole days (and half the nights) tweaking every aspect of my theme. But I realized that I didn’t know what every inch of the CSS did, so I used 2 or more themes as a ‘reference’ and compared my CSS to theirs, and found out that I had made a very big mistake in my choice of the base skin… There were many loopholes, and the Bible theme was lacking many features which even the Firefox’s Classic theme had. But since I had already given my theme so much time, there was no point in turning back… Finally I overcame the shock, and after another 2 updates, I finally managed to address much of the designing part, and the theme now is… well… sort of… Complete. (But this is just v1)

Here are some screenshots :

Preview Incomplete v1.0.3

This is the original… not anything to distinguish it from…

Close-up Incomplete v1.0.3

Here is a close-up of the toolbar : very plain…

Preview Incomplete v1.1

If you think I had done enough to make it look pretty, then look below

Preview Incomplete v1.2

This is the current release : very usable, very stable, and of course, very Gorgeous. Reinvented everything from scrollbars, to the dropdown menus…

Close-up Incomplete v1.2

Come on now… Give it a try… It ain’t tough at all…

Saturday, July 19, 2008

Making A Firefox Theme : Part 1

I was inactive for a long long time (by web’s standards), not because I had nothing to write, but because I was involved in a really addicting task of making a Theme.

Sure you know what a theme/skin is cuz that’s why you have come here. So without wasting much time, lets get started.

First, you need to know how a theme works in Firefox. Well, there are ‘basically’ 3 things involved. Images, CSS and XML… You’d be thinking “Shit man… I can’t do this… xml??? what is this???” If you’re thinking something equivalent to that, you are wrong. But for now just forget about those things and read on.

First step is deciding what to create. Once you get a basic picture of your theme, you can do two things : Get a ready-made theme and open it up, edit the CSS and alter images, etc and repackege it. Or make every inch of the theme yourself (which, frankly is a pretty hard proposition… monumental actually… if u r a beginner)

Now, if you get a theme of your choice on the net, download it or get it from your user profile (find it at

%system-drive%\Documents and Settings\(your profile)\Application Data\Mozilla\Firefox\Profiles\(your profile)

Alternately, you can use firefox’s default theme (get it in firefox’s folder…)

Now, you’d have noticed that the theme is a .jar file… How do you extract all the files?? Easy… If you have WINRAR, you can directly unpack the files… or you can rename the .jar to .zip and then unzip it normally.

Now normally you’d find 5 folders (can be more)… They contain the files of those components. Now, first to the BROWSER folder. You’d see many icons/images and some CSS files… Confused?? Well, first try changing some Toolbar icons… Remember the resolution of the image though (if the icons are 32x32, and you make a 24x24 icon, the browser won’t look good… So taking care of resolution, edit the files in a GOOD image-editor (not MS Paint… it is one of the worst things around… IMO)… (A tip : USE GUIDES and Grids… It’d help you overcome the situation in which another icons parts encroach upon other’s territories…

Now, once you get involved in creating icons, do it fully. Then turn your attention to the other important part : CSS… If you prefer not changing the font colours and browser colours and behaviour of icons,etc, then you can leave these alone, and proceed to the next step. If you know atleast some HTML, this could get interesting… If you do know how CSS works, then go for it (unless the original  theme is superb).

The CSS files do exactly what they are named… So whatever you want to edit, search that file and find the relevant property and edit the desired line. You can add some more features/properties to the theme if the theme does not have some components.

Now, once you are done with CSS files, come to the root folder where you have the stored the 5 (or more) folders… There would be 2 files : icon.png and preview.png (normally). Edit these to make them look like what you want people to recognize your themes by. Now, edit the install.rdf and contents.rdf files… here you have to edit only 2 or three lines in Install.rdf :

<Description about="urn:mozilla:install-manifest">
    <em:id>extensionname@organization.tld or GUID</em:id>
    <em:version>version-number</em:version>

You can get a UNIQUE GUID for your theme here :

GENERATE GUID

Copy the generated GUID to the place of <em:id>-------</em-id> mentioned earlier.

But you need to give either a GUID or the type mentioned above.

Now scroll a bit lower and edit this line :

<!--
<em:updateURL></em:updateURL>
<em:aboutURL></em:aboutURL>
-->
<!-- Front End Integration Hooks (used by Theme Manager)-->
   <em:internalName>extension-name</em:internalName>
</Description>     

(If you want to specify an external update link, you can specify it here… but if you are posting the theme on addons.mozilla.org (AMO), then you can skip this part. The internal name is the name by which you want firefox to store the theme in your user profile.

Now, come to CONTENTS.rdf, and replace any occurence of the original theme name by your own theme’s INTERNAL NAME… Just see the tags, and you’ll understand what you have to change and what to leave… Its plain english (nearly)

Once you are done, you zip the file (using Winzip/Winrar/ any other software you have) and rename the filename from .zip to .jar

Now Drag the theme from its location to the ‘addons’ window in Firefox. This will install your theme in firefox, see how it is, and if it is good enough, you can post it to AMO…

Best of luck…

Thursday, July 03, 2008

Bill & XP’s Windows Closed

This week marked two developments for Microsoft, and both of them were monumental : Bill Gates called it quits (apparently), and XP was forced to call it quits…

The former World’s Richest Man will still be the associated with MS, but would divert his energy to the Bill & Melinda Gates Foundation. He, who inspite of being on top of the world has pledged all but 1% of his wealth to humanity, was a great man indeed. Though many would call him a pilferer for ‘stealing’ Apple’s ideas, but he was the man who made all the difference to our worlds… Imagine going 100 miles to a University or Lab to gain access to Internet!! He brought the PCs within our reach, and made the software industry what it is.

And now to the second one :

Microsoft won’t be marketing any new XPs in the main market after they took it off the shelves on 30th June, and so forcing new buyers to go with Vista. Many people see this as a bad thing, giving ‘lame’ reasons like Slower OS, new interface, and even AERO!! Isn’t it ridiculous how people go on cursing Microsoft for all of their curses, but still not move on to Linux so quickly?

I myself have used Vista for a month now, and it is very stable… Not crashed on me once… And about hardware problems : They have largely been resolved by SP1… And Vista is not a very BIG memory hog… 1 GB is sufficient, but 2-3 gigs would be great. About the rearrangement of items like in Start Menu and Menu Bar (in folders), I can say that it has been made much cleaner and easier, add to that the excellent readability and usability, here is a very good OS.. Just marred by bad publicity…

Take my word : If you hate it, Give Vista a try and you’ll feel different.