Browserland » Themes

How To Create Your Own Firefox Skin

Giovanni Panasiti — Tue, 13 Sep 2011 19:22:10 +0000

The Internet browser is the user’s vehicle to all online information. Whether we are checking email, managing accounts, facilitating business, or watching movies, without a browser we would be stuck.

Most of us do not give the browser the credit it deserves and this is probably because most of us are not really interested in our browser itself; we are instead interested in what our browser provides us.

Firefox brings us the best of what a browser has to offer the user. Here, you will not only find a vehicle for online information, you will also find a vehicle for personal interests.

Firefox creates personalized browser themes that are tailored to the individual user. There are a couple key things to keep in mind when creating and designing Firefox skins.

The Dimension of the Firefox Browser

First and foremost, you must know your motivation and identify your audience/end user. Firefox has the largest platform for themes and can support 200 pixels in height with versions 3.6 and below showing 85 pixels and Firefox 4.0 showing 110 pixels. Below, is the design template Brand Thunder uses for Firefox.

When designing a theme, it is important to know that only certain visual elements are going to be visible in the theme. For example, both the top and bottom of the screen are not going to be available visual space for the user and less than half of the image is going to be viewable. The horizontal size of the image is going to require some design work.

The width of the image is a shifting landscape and is 3000 pixels. When looking at a browser that is expanded at 1024 pixels next to a browser expanded at 1920 pixels, you will notice how very different the pixels are from the background perspective of the image.

Split images are less weighty than single images which slow down performance. A great way to get a fully styled background with less file weight is to use screened elements and tiled textures/partial images. You want the design to be minimal and clean and patterned backgrounds are a key ingredient for good design.

Image Placement for Firefox Themes

Simple backgrounds are best for creating Firefox personas and these are usually a single 3000×200 pixel image. Brand Thunder lets you surpass this in Firefox where the creation of Enhanced Personas is possible. Enhanced Personas enable a variety of CSS background traits and let you have more color control.

You can layer a background image with solids or tiles. Images can be stacked either left or right, with the left image layered above the right. Logos work well when they are square shaped and placed into the background of the design at 50px tall. Stay away from rectangles and wide images.

The move away from horizontal lines and horizontal design elements can be seen when looking at the old and new versions of the College Humor browser theme. College Humor’s original browser theme had both a wide logo and horizontal line. The most recent theme design by College Humor is cleaner and more efficient in that it uses the space wisely, and there are less alignment complications throughout the browser.

When creating a successful browser theme, it is important that designs do not depend on the exact placement of these horizontal elements.

Crucial design components should keep a small margin from the title-bar this way they will not get misplaced in the title bar.

Where to Begin

The browser theme will be utilized a great deal by the user and therefore should not be visually overpowering. The design needs to be minimal and clear, yet also bold enough to stand out from other elements within the design. There is obviously going to be a lot going on within the theme (tabs, URL bar, etc.) and the main design elements need to be strong yet subtle. Design should not too visually complicated for the viewer/user.

Browser design is an interesting and challenging endeavor and here are a couple of user-friendly wizards to get you started. For example, BT:Engage is a platform that is currently used in private beta that allows you to create your own browser themes. Below, are some helpful tutorial sites:

BT:Engage: Firefox and IE theme creator
Firefox: How to Create Your Own Persona for Firefox
Firefox: Create and Host Your Own Personas Gallery with Personas Interactive

Author Bio:
Patrick Murphy is the founder and CEO of Brand Thunder (BT). You can follow him on Twitter @brandthunder or Facebook. The team at Brand Thunder creates persistent engagement between major brands and their online consumers with extreme makeovers for Internet browsers. BT’s new platform, BT:Engage, gives everyone the tools to build and share their own browser themes.

10 Simple Yet Highly Effective Browser Theme Designs

Giovanni Panasiti — Thu, 09 Jun 2011 19:03:06 +0000

A good browser theme is both visually appealing and highly functional. The themes below
have both of the characteristics along with others that make them both highly effective and fun
themes.

- CollegeHumor

Many people go on the internet looking for a laugh or a good way to kill some time.
CollegeHumor is a site that provides both of these functions. This theme is notable for its sleek
design and appealing color scheme. Though CollegeHumor is mainly intended for the college
ground, the browser has a wider appeal. With the website’s content delivered right to you when
you open your browser, it continuously draws you back to the website.

- House of Blues

