Creating Your Own Browser Theme

The browser is one of the most used applications on the computer, yet marketers sometimes overlook this platform for some of their marketing initiatives. The average web user is online 5 hours a day and might spend 2 minutes on your website.

But what if you could keep your fans in front of you the entire 5 hours they are online? This is now possible with the recent browser theme tool recently created by Brand Thunder, a company that has worked with some of the largest brands in the world to help increase fan engagement. Clients include: CBS Sports, Huffington Post, Bob Marley, The Daily Beast, NBA, NHL, NFL, College Humor, Looking For Group Comics, and many more.

If you like this article, you might be interested in some of our other articles on The Branding Potential of the Internet Browser, IE9 – The Final Incarnation Of Internet Explorer, A Guide To Split Testing , and Applications of AIDA.

What does it mean exactly to create an interactive browser theme? A great example would be the theme they did for the news site The Huffington Post.

huffingpost Creating Your Own Browser Theme

This theme has a simple design that’s easy on the eyes and yet keeps both The Huffington Post brand and content in front of those using the theme. According to The Huffington Post, this theme yielded some impressive results to the tune of an 8x increase in site visits from those using the browser! That means people who read The Huffington Post on average about 5 times per month were now visiting the site 40 times per month. Obviously, this custom browser thing has its perks. So how can you get in on the action?

Fortunately for those of you without the resources of a HuffPo, you don’t have to hire a team to make a theme like this for you. You can create one yourself in minutes with BT:Engage, Brand Thunder’s new browser theme tool. Here’s how…

Step One: Visit BT-Engage

Go to http://bt-engage.com and create an account. Then decide what sort of theme you want to create. For this tutorial we’ve chosen: SloDive.com

Step Two: Create Theme

Click – “Get Started”

get started Creating Your Own Browser Theme

Step Three: Select Browser

Select which browser you will be designing for. We will be sticking with Firefox but the steps should be extremely similar if not the same for both Firefox and IE.

browser Creating Your Own Browser Theme

Step Four: Choose a Background

Choose a background. Since we are designing a theme around the website www.SloDive.com, we are going to use the properties window to make the background black to match the look of the site. In the “Properties” window, simple add the CMYK value for a black background, which is simply “000000”. Don’t forget to name your theme here as well. In this case “SloDive”.

background Creating Your Own Browser Theme

Tip: Add a Custom Background

If you would like to use a custom designed background instead of just a standard background color, you can do this at this step as well. The recommendation here is to make your background image 3,000 pixels wide. It’s a good starting point if you’re only using a single background image and want to ensure the background works for almost all monitor sizes. For BT:Engage themes, you may want to limit the height to 100 pixels. The theme creator currently re-sizes your background image to fit the height of the theme (about 100 pixels). So if you upload a 3,000 x 200 pixel background image, when it re-sizes to 100 pixels high, it’ll also shorten the width to 1,500 pixels. Even Firefox recommends this type of guidance for their own personas design guidelines.

To upload your background image file, simply click on the “My images” tab and click “Upload Background”. You will then be able to drag your background onto your theme to position it as you see fit:

upload image Creating Your Own Browser Theme

Once you have added your background image, you can position the background where you would like on the browser. You can check “Lock Aspect Ratio”, to retain resolution and your image quality.

aspect ratio Creating Your Own Browser Theme

Step Five: Add Your Logo

First you’ll want to click on the “My Images” tab in the assets section at the bottom of the page. Next you’ll need to upload the logo you’re using from your computer. We simply went to the SloDive website, screen-captured the logo on the about page and uploaded that image. Many times you can simply “Right-Click” on your website’s logo and save the logo on your desktop.

Once your logo image appears in the assets area, click on it and drag it over top of the theme you’re creating. When you release the mouse button the image will be loaded and placed automatically. Adjust image size according to your personal taste, but be sure to click the “lock aspect ratio” check box in your properties window just like you did for your background image, to retain resolution and your logo image quality.

An image saved to “Logo” will always anchor to the left of the browser. In Firefox it will push all of the browser navigation to the right. Our suggestion is to stick with small, square logos, not wide ones. Pushing the navigation too far to the right creates problems for your browser users who are used to seeing the “Back” button in a certain place.

Step Six: Link Your Logo To Your Website

You want people to visit your site regularly, right? After uploading your logo and aligning it where you desire, you can also add your website URL directing clickers of your logo to your homepage. In this instance, we will enter the link: http://SloDive.com

homepage Creating Your Own Browser Theme

Step Seven: Choose Widgets

Choose some widgets that encourage the types of engagement you’d like to see from those who will use this theme. Since SloDive has a feed, we are going to drag the RSS widget just underneath the search bar on the upper right side of the theme, and paste the SloDive RSS link into the properties window. Be sure to click “validate” and then “save.”

You can add other widgets to the theme including social media accounts, popular pages on your website, or even products you have for sale.

Here is what the SloDive browser theme ended up looking like with the logo, background, RSS feed and widgets added.

rss widget Creating Your Own Browser Theme

Step Eight: Install & Share Your Theme!

Once you’ve click the finish button at the top left hand corner, your theme will be built and you’ll be taken to another page where you can download and install your theme for free. You can also share this page with others so they can use your theme as well.

Here is the theme download page: https://bt-engage.com/themes/hwgkp/Slo-Dive

More Browser Theme Examples:

Some other examples of themes developed using this tool include:

speckboy Creating Your Own Browser Theme

iconfactory Creating Your Own Browser Theme

mangafox Creating Your Own Browser Theme

fury Creating Your Own Browser Theme

And some other examples of Interactive Browser themes:

The Tweet Theme: Twitter in your Browser:

tweet theme Creating Your Own Browser Theme

The Weather Browser Theme: Get Your Local Weather Forecast:

weather theme Creating Your Own Browser Theme

Sharing is Caring
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.