As I have said before my favorite browser is Firefox. And my current operating system is Windows Vista Ultimate. They work well together, but visually I think that Firefox doesn’t fit that well. When you have Aero turned on it is even worse. I would like to make Firefox look a little bit more like IE7 on Vista. And now it does! The picture bellow shows how nice it looks now and it’s perfect fit with Windows Explorer.
How can you achieve the same result? By taking advantage of the great customization features of Firefox!
First of all I installed Glasser which is an experimental Firefox add-on that adds the Windows Vista glass frame to Firefox toolbars.
The next step is to customize other visual settings. I was surprised to find out the Firefox theming is based on CSS, so you can adjust a lot of the look’n'feel of your favorite browser like you were styling a webpage. A great add-on that can help you with this task is Stylish. It allows you to manage several stylesheets files, by adding new ones, activating/deactivating the existing ones (with preview) and even editing the files manually.
Obviously you don’t have do write your own stylesheets from scratch. There is a huge (or at least decent) database of stylesheet files for Firefox that can be found at userstyles.org. It has not only styles for your browser but also for specific websites like Gmail, Google Reader, etc.
Here’s a list of user styles that I used to accomplish the final result shown in the image above.
Native-looking progress meter for Fission ext - Makes the progress bar green and glossy like the Windows Explorer progress bar (e.g. folder search progress bar). You must use it with Fission add-on which puts the progress bar behind the address bar, otherwise it doesn’t have any effect.
Personal Menu add-on allows you to transfer the main menu items to a single button that you can put in any toolbar. It is the last button next to my bookmarks. Using this add-on you can get rid of the main menu, but have it easily accessible whenever you need it.
The best of all is that since I am using a portable version of Firefox 3, I won’t lose any customizations even if I format my computer, or move into another one.
Feel free to ask any questions regarding the customizations I’ve done to Firefox.
You can find several ways of putting some sample text in a HTML input text which fades away when you click it. Some of them use a few lines of javascript, others take advantage of Javascript frameworks, and there are even ways to achieve it using just CSS (but it doesn’t work in IE anyway). But I haven’t found any guidance on doing it to password inputs. So I did it my way.
The problem
The image bellow shows the desired behavior. When you open the webpage you can see an input with a grayed out message on it, telling the user that it is a password field. When you click the input, you can type your password (without being displayed on the page). If you click outside the input, and it is empty, the “Password” message appears again.
The solution I present is based in Javascript, and you can achieve it without using any server-side technology. But since I had to do this using ASP.NET, I’ll show you an example using this technology.
ASP.NET markup
First of all let’s take a look at the markup. I’ve create 2 textboxes, one using the Password text mode, where you can type text without displaying it on the browser, and another one which is a simple textbox with our “Password” message. I’ve grayed out this message and left the input as readonly, since we don’t need its value.
Disclaimer
As you may know I am a fan of C#, and I don’t like VB.NET that much… But since while writing this demo I accidentally created an VB.NET project, instead of creating another one I took advantage of the opportunity to test my VB.NET skills. Now I love C# even more…
Javascript Injection
Now lets the the Javascript part of the solution. I use ASP.NET to inject the Javascript into the page in the server-side. I use the Attributes property of the textboxes to set styles and client-site event handlers. In order to hide the real password input when the page is rendered, I set the style attribute of the input element with the value “display:none”. When the fake password input gets focus, the browser hides it, shows the real password input and changes the focus to it. The user doesn’t even notice the input switch, at least if you make sure that the two inputs have the same style. When the password input loses focus (onblur event), if it is empty, the fake input is shown again .
About ClientID
If you are not that familiar with ASP.NET, or at least with client-side scripting used with ASP.NET, you may be wondering that is ClientID. Well, in this example it has the server-side name of the textbox, but when you use User Controls or Master Pages, not always the server-side name of a control is the same that the name/id in the client-side. So the ClientID property gives you the name/id that will be valid while trying to access the control on the client.
What if there is no Javascript support…
Ok, it works fine. And it is pretty clean. But what if by some reason the Javascript is disabled in the client browser? Well… The user won’t have access to the real password input, and will get stuck with the fake input which has the “Password” text and is read only. Even if he could write on it, in the server side the password wasn’t expected from that input anyway. So we need a solution that works even when Javascript is disabled. The user will not have the fancy sample text inside the input, but he will be able to type and send the password to the server. How?
First of all the default visibility status of the inputs will have to change. When the page is rendered the real password input must be visible and the fake one invisible. This way if Javascript is disabled, the user will get a standard password input. After the page is loaded, if Javascript is enabled, we switch the inputs. This switch occurs before the user sees the page, so the final result is the same (while using a Javascript-enabled browser).
The code that the “…” hides is the code of the first VB.NET block.
RegisterStartupScript
This is the method used in order to register script that is supposed to be used in the client side. Page.ClientScript has other nice methods, that allow your to attach onSubmit client-side event handlers and do other client-side Javascript related tasks. Two nice links about RegisterStartupScript are this an this.
See the first result? It’s this website. See that foto associated with my website? It is not me. It is some other Bruno Silva which is a professional football player. Bad association…
See the second result? It is a webproxy, linking to my website, not relevant either. Oh and the photo isn’t mine either.
Posted on 6:57pm 7/28/2008 by Bruno Silva in Curiosities, Web
It’s a new search engine that claims to be the world’s biggest search engine (at least concerning the number of indexed pages). There is a lot of people interested in this potential new Google rival.
Cuil is supposed to be read as “Cool”, don’t ask me how and in which language. I love the interface is really appealing and innovative in searching engines (at least I haven’t seen anyone similar). The suggestion system is nice too.
The search engine has some flaws, though. When the system is restored I’ll leave an example.
Now I love C# even more…
