Go online in your personalized web browser

May 19, 2015 15:22 GMT  ·  By

Personalization is one of the first things casual computer users look for when installing Windows and any other element that can be customized. Even web browsers can be fitted with themes to make them suit your style.

With a little research here and there, you can easily find out how to create a custom theme. However, for your convenience, we put together a few steps on how to create custom themes for some popular web browsers, and chances are you’re using one of them right now.

Creating a Mozilla Firefox theme

Preparing your images:

Step 1: Find a large image for good quality. The larger the resolution, the higher the theme quality.

Step 2: Edit the image and extract a rectangle with the width of your screen resolution to use as Header Image. The height needs to be of around 100 to at most 200 pixels, depending on the width.

Step 3 (optional): Extract another chunk of the same width and 100-pixel height to use as Footer Image.

Note: This can easily be done in Paint or any other image editor.

Step 4: Save your images either as PNG or JPG in an easily accessible location.

Applying your theme:

Step 1: Install the Personas Plus add-on and restart Firefox.

Step 2: Click the new icon on the toolbar and select Preferences.

Step 3: Check the box to Enable custom personas and press OK.

Step 4: Click the new toolbar icon again, and from Custom Persona, choose to Edit.

Step 5: Browse for the new Header and Footer (optional) pictures you just created, give it a name, and hit OK.

Note: Using Personas Plus is not mandatory, but otherwise you need to submit your new theme to Mozilla and wait for approval.

Creating a Google Chrome theme

Choosing the pictures:

Step 1: Create a new folder preferably with the name of your custom theme.

Step 2: Look for four good quality pictures. They need to be under the PNG format. For quick conversion, right-click and edit, then choose to Save As PNG.

Type of pictures you need:

Theme Frame with a minimum height of 30 pixels.

Theme Toolbar with a minimum height of 120 pixels.

Theme Tab Background with a minimum height of 65 pixels.

New Tab Page Background which should match your screen resolution.

Theme Attribution, which can be any image to be used as creator logo.

Step 3: Create a new folder named “images” inside the theme directory created earlier.

Step 4: Paste all four pictures in the images folder.

Preparing the manifest file:

Step 1: Download a sample theme manifest file.

Step 2: Place it in your theme folder.

Step 3: Make file extensions visible. Click on View and make sure the File Name Extensions option is checked.

Step 4: Select the manifest.json file and press F2 to rename. Add .txt at the end without removing anything.

Step 5: Open the file to add your images.

code
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/theme_ntp_attribution.png"
Step 6: Replace the name + extension (i.e: frame.png, toolbar.png, background.png, tab.png) with the exact file name of your images, as well as the PNG extension.

Note: Modifying other lines of code in the manifest.json file affects colors used for different areas of the browser. Feel free to try a few settings.

Example code:

code
{
  "version": "1.0",
  "manifest_version": 2,
  "name": "My Theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/frame.png",
      "theme_toolbar" : "images/toolbar.png",
      "theme_ntp_background" : "images/wall big.png",
      "theme_tab_background" : "images/tab bkg.png",
      "theme_ntp_attribution" : "images/att.png"
    },
    "colors" : {
          "ntp_link": [255,255,255],
    "ntp_text": [255,255,255],
    "ntp_section_link": [255,255,255],
    "ntp_section_text": [10 , 17 , 27],
    "ntp_background": [10 , 17 , 27],
    "frame": [10 , 17 , 27],
    "toolbar": [10 , 17 , 27],
    "tab_text": [255,255,255],
    "tab_background_text": [10 , 17 , 27],
    "bookmark_text": [255,255,255]
    },
    "tints" : {
                "buttons" : [0.33, 0.5, 0.47],
                "frame_inactive": [0.50, 0.50, 0.50],
                "frame_incognito_inactive": [0.50, 0.50, 0.50]
    },
    "properties" : {
         "ntp_background_alignment" : "bottom",
    "ntp_background_repeat": "no-repeat"
    }
  }
}
Note: There’s a high chance you encounter errors the first time you try to load the theme. Follow the provided instructions to add missing elements. These vary according to Chrome version updates.

Step 7: Close and save the file.

Step 8: Remove the .txt extension so that the file name remains manifest.json.

Applying the new theme:

Step 1: Open Chrome and write down chrome://extensions in the URL field.

Step 2: Check the Developer mode box in the upper right corner.

Step 3: Choose to Load Unpacked Extension and pick the folder you initially created.

Step 4: Click on Pack Extension button and Browse for the theme folder in the Extension Root Directory field.

Creating a theme for Opera

Step 1: Launch Opera web browser.

Step 2: Press the Opera button in the top left corner and select Themes.

Step 3: Choose to Create Your Theme.

Step 4: Click on Choose File and load an image of your choice. The bigger the resolution, the higher the theme quality.

Step 5: Align background image to either bottom, center, or top, and pick Speed Dial text color.

Step 6: Hit the Create button and enjoy your new theme.

Creating different browser themes (7 Images)

Custom web browsing
Creating Firefox imagesApplying the Firefox theme
+4more