Nothing says cool quite like the House of Blues. Who else, then, would you want to make your
web browser just a little bit cooler? The House of Blues interactive theme includes a menu that
takes you right to your favorite venue to find out what’s going on in your town’s music scene.
This is a great browser theme which will keep any music lover connected and happy.

- Daily Beast

The Daily Beast’s interactive theme adds a great toolbar to the web browser which takes the user
directly to their favorite new stories. This theme gets you to your news faster than having to go
to your favorites and get there yourself. The theme is rather minimalist although it does add a
picture of a current event behind the navigation bar. Stay informed with this interactive theme.

- Daytona

Daytona actually has a few different browser themes available based on your race. Never live
another second not knowing just how long you’ll have to wait for the next big race by installing
this theme with the built in countdown. This theme combines a love of race with added
anticipation for the next event.

- Huffington Post

For those amongst us with a more serious sense of style, the Huffington Post theme provides
clean, minimalist look that is reminiscent of a business journal. The menu bar that comes with
this theme includes links to the days top news stories. This theme makes it simple to stay current
on today’s news.

- Major League Gaming

Gamers spend a lot of time on the internet trolling for the latest trends and events. If you find
that your one of these people, then MLG has designed an interactive theme with you in mind.

With direct links to the latest gaming headlines and a sidebar filled with YouTube videos, this is
the perfect theme for any serious gamer.

- Dragon

This dragon themed interactive browser adds a little more adventure to your web browsing. No
longer to browser need to be stuck in stodgy, old realty. This amazing browser theme comes
with a sidebar full of video updates from around the web.

- Weather

Just as we all long ago started turning to the internet to tell us about the weather instead of
looking out a window, you’ ll someday think that going to an actual website to find out the
weather was a quaint notion as well. This browser tells you about the weather before you even
ask it so you’ ll always be informed about the current outdoor conditions.

- Starry night

Van Gogh did not paint the night sky on your browser, but Brand Thunder has taken the liberty
of doing it for you. This interactive theme includes a changing night sky map which the
astronomy enthusiast will surely love.

- NASA

If you like stars, but are looking for a little more details, this NASA theme will be just up your alley.
This theme updates once a week with a fresh, new pictures from NASA as they continue to explore the
galaxy (while you explore the web).

You can download these themes on BrandThunder.com. I will update the article soon with photos and links

Using Browser Themes To Boost Branding Efforts

Giovanni Panasiti — Tue, 19 Apr 2011 16:12:55 +0000

Up until very recently, companies only had their own website available as a means of establishing a web presence. Today, social marketing tools and Web 2.0 technologies introduce a host of new approaches and outlets for the brand marketer. Unfortunately, many of these new communication channels aren’t actually effective in sustaining brand awareness and building brand loyalty.

The reason for this is that they are still limited to only a narrow portion of an internet user’s overall experience, much like the brand’s original website.

One brand-developing opportunity that’s been introduced over the course of the past few years is custom browser themes that showcase the brand. This is especially effective in categories where people are proud to declare their brand loyalty, as is the case with sports teams, colleges, favorite musicians and artists, movie franchise, and news sites.

What Is A Browser Theme?

Before elaborating on the process and the benefits of creating a brand-specific browser theme, it’s best to start with a simple outline of what browser themes are.

There are a number of different internet browsers on the market (programs that people use to visit web sites).

The three market leaders are Internet Explorer, Mozilla Firefox, and Google Chrome.

Each of these three browsers allows the user to apply a theme (sometimes also referred to as a “skin”), changing the way the browser looks. Some browsers even include interactive content, changing the way that the browser functions and adding new features to the user’s internet experience.

Studies have shown that while the average internet user only spends about twenty seconds on the average web page, they spend hours navigating their browser (source: Media Consumption Patterns, 2008 JupiterResearch). As a result, browser themes translate into one of the most far-reaching and pervasive outlets available for connecting with users.

How Can I Capitalize On Browser Themes?

Since the browser’s user interface (or UI) is one of the most prominent elements of one’s internet experience, it follows that finding a way to use that real estate to generate branding opportunities is a top priority for many internet-based entities.

Brand Thunder is one company that provides exactly this type of service, working with various online brands to create specialized browser themes for them. The key to the company’s effectiveness has been their ability to bring added value to the end user, via the introduction of unique interactive elements to each browser theme.

As an example of these interactive elements, one company that Brand Thunder has worked with is IGN (an independent video game-related news site).

The IGN interactive browser theme includes a secondary search bar for IGN-specific content, a sidebar containing live-updated video game news, and a series of video game-specific tabs.

