Introduction

Skinning Ubiquity is easy. Firefox supports CSS3, which also adds a great number of features to make styling dependent on CSS alone easier.

Ubiquity styles are managed by a single CSS file that also contains metadata.

A set of elements and their descriptions from each is listed below.

Metadata

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

Anywhere in your CSS file, you should describe the metadata in a format like above. All fields are optional but if you choose not to name your skin, the user will see a randomized name (and may never figure out which skin is yours).

CSS Elements

#panel

Formatting for the actual popup layer.

#cmd-entry-container

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

#cmd-entry

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

#cmd-preview

The container for the rest of the items, i.e. verb suggestions + preview pane.

#preview

As of now, contains the width of the preview window.

.gresult

Manages each Google search result.

.gresult a

The anchor properties of the Google search results, in this case, the title of the page.

.gresult-url

The properties for the URL showed under the description.

.gresult-content

The description properties for the Google result.

#preview-pane

The properties of the pane itself, such as borders, etc.

.hilited-text

Manages the currently selected verb/function's text property.

.hilited

Manages the currently selected verb/function's area; think of this as a hover property.

.suggested

The properties for the list of functions (i.e. google, wikipedia), those not selected.

.needarg

The property that manages the variables of different verb/functions. For example, the (message) and (to contact) areas in the "email" verb.

.cmdicon

The properties for the icon division, such as Google's "g."

img

The properties per icon image.

How Is It Done?

Simple, use the builtin skin editor to get started. If you want to use your own editor, save it to a file and install the skin. Any changes you make in the file will reflected instantly.

Okay, moving on. Here is what the end result of trying to make a style was for me (a download link at the very end of the walkthrough):

The first step is to get an idea of a color scheme. I like blue and black, so I obviously picked those. For other color scheme ideas check out:

Scheme Generator

Now that you have this, the rest is easy. Yeah, that was the hardest part.

Here is the browser.css:

/* Blue for Ubiquity */
/* Edited by Yatrik Solanki */
/* exposure@yatriksolanki.com */

/* formatting for ubiquity pop-up */
#panel {
  padding: 0px;
  margin: 0px;
  background: #272727;
}

#cmd-entry-container {
  padding: 10px;
  font-size: 12pt;
  font-family: Helvetica, Arial;
}

#cmd-entry {
  -moz-appearance: none;
  border: none;
  font-size: 14pt;
  font-face: Helvetica, Arial;
  background: url("images/mid2.png");
  color: #4190E4;
  padding: 5px;
  width: 97%;
  border: 2px solid #5077A0;
  -moz-border-radius: 5px;
}


#cmd-preview {
  -moz-appearance: none;
  border: none;
  padding: 10px;

}

You may notice some elements that are random, such as font-family properties in random places; this is because I was still figuring out what element affects what and was too lazy to change it back.

The background image used for the search box is a loopable image, since the box height can vary. I've set the width to 525px, and set the box width to 97% because of added padding. I've also changed the font (who else here hates Times New Roman?) and the base colours.

Moving on to the preview.css file:

/* Blue for Ubiquity */
/* Edited by Yatrik Solanki */
/* exposure@yatriksolanki.com */

body {
    margin: 0;
    padding: 0;
    color: #BBB;
}

#preview {
    width: 500px;
}

/* formatting for data inside preview */

.gresult {
  margin-bottom: 10px;
}
.gresult a {
  color: #4190E4;
  text-decoration: underline;
  font-size: small;
  cursor: pointer;
  font-family: Helvetica, Arial;
}
.gresult-url {
  font-size: x-small;
  color: #4190E4;
  font-family: Helvetica, Arial;
}
.gresult-content {
  margin-right: 10px;
  font-size: x-small;  
  font-family: Helvetica, Arial;
}


/* formatting for suggestion list */

#preview-pane {
    color: #ffffff;
    background: url("images/mid2.png");
    padding-left: 15px;
    padding: 7px;
    border: 2px solid #5077A0;
    -moz-border-radius: 5px;
    font-family: Helvetica, Arial;
    
}

.hilited-text {
    /*border-left: solid 5px #0066cc;*/
    padding: 5px;
    color: #548EF6;
  font-family: Helvetica, Arial;;
}
.hilited {
    background: #404040;
    border: solid 2px #0E8BF1;
    -moz-border-radius: 5px;
    color: #ffffff;
    margin-bottom: 5px;
}
.suggested {
    padding: 5px;
    border: solid 2px #263A57;
    -moz-border-radius: 5px;
    font-family: Helvetica, Arial;
    margin-bottom: 5px;
}


.needarg {
    font-style: oblique;
    color: #999999;
  font-family: Helvetica, Arial;
}
.cmdicon {
    display: inline-block;
    width: 16px;
}
.cmdicon img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

Whoo! A bit bigger. Basically, styling for the selected/unselected text, and preview pane. CSS3 was used for the border radius; Firefox supports this, so good to learn if you haven't already. Some great things you can do with it!

After that is done, you just have to restart Firefox. Of course, at this alpha stage, you just restart as you develop.

To download the above theme, "Blubiquity," check out the [Blubiquity Download Page]

Skins and the Herd

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

Future of Skins

In the near future, Ubiquity should be able to do things such as this (actual screenshots, not mockups):

Labs/Ubiquity/Skins/

Contents