Themes in Opera 18+

By Andreas Bovens

Due to the major architecture changes we've been going through recently, the first versions of our Chromium/Blink based Opera browser (versions 15, 16 and 17) do not support themes. However, from Opera 18 onward, themes are supported again! This article explains you how to create themes for Opera 18+.

How to

In short, the steps to create a theme are as follows:

1. Find two images you want to use and place them in a folder — I found two nice ones on Unsplash
2. Create a persona.ini file with your text editor, and add the necessary meta data
3. Compress/archive the content of the folder as a zip file
4. Test if the theme works by dragging it to opera:themes
5. Upload the theme to our addons catalog

I've created a test theme for you to play with. Just download and unzip it to inspect what's inside. You find extensive details in the following sections.

Images

You'll need to pick two images: one will function as the background for Speed Dial, the other one as background for pages like opera:extensions, opera:settings, opera:about, etc.

Make sure the images you use are of sufficient size and quality as they'll need to be rescaled to fit on different screen resolutions. In order to reduce file size as much as possible without sacrificing quality, run your images through a tool like ImageOptim, which shaves off unnecessary bytes from PNG and JPG files.

Persona.ini details

The content of the persona.ini file is as follows:

[Info]
Name               = Yellow SF
Author             = Andreas Bovens
Author URL         = http://bovens.net/
Version            = 2

[Start Page]
Background         = 01.jpg
Position           = center bottom
Title Text Color   = #ffffff
Title Text Shadow  = #261712

[Web UI Pages]
Background         = 02.jpg
Position           = center top

; images by Charlie Foster, found on http://unsplash.com

This should be quite self explanatory, but just in case, here are the details line per line:

• [Info]: info section
  • Name: Title of the theme
  • Author: Author name
  • Author URL: A URI that points to the author's home page or e-mail. Valid schemes are http, https, and mailto
  • Version: Version 2 indicates Opera 18+ themes
• [Start Page]: section with settings for Speed Dial
  • Background: File name of the image that goes behind Speed Dial.
  • Position: Position of the start page image — optional, any CSS keyword for position: left, top, right, bottom, center.
  • Title Text Color: Color of the text — optional, HEX notation, without alpha
  • Title Text Shadow: Color of the text shadow — optional. If set. will be applied as text-shadow: 1px 1px 1px 'Title Text Shadow value'
• [Web UI Pages]: section with settings for opera:settings, opera:about, etc.
  • Background: File name of the image that goes behind other pages
  • Position: See above for positioning details

In the end I've added a comment. You can put comments anywhere you like in the file, as long as they are on a separate line and start with a semicolon (;). You can do this for instance to give attribution to the photographer or designer who made the background images.

Compression, testing and upload

Make sure there are no unnecessary files inside the zip file, like source files for graphics, .git folders or .DS_Store files, for instance.

To test the theme, load opera:themes in the browser, and drag and drop the ZIP file onto the opera:themes page. If everything is right, the theme will be installed in the Themes Manager's My Themes section.

To upload the theme, log into the Opera Add-ons catalog, go to My uploads, and submit your theme.

Previous theme format and legacy features

Themes made for Opera 12 and 12.1 also work in Opera 18+, but not all features have a visual effect. The theme will not expand under the tabs for instance, and settings like "Tint Color" are no longer supported.

Summary

As you can see, making themes for Opera is very easy. Try it out for yourself!

Andreas Bovens

Andreas is based in Oslo, where he works for Opera Software as Extensions Product Manager + Developer Relations.

This article is licensed under a Creative Commons Attribution 3.0 Unported license.