Labs/Ubiquity/Skins/: Difference between revisions

From MozillaWiki
< Labs‎ | Ubiquity
Jump to navigation Jump to search
No edit summary
(→‎Example Skin: Updated example skin for 0.1.7's altered DOM structure (see ubiq trac bug #612))
 
(20 intermediate revisions by 2 users not shown)
Line 1: Line 1:
=CSS Elements=
=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.


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


Ubiquity styles are managed by two CSS files, browser.css, and preview.css.
  /*
    =skin=
    @name Default
    @author Mozilla Labs
    @homepage http://labs.mozilla.com
    @email abimanyuraja@gmail.com
    @license MPL/LGPL/GPL
    =/skin=
  */


A set of elements and their descriptions from each is listed below.
In your CSS file, you should add the metadata in comments formatted as above. Your skin <b>must</b> have a name but all fields are optional.


==browser.css==
=CSS Elements=


'''#panel'''
'''#cmd-panel'''


Formatting for the actual popup layer.
Formatting for the actual popup layer.
Line 25: Line 35:
The container for the rest of the items, i.e. verb suggestions + preview pane.
The container for the rest of the items, i.e. verb suggestions + preview pane.


==preview.css==
'''#ubiquity-preview '''
 
'''#preview'''


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


::''.gresult''
::''div#ubiquity-preview .hilited-text''


::Manages each Google search result.
::Manages the currently selected verb/function's text property.


::''.gresult a''
::''div#ubiquity-preview .hilited''


::The anchor properties of the Google search results, in this case, the title of the page.  
::Manages the currently selected verb/function's area; think of this as a hover property.


::''.gresult-url''
::''div#ubiquity-preview .suggested''


::The properties for the URL showed under the description.
::The properties for the list of functions (i.e. google, wikipedia), those not selected.


::''.gresult-content''
::''div#ubiquity-preview .needarg''


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


'''#preview-pane
::''div#ubiquity-preview .cmdicon''
'''


The properties of the pane itself, such as borders, etc.
::The properties for the icon division, such as Google's "g."


::''.hilited-text''
::::''div#ubiquity-preview img''


::Manages the currently selected verb/function's text property.
::::The properties per icon image.


::''.hilited''
'''div#ubiquity-preview #preview-pane'''


::Manages the currently selected verb/function's area; think of this as a hover property.
The properties of the area that contains the actual preview content. This should only include border/padding/margin information; the actual preview content may be in an iframe or browser element, so it's important that properties like background and text color be associated with the <tt>ubiquity-preview-content</tt> class.


::''.suggested''
'''.ubiquity-preview-content'''


::The properties for the list of functions (i.e. google, wikipedia), those not selected.
The contents of the preview for the currently-selected command. This may be in an iframe or browser element, and as such it's important to note that this CSS class should contain all properties needed for it to "blend in" with the rest of the preview, since CSS styles may not be inherited from other parts of the skin.


::''.needarg''
::''.ubiquity-preview-content .gresult''


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


::''.cmdicon''
::''.ubiquity-preview-content .gresult a''


::The properties for the icon division, such as Google's "g."
::The anchor properties of the Google search results, in this case, the title of the page.  


::::''img''
::''.ubiquity-preview-content .gresult-url''


::::The properties per icon image.
::The properties for the URL showed under the description.


::''.ubiquity-preview-content .gresult-content''


=How Is It Done?=
::The description properties for the Google result.


This isn't as much of a tutorial as a walk through; you're going to need some basic CSS skills.
=Sharing=


Here's how you get to the profile directory where these files are:
You can share your commands by linking to the CSS file. Just add the following code to any webpage:


Go to Start > Run.
<pre><link rel="ubiquity-skin" href="http://path-to-css" /></pre>
Enter "%APPDATA%\Mozilla\Firefox\Profiles\" without the quotes and hit Return.
Enter the directory (should be one). 


Then browse to /extensions/ubiquity@labs.mozilla.com/chrome/content.
Anyone with Ubiquity who visits your page will be able to immediately install your skin.


That is where the files are!
https://wiki.mozilla.org/images/b/b0/Ubiquityskinnotification.png


Let me warn you here and now, you will be replacing your default files!
For an example page where you can install skins, check [http://foyrek.com/test.html this] out.
Back them up! Now! Just copy/paste them in the content directory and rename them to bdefault.css and pdefault.css.


This is the most creative part of the process.
=Example Skin=


You never know when something goes wrong and you need to revert to default styling...or at least keep it as a template.
https://wiki.mozilla.org/images/f/fd/Skin04.png


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):
<pre>
 
[[Image:Skin01.png]]
 
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:


[http://www.wellstyled.com/tools/colorscheme2/index-en.html|Color Scheme Generator]
/*
  =skin=
  @name Default
  @author Yatrik Solanki
  @homepage http://www.yatriksolanki.com
  @email yatriksolanki@gmail.com
  @license MPL/LGPL/GPL
  =/skin=
*/


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


Here is the browser.css:
/* Formatting for the Ubiquity Pop-Up */


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


/* formatting for ubiquity pop-up */
#cmd-panel {
#panel {
   padding: 0px;
   padding: 0px;
   margin: 0px;
   margin: 10px;
   background: #272727;
   background: rgba(0%, 0%, 0%, 0.8);
  -moz-border-radius: 20px;
  -moz-border-radius-topleft: 0px;
}
}


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


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