The NASA interactive browser theme (also developed by Brand Thunder) features dynamic image content, automatically updating to reflect NASA’s current image of the week.

The company creates a lasting and constant communication outlet with the site visitor, and the visitor gets the added value of well-designed interactive browser features. These branded browser themes have been proven to deliver 10 times the amount of return visits as the site would otherwise receive, and they generate a 20-30% conversion rate.

About Brand Thunder:
Formed in April 2007, Brand Thunder creates extreme makeovers for the Internet browser. Brands enjoy a persistent connection to their Internet consumer driving more website visits and increased revenue. Through a software installation, end users change the drab Internet browser into an immersive experience from their favorite sports team, entertainment franchise or Internet site. The interactive browser themes feature official logos, colors, content and functionality, and can also extend capabilities including video, music players or other Internet widgets. Current business partners and clients include Bing, CBSSports.com College Network, The Daily Beast, Huffington Post, NASCAR, NBA, NCAA, NFL, NHL and Universal Music. BrandThunder specializes in Windows Themes, Mozilla Firefox themes and soon Chrome themes.

Create Your Own Google Chrome Theme Online

Giovanni Panasiti — Tue, 16 Nov 2010 19:21:38 +0000

If you don’t like the default Google Chrome themes you can create your own Google Chrome theme just using a web-based application Chromethemes.

To create your own chrome theme you only need four .PNG files to use theme in the frame, toolbar, and various tab backgrounds.

Alternatively, you can just leave the image slots empty and chose colors for each area from the “Colors” tab.

When you’re done, just hit “Pack” and download your theme to see how it looks. It’s extremely simple to use, and a cool way to really personalize your browser. Hit the link to try it out: Create Google Chrome Themes

To use it you simply have to follow five steps:

Start

Images

Colors

Tints

Pack

How you can see with only five steps you can have your own Google Chrome Theme, that’s very cool just try it and let us know what you think!

This article was originally written by Giovanni Panasiti for Browserland and first published as Create Your Own Google Chrome Theme Online

Make Firefox Look Like Opera 10: Fopera Theme

Nico Canali — Sat, 19 Dec 2009 14:19:07 +0000

In the past we have discussed topics about how to make your Firefox browser look like another one: for example we can actually turn Firefox into Google Chrome with just two add-ons, and can give it the look of Internet Explorer with a single theme.

Today is Opera’s turn, and we will completely change Firefox to look like Opera in a matter of seconds.

Fopera is the theme we will use, and it actually redesigns the aspect of the toolbars, and even the scroll bar, to give Firefox a new look, reminding you of Opera 10.

So if you like Opera’s look, but love Firefox’s engine, features and plugins, just grab this theme today!

Installation Page: https://addons.mozilla.org/en-US/firefox/addon/51615

How To Turn Firefox Into Google Chrome With Two Add-Ons

Nico Canali — Thu, 03 Dec 2009 18:31:29 +0000

We already showed how to make Firefox look like IE 7 using a theme. Well maybe you could prefer Google Chrome’s look to IE’s, but you cannot live without your Firefox?

To transform Firefox into Google Chrome, all wee need to use is two things : a full theme which will give the look and feel, and an extension that’ll move the tabs and make them look like Chrome’s ones.

Are you ready to start? Let’s begin!

Chromifox Basic Theme

This theme, which can be installed like any other theme from the Mozilla Add-ons page, will just give a new color and a new shape to our tabs. After installation, that’s how your browser will look like:

Install Chromifox Basic here: https://addons.mozilla.org/en-US/firefox/addon/8782

Chromin Frame Add-On

Now, if you want to get the exact Chrome’s look, we just miss one little step: shifting the tabs up in the title bar, and give it the light blue color that Chrome has.

This extension just places the tab bar at the top of window, and replaces the title bar and window frame bringing it closer to the Chrome look.

Here’s what you will get:

Obviously Chromin Frame works with every theme, but it would not make sense to apply it to a non-Chrome theme…or would it?

Install Chromin Frame here: https://addons.mozilla.org/en-US/firefox/addon/10091

That’s basically it! I hope this mini-guide was clear, but if you have any questions, or if you want to suggest another way to transform Firefox into Chrome, just post a comment!

Easily Change Your Firefox Theme With Personas

Nico Canali — Tue, 01 Dec 2009 19:59:37 +0000

More than an year ago, we presented a plug-in called Personas: it was all about you Firefox theme, as it allowed to change your theme on the fly, from a huge list, without restarting your browser.

Today I just want to show how Personas works, and why it is a great plug-in to have if you like changing your browser’s appearance often.

