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.

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.

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

Step Two: Create 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.

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”.

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:

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.

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

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.

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.

Sharing is Caring

Related Posts

Subscribe to SloDive (it's free)

We respect your privacy

Nisha Patel

Mouseover to see this author's bio.
Nisha is the head blogger for Slodive.com. She loves tattoos and inspirational quotes. Check her out on google plus https://plus.google.com/u/0/116437517919411097994.Nisha Patel's Archive

About

A popular Graphic and Web Design site where you can expect to see a unique take on topics, we try not to tread on familiar topics seen on other design sites. Along with tutorials and articles, we also do round ups, how-to guides, tips, tricks and cheats on all of the hot topics in the design world.