• Previous article—Opera Widgets Style Guide
• Next article—The Opera Widget manager application
• Table of contents

Introduction

Creating and and sharing widgets should be easy – 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 the Opera widgets style guide page. Below is some code examples to show you 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 graphics we could add on the Opera widgets developer forum and we'll do our best to add it.

Widget icon

You are free to use the Opera widget icon on your widget or web page to tell your users there is a widget available for your site. Download this ZIP archive which includes two different png-versions of the icon as well as an ico-file and a Photoshop file with high resolution version of the widget icon.

If you reference a widget from the head-section of a web page, Opera will show the widget icon in the address bar. When the user clicks the widget icon, Opera will download and run your widget. Use the following markup in the head-section of your HTML document to achieve this:

<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

Flesh

Lush

Ocean

Sticky

200 x 300 pixels

Dark

Milk

Red

Sky

400 x 300 pixels

Cyan

Earth

Purple

Slate

Get it all

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

• Previous article—Opera Widgets Style Guide
• Next article—The Opera Widget manager application
• Table of contents