This version is for the latest source version of Ubiquity 0.5. Click here for the 0.1 version of this page

Introduction

Skinning Ubiquity is easy. Ubiquity styles are managed by a single CSS file that also contains metadata. While creating your skins locally, any changes in the CSS file will only be reflected when Firefox is restarted. To update the skin immediately, go to the Your Skins page and click on your skin again.

Metadata

 /*=skin=
 @name     Default
 @author   Mozilla Labs
 @homepage http://labs.mozilla.com
 @email    abimanyuraja@gmail.com
 @license  MPL/LGPL/GPL
 =/skin=*/

In your CSS file, you should add the metadata in comments formatted as above. Your skin must have a name but all fields are optional.

CSS Elements

Make sure that each style sections are surrounded by proper at-rules (@-moz-document url(...){}).

@-moz-document url(chrome://browser/content/browser.xul)

#ubiquity-transparent-panel

The root panel that's transparent by default.

#ubiquity-panel

The actual popup layer.

#ubiquity-frame

The not-so-actual popup layer.

#ubiquity-entry-container

Container for the entry box. Padding properties for around the box, for the most part.

#ubiquity-entry

Actual entry box. Fonts, padding, backgrounds, etc. All controlled here.

#ubiquity-suggest-container

Container of, well, ya know.

#ubiquity-suggest

The iframe where the command suggestions appear.

#ubiquity-preview-container

#ubiquity-preview

The height of this element is automatically adjusted to the document loaded in #ubiquity-browser. If you want the preview flexible, apply max-height and overflow:hidden to this.

#ubiquity-browser

The xul browser element that previews.

#ubiquity-help

Where the help is displayed.

@-moz-document url(chrome://ubiquity/content/suggest.html)

#suggestions

The body of suggest.html.

.suggested

The list of suggested commands.

.hilited

The currently selected command which applies over .suggested.

.needarg

Unfilled arguments.

.cmdicon

The command icon division. Use .cmdicon > img for the actual icon image.

.object .argument .delimiter .verb

Ask mitcho.

@-moz-document url(chrome://ubiquity/content/preview.html)

The document that contains the actual preview content.

Sharing

You can share your commands by linking to the CSS file. Just add the following code to any webpage:

<link rel="ubiquity-skin" href="http://path-to-css" />

Anyone with Ubiquity who visits your page will be able to immediately install your skin.

For an example page where you can install skins, check this out.

Example Skin

/*
  =skin=
  
  @name Simpliquity
  @author Yatrik Solanki
  @homepage http://www.yatriksolanki.com
  @email yatriksolanki@gmail.com
  @license MPL/LGPL/GPL
  
  =/skin=
*/

@-moz-document url(chrome://browser/content/browser.xul) {

#ubiquity-panel {
  padding: 0px;
  margin: 10px;
  background: rgba(0%, 0%, 0%, 0.8);
  -moz-border-radius: 20px;
  -moz-border-radius-topleft: 0px;
}

#ubiquity-entry-container {
  margin: 8px;
  padding: 3px;
  font-size: 14pt;
  border: 0px solid #aaa;
  -moz-border-radius: 0px;
  background: transparent;
  font-family: Calibri, Helvetica, Verdana, Arial;
}

#ubiquity-entry {
  -moz-appearance: none;
  background: transparent;
  border: none;
  font-size: 18pt;
  color: #ffffff;
  width: 100%;
  font-weight: bold;
  font-family: Calibri, Helvetica, Verdana, Arial;
}

#ubiquity-suggest {
  border: none;
  width: 500px;
  min-height: 32px;
  overflow: hidden;
}

#ubiquity-suggest-container, #ubiquity-preview-container {
  margin: 10px;
}

#ubiquity-preview {
  border-top: 1px solid #333;
  min-height: 0px;  
  max-height: 600px;
  overflow: hidden;
}

#ubiquity-browser {
  width: 500px;
  height: 600px;
}

#ubiquity-help {
  margin: 5px 15px;
  font-family: Calibri, Helvetica, Verdana, Arial;
  font-size: 11pt;
  color: #FFF;
}

}

@-moz-document url(chrome://ubiquity/content/suggest.html) {

#suggestions {
  margin: 0;
}

.hilited {
  padding: 5px;
  margin: 2px;
  background: rgba(100%, 100%, 100%, 0.3);
  -moz-border-radius: 5px;
  color: #FFF;
  font-family: Calibri, Helvetica, Verdana, Arial;
}


.suggested {
  margin: 2px;
  padding: 5px;
  border-left: solid 10px transparent;
  font-family: Calibri, Helvetica, Verdana, Arial;
  color: #FFF;
  cursor: pointer;
}

.object, .argument {
  font-weight: bold;
}

.needarg {
  font-style: oblique;
  color: #999999;
}
.needarg:before {
  content: "(";
}
.needarg:after {
  content: ")";
}

.cmdicon {
  display: inline-block;
  width: 16px;
}
.cmdicon img {
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

.selection {
  padding: 2px;
  -moz-border-radius: 3px;
  display: inline-block;
  font-variant: small-caps;
  background-color: #BBB;
  color: #333;
  position: relative;
  top: -2px;
  font-size: 8pt;
  font-weight: normal;
  border: 1px solid #777;
}

}

/* Formatting for the Preview box */
@-moz-document url(chrome://ubiquity/content/preview.html) {

body {
  color: #ffffff;
  background: transparent;
  padding-left: 15px;
  padding: 7px;
  margin: 5px 0 0;
  font-family: Calibri, Helvetica, Verdana, Arial;
  font-size: 11pt;
}

.gresult {
  margin-bottom: 10px;
}

.gresult a {
  color: #FFFFFF;
  text-decoration: underline;
  font-size: 14pt;
  font-family: Calibri, Helvetica, Verdana, Arial;
  cursor: pointer;
}
.gresult-url {
  font-size: x-small;
  font-family: Calibri, Helvetica, Verdana, Arial;
  color: #777;
}
.gresult-content {
  margin-right: 10px;
  font-family: Calibri, Helvetica, Verdana, Arial;
  font-size: small;
}

}

Skins in the Wild

Show off your skins!

Skins and the Herd

As of now, there are plans to implement skin listing in the Herd. Updates will follow as they happen. link title