Opera Widgets Resources - Opera Developer Community

We want to make it easy to create and share widgets – so we did some of the work for you. Here you can find the widgets logo for use on your site, a selection of buttons to add to your widget, and an array of colorful backgrounds to make your widget even more beautiful. For more information on how to style your widget, please refer to our widgets style guide page. We've given you some code examples to show how to implement the icons, buttons and backgrounds. You can even download all the images with the source Photoshop™ files. Feel free to suggest more on the forums and we'll do our best to add it.

Widget icon

You can use this widget icon either on your widget site or you can make it appear in Opera's address bar. If you click the icon, Opera will automatically retrieve the widget. The ZIP archive also contains a Photoshop file with high resolution widget icon.

To make this icon appear in Opera's address bar and make it retrieve your widget instantly, use the following code in the header of your HTML page:

<link rel="alternate" 
      type="application/x-opera-widgets" 
      title="[widget name]"
      href="[widget url]" />

Widget buttons

Here are a series of reload, configuration and close buttons for your selection plus a ready-made Photoshop template to create your own. Click any button to download an archive with all sizes and instances.

Round 2D

Square 2D

Round 3D

Square 3D

You may also download the Photoshop template containing layers with button images.

To implement the buttons, feel free to use this code:

CSS

.reload {
  width:10px;
  height:10px;
  background: url(img/reloadButton10px.png) no-repeat 0 0;
  }
.config {
  width:10px;
  height:10px;
  background: url(img/configButton10px.png) no-repeat 0 0;
  }
.close {
  width:10px;
  height:10px;
  background: url(img/closeButton10px.png) no-repeat 0 0;
  }
.all_buttons:hover { background-position: 0 50%; }
.all_buttons:active { background-position: 0 100%; }

HTML

<button class="reload all_buttons" />
<button class="config all_buttons" />
<button class="close all_buttons" />

Widget templates

Here are some templates to use as backgrounds for your widget. Each file includes a clean Opera widget template of different size and color.

200 x 150 pixels

FleshLushOceanSticky

200 x 300 pixels

DarkMilkRedSky

400 x 300 pixels

CyanEarthPurpleSlate

Get it all

Alternatively, you can download all backgrounds including the source PSD, all widgets and all icons in respective archives.