#cmd-preview {
#cmd-preview {
   -moz-appearance: none;
   -moz-appearance: none;
   border: none;
   border: none;
   padding: 10px;
   margin: 10px;
 
  overflow: hidden;
}
}
</pre>
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:


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


body {
body#previewbody {
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;
Line 169: Line 162:
}
}


#preview {
#ubiquity-preview {
     width: 500px;
     width: 500px;
}
}


/* formatting for data inside preview */
/* Formatting for the Preview Pane and Verb/Command suggestion list */


.gresult {
div#ubiquity-preview #preview-pane {
  margin-bottom: 10px;
    padding-left: 15px;
}
    padding: 7px;
.gresult a {
    border-top: 1px solid #333;
  color: #4190E4;
    margin-top: 5px;
  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 */
div#ubiquity-preview .hilited-text {
 
     font-color: #FFF;
#preview-pane {
     font-family: Calibri, Helvetica, Verdana, Arial;
     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 {
div#ubiquity-preview .hilited {
    /*border-left: solid 5px #0066cc;*/
     padding: 5px;
     padding: 5px;
     color: #548EF6;
     margin: 2px;
  font-family: Helvetica, Arial;;
    background: rgba(100%, 100%, 100%, 0.3);
}
.hilited {
    background: #404040;
    border: solid 2px #0E8BF1;
     -moz-border-radius: 5px;
     -moz-border-radius: 5px;
     color: #ffffff;
     color: #FFF;
    margin-bottom: 5px;
}
}
.suggested {
 
 
div#ubiquity-preview .suggested {
    margin: 2px;
     padding: 5px;
     padding: 5px;
     border: solid 2px #263A57;
     border-left: solid 10px transparent;
    -moz-border-radius: 5px;
     font-family: Calibri, Helvetica, Verdana, Arial;
     font-family: Helvetica, Arial;
     color: #FFF;
     margin-bottom: 5px;
}
}


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


Whoo! A bit bigger.
/* Formatting for the Preview box */
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!
.ubiquity-preview-content {
  color: #ffffff;
  background: transparent;
  font-family: Calibri, Helvetica, Verdana, Arial;
  font-size: 11pt;
}
 
.ubiquity-preview-content .help {
  font-family: Calibri, Helvetica, Verdana, Arial;
  font-size: 11pt;
  color: #FFF;
}
 
.ubiquity-preview-content .gresult {
  margin-bottom: 10px;
}


After that is done, you just have to restart Firefox. Of course, at this alpha stage, you just restart as you develop.
.ubiquity-preview-content .gresult a {
  color: #FFFFFF;
  text-decoration: underline;
  font-size: 14pt;
  font-family: Calibri, Helvetica, Verdana, Arial;
  cursor: pointer;
}
.ubiquity-preview-content .gresult-url {
  font-size: x-small;
  font-family: Calibri, Helvetica, Verdana, Arial;
  color: #777;
}
.ubiquity-preview-content .gresult-content {
  margin-right: 10px;
  font-family: Calibri, Helvetica, Verdana, Arial;
  font-size: small; 
}