Installing Personas

To install Personas, Just click on this button, or visit Personas’ official page at http://www.getpersonas.com/en-US/. You will be asked if you’re sure you trust the author…and we do trust the author so click the Install button and restart your browser.

Browser’s Menu

As you will notice, a small Fox will appear in the bottom left angle of your browser: clicking it will open Personas menu, and that’s where you can start looking for themes, and select the ones you like the most. You can browse all of the available themes (about 36000 right now), the most popular or featured ones, and the recently browsed.

By placing your mouse over one of the themes, will preview it instantly, as if you really applied that particular one: if you are satisfied with it, just click on its name and game is over.

Personas Web Gallery

On the official Personas web page you will find a theme gallery, in which you can find all the available themes divided by category and, as you have seen for the menu, you can just hover your mouse on one of them and get a live preview of how it’ll look like after you will click “Wear This” into the theme’s details.

Create Your Own

You can also create your own Personas theme: there is a guide available that will show you how to create one step-by-step, so that you can it for your own or even share it with the community.

Official Personas Page: http://www.getpersonas.com/en-US/

Here is also a short video that shows you how Personas works, and how it can help you to easily customize your browser to look exactly how you want it to look.

Getting Started with Personas from Mozilla Labs on Vimeo.

Firefox 3 Themes Round Up

Nico Canali — Sat, 12 Jul 2008 11:34:56 +0000

Many of you might love Firefox, but are feeling nostalgic for some other interfaces, whether of other browsers or operating systems.

Photo Credit: Nicolo’ Canali De Rossi

We have in fact covered a fabulous theme called Vista Aero, which unluckily works in Firefox 2 only, that made it possible to use Firefox using Internet Explorer 7 display.

But what now that Firefox 3 is out? How could you make Firefox 3 look like other applications?

Aero Fox

This theme gives your browser the “Aero appearance” like if your were using Windows Vista.

Aero Silver Fox

XP on Vista/Vista on XP

These two themes are practically identical, and all they do is change the icons set from Windows XP to Vista or viceversa.

XP on Vista

Vista on XP

MacOS X Theme

As the name suggests, this theme brings you MacOS X Firefox’s interface, no matter what system your are running.

MacOS X Theme

Firefox 2

Theme transforms Firefox 3 in version 2.

Firefox 2 Theme

IE6

Yes! Our loved Internet Explorer 6 is back, with Firefox behind!

IE6 Theme

Change The Look Of Gmail Or Any Website With Stylish: Gmail ReDesigned

Nico Canali — Sun, 27 Apr 2008 07:12:02 +0000

Are you tired of how your Gmail looks? Do you think that Google’s own mail client’s interface is nice and clean but you still want to give it a new more futuristic look?

All you need to have to do so, is an extension called Stylish: it is a simple add-on that imports a CSS file and applies it to any site you want, so that any page can be redesigned at your wish.

After you install Stylish, you can visit one of the sites where people upload their styles and start looking for the ones you like: the most famous one is UserStyle.org.

But let’s go to the point of our mission: Redesigning Gmail.

One of UserStyle.org’s CSS files is the one we are looking for, and you can find it at this URL, http://userstyles.org/styles/5867. After you have imported it in Stylish and restarted your Firefox, this is what you are going to get everytime you visit Gmail.

UserStyle.org has a limited length for the CSS file, so the author of the style has decided to host it on his own server. Here is where you can get the latest version, that you will have to update manually in Stylish: http://www.naverniouk.com/design/gmail/gmail.css

So get on and explore all the styles that are available, and if you want point to some of them in the comment section, so that I can review it and more people can ejoy the new view.

Here some styles selected for you by Mashable editors, ready to install: http://mashable.com/2007/06/05/firefox-stylish/

Optimize Browsing Space In Firefox: Littlefox Theme

Nico Canali — Sun, 23 Mar 2008 18:14:03 +0000

How many people have small monitors and cannot browse some huge web pages? Is there a way to make the browsing space a little bigger, without removing any element?

Photo Credit: Phil Edon

Littlefox is a Firefox theme that optimizes and makes page visualization better by shrinking and resizing elements in the upper part of your browser.

By making all the buttons, toolbars and tabs, it can make the page space bigger than it is with the default skin, and it is great specially for those who have small screens.

Obviously being a minimalist theme, it doesn’t require much hardware performance, and can be run on any computer.

Littlefox works on any Firefox version, and it is free to download and use.

Link: https://addons.mozilla.org/en-US/firefox/addon/307