Aza has mentioned ideas to do dynamic styling and adding skins to the Herd, so we should be developing a lot more as far as that goes.
.ubiquity-preview-content.img {
    padding: 5px;
}


To download the above theme, "Blubiquity," check out the [[http://www.yatriksolanki.com/?p=11 Blubiquity Download Page]]


There is an essential read-me in there, but if you've read this walkthrough, you should be good to go.
</pre>


=Skins and the Herd=
=Skins and the Herd=
Line 264: Line 260:
As of now, there are plans to implement skin listing in the Herd.  
As of now, there are plans to implement skin listing in the Herd.  
Updates will follow as they happen.
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):
[[Image:Skin051.png]]
[[Image:Skin04.png]]

Latest revision as of 18:19, 24 March 2009

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

#cmd-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.

#ubiquity-preview

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

div#ubiquity-preview .hilited-text
Manages the currently selected verb/function's text property.
div#ubiquity-preview .hilited
Manages the currently selected verb/function's area; think of this as a hover property.
div#ubiquity-preview .suggested
The properties for the list of functions (i.e. google, wikipedia), those not selected.
div#ubiquity-preview .needarg
The property that manages the variables of different verb/functions. For example, the (message) and (to contact) areas in the "email" verb.
div#ubiquity-preview .cmdicon
The properties for the icon division, such as Google's "g."
div#ubiquity-preview img
The properties per icon image.

div#ubiquity-preview #preview-pane

The properties of the area that contains the actual preview content. This should only include border/padding/margin information; the actual preview content may be in an iframe or browser element, so it's important that properties like background and text color be associated with the ubiquity-preview-content class.

.ubiquity-preview-content

The contents of the preview for the currently-selected command. This may be in an iframe or browser element, and as such it's important to note that this CSS class should contain all properties needed for it to "blend in" with the rest of the preview, since CSS styles may not be inherited from other parts of the skin.

.ubiquity-preview-content .gresult
Manages each Google search result.
.ubiquity-preview-content .gresult a
The anchor properties of the Google search results, in this case, the title of the page.
.ubiquity-preview-content .gresult-url
The properties for the URL showed under the description.
.ubiquity-preview-content .gresult-content
The description properties for the Google result.

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.

Ubiquityskinnotification.png

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

Example Skin

Skin04.png 


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


/* Formatting for the Ubiquity Pop-Up */


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

#cmd-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;
}

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

#cmd-preview {
  -moz-appearance: none;
  border: none;
  margin: 10px;
  overflow: hidden;
}


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

#ubiquity-preview {
    width: 500px;
}

/* Formatting for the Preview Pane and Verb/Command suggestion list */

div#ubiquity-preview #preview-pane {
    padding-left: 15px;
    padding: 7px;
    border-top: 1px solid #333;
    margin-top: 5px;
} 


div#ubiquity-preview .hilited-text {
    font-color: #FFF;
    font-family: Calibri, Helvetica, Verdana, Arial;
}

div#ubiquity-preview .hilited {
    padding: 5px;
    margin: 2px;
    background: rgba(100%, 100%, 100%, 0.3);
    -moz-border-radius: 5px;
    color: #FFF;
}


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

div#ubiquity-preview .needarg {
    font-style: oblique;
    color: #999999;
}
div#ubiquity-preview .cmdicon {
    display: inline-block;
    width: 16px;
}
div#ubiquity-preview .cmdicon img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

/* Formatting for the Preview box */

.ubiquity-preview-content {
  color: #ffffff;
  background: transparent;
  font-family: Calibri, Helvetica, Verdana, Arial;
  font-size: 11pt;
}

.ubiquity-preview-content .help {
  font-family: Calibri, Helvetica, Verdana, Arial;
  font-size: 11pt;
  color: #FFF;
}

.ubiquity-preview-content .gresult {
  margin-bottom: 10px;
}

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

.ubiquity-preview-content.img {
    padding: 5px;
}

Skins and the Herd

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

Retrieved from "https://wiki.allizom.org/index.php?title=Labs/Ubiquity/Skins/&oldid=135994"