Wednesday, August 30, 2006
Saturday, August 26, 2006
Creating a Theme for PFF 1.3
One of the new features in Performancing Firefox 1.3 allows you to write Addons and Themes. This tutorial will get you started on your first theme for PFF.
1) First, grab the following three themes, and copy them to your hard drive:
2) Open up PFF into a Tab in firefox or flock (right click the toolbar icon and choose to open in tab)
3) Click on the "Settings" nav bar button then the 'Theme' tab
3) Click on the 'Add' button, or drag and drop the .css files onto the tab one by one.
You should then see all 4 themes installed.
4) Select the diferent themes and enable them to see them in action.
5) Decide what theme you would like to start off with. I recommend starting with the 'Template Theme' so you can see what the pff css looks like and what you can modify.
6) Copy the template_theme.css file to a new location and rename it.
For this example I'm calling mine 'mytheme.css'.
7) Open the mytheme.css file in your favorite text editor (Mine is jEdit).
8) Leaving it in the exact format it's in now, change the the following:
You'll notice I only changed the values of '@name', '@Author' and '@desc'
Please change those values and only those values for the time being.
9) Now add the mytheme.css file to the pff theme list (drag and drop or using the 'add' button.
8) Select your theme ("My Theme" in my example) and enable it.
9) Locate your Firefox Profile (see Locate your profile folder)
then go to the performancing\skins\ directory.
i.e. On windows mine looks something like this:
C:\Documents and Settings\Jed\Application Data\Mozilla\Firefox\Profiles\ajybcm75.pff\performancing\skins\
10) You should see mytheme.css there now. Close your old version of mytheme.css and open the version from this directory.
You are done, you have now created your first PFF Theme!
The template theme is heavily documented at the begining of the file, however I will go over the basics in details here.
The Requirements:
For a css file to be a PFF Theme, it must contain 7 key information bits.
If you are only going to make minor changes to the theme, like I have in the 'Black' theme, you would want to keep lddef (load default) on, as it will load the default pff theme first, then your custom theme. For example, I will do this in the mytheme.css file as I only want to add some small changes, effectivley overwritting some of the default theme, as opposed to recreating it from scratch.
This is great so that you don't have to re-code every element in pff to get a functional theme.
If however you do want to start from zero set lddef to false.
This is what the 'naked' theme has done. lddef is false and does not have any css at all (empty).
Open it up if you don't believe me :).
So for the sake of this tutorial, lets assume I want to keep the PFF Default theme loaded and I want to make some changes to it.
Finding elements to style
The theme we are editing (Template theme now called 'My Theme'), has the exact code from the default pff theme. It's there for you to look over and get an idea of what is styled, etc.
For this tutorial I am going to remove all the styles from this mytheme.css file and start adding my own css.
Now with PFF in a tab in my firefox browser (right click the toolbar icon and choose to open in tab or type in the url: chrome://performancing/content/editor.xul )
Either hit "Ctrl-Shift-i" or go to "Tools- inspector".
This will launch Firefox's Dom Inspector with PFF as the target
(if you don't have the dom inspector, re-install firefox and select "custom" from the install options and enable the 'Dome inspector' from the tools section.)
Inspect an element
So for this tutorial, I want to change the Navigational button on the left side of PFF.
From the dom inspector window i click on the inspection (
) icon and click on the navbar tab I want to see.
(In the image below, I clicked on the 'editor' tab to inspect it)
So now i see a bunch of very usefull information
In my editor, I paste in the following:
Code:
jEdit Screenshot:
I save the file then hit refresh (
) in firefox (refresh button or F5) and..
... we see the changes live. Wasn't that easy?!
I can do other nifty stuff like:
Now when i hover over a navbar I get this (yeah it's ugly, but it's an example):
I can do other cool stuff from information I get from the dom inspector like say,
any child of the navbar vbox that is a box should have a black background.
code:
result:
Remember, Firefox supports a whole boat load of CSS 1, 2 and 3 features.
So go ahead and use Type selectors, Child Selectors, Descendant Selectors, and all the other goodies. to make your life easier.
Well you have two choices
In my theme, I want to change the insert image toolbar icon (
) with this one 
code:
Done, damn that was easy!
Now, assuming i want to package my theme and give it to someone, I don't want them downloing that image from my server every time they open up PFF.
So let's make a theme package for PFF!
Making a Theme Package
While we are in our theme folder in our profile, it's easy to add local files.
First, for a valid package, we need to create a new folder that has the same name as our .css file
My Theme's file name is mytheme.css, so I create a directory called mytheme\
(..\performancing\skins\mytheme\)
I drop the
Cool. So what does that mean?
It means anything I drop into that directory, all I need to access it is mythemename/someimage.png
You can also have folders inside of there. I might have this for example:
mytheme/ui-images/myicon.png
and all I'd have to do is:
Awesome, but what about the package?
All you have to do is zip up the mytheme.css file with it's corresponding folder.
As an example, my new zip file looks like this:
mytheme.zip
\mytheme.css
\mytheme\insertimage-icon2.png
So to refrase, the requirements for a theme package are;
That's it!
Easy to distribute .css or .zip files for your new PFF theme!
To install your theme and test it out, all you have to do is either drag and drop it onto the Theme settings or use the 'add' button and select the zip file.
Any questions, comments or corrections please post here!
Enjoy
Technorati Tags: performancing, blogger beta, blogger
Getting Started
1) First, grab the following three themes, and copy them to your hard drive:
- Black Theme
- Naked Theme (a.k.a No theme)
- PFF Default Template Theme
2) Open up PFF into a Tab in firefox or flock (right click the toolbar icon and choose to open in tab)
3) Click on the "Settings" nav bar button then the 'Theme' tab
3) Click on the 'Add' button, or drag and drop the .css files onto the tab one by one.
You should then see all 4 themes installed.
4) Select the diferent themes and enable them to see them in action.
5) Decide what theme you would like to start off with. I recommend starting with the 'Template Theme' so you can see what the pff css looks like and what you can modify.
6) Copy the template_theme.css file to a new location and rename it.
For this example I'm calling mine 'mytheme.css'.
7) Open the mytheme.css file in your favorite text editor (Mine is jEdit).
8) Leaving it in the exact format it's in now, change the the following:
####################################
# @type: PFF Skin
####################################
# @name: My Theme
# @author: Jed Brown
# @desc: My First Theme
# @ver: 1.0
# @lddef: true
# @ver: 1.0
# @pffver: 1.3
####################################
You'll notice I only changed the values of '@name', '@Author' and '@desc'
Please change those values and only those values for the time being.
9) Now add the mytheme.css file to the pff theme list (drag and drop or using the 'add' button.
8) Select your theme ("My Theme" in my example) and enable it.
9) Locate your Firefox Profile (see Locate your profile folder)
then go to the performancing\skins\ directory.
i.e. On windows mine looks something like this:
C:\Documents and Settings\Jed\Application Data\Mozilla\Firefox\Profiles\ajybcm75.pff\performancing\skins\
10) You should see mytheme.css there now. Close your old version of mytheme.css and open the version from this directory.
You are done, you have now created your first PFF Theme!
Understanding the CSS file
Now that you have the mytheme.css open in your favorite editor, let the fun begin.The template theme is heavily documented at the begining of the file, however I will go over the basics in details here.
The Requirements:
For a css file to be a PFF Theme, it must contain 7 key information bits.
@type - This says it's a pff theme, the value has to be "PFF Theme"
@name- This is the Theme's name (i.e. My Theme)
@author - This is your name (i.e. Jed Brown)
@desc - This a description of the Theme(i.e. My FIrst PFF Theme)
@ver - This the version number (i.e. 1.0)
@lddef - This defines if the default pff theme should be on or not. (defaults to true)
@pffver - Specifies the lowest version of PFF this theme is compatible with.
If you are only going to make minor changes to the theme, like I have in the 'Black' theme, you would want to keep lddef (load default) on, as it will load the default pff theme first, then your custom theme. For example, I will do this in the mytheme.css file as I only want to add some small changes, effectivley overwritting some of the default theme, as opposed to recreating it from scratch.
This is great so that you don't have to re-code every element in pff to get a functional theme.
If however you do want to start from zero set lddef to false.
This is what the 'naked' theme has done. lddef is false and does not have any css at all (empty).
Open it up if you don't believe me :).
So for the sake of this tutorial, lets assume I want to keep the PFF Default theme loaded and I want to make some changes to it.
Finding elements to style
The theme we are editing (Template theme now called 'My Theme'), has the exact code from the default pff theme. It's there for you to look over and get an idea of what is styled, etc.
For this tutorial I am going to remove all the styles from this mytheme.css file and start adding my own css.
Now with PFF in a tab in my firefox browser (right click the toolbar icon and choose to open in tab or type in the url: chrome://performancing/content/editor.xul )
Either hit "Ctrl-Shift-i" or go to "Tools- inspector".
This will launch Firefox's Dom Inspector with PFF as the target
(if you don't have the dom inspector, re-install firefox and select "custom" from the install options and enable the 'Dome inspector' from the tools section.)
Inspect an element
So for this tutorial, I want to change the Navigational button on the left side of PFF.
From the dom inspector window i click on the inspection (
) icon and click on the navbar tab I want to see.(In the image below, I clicked on the 'editor' tab to inspect it)
So now i see a bunch of very usefull information
- The xul:box's parent id is 'performancing-editor-tab'.
- It's class is 'performancing-navbuttons-small'
In my editor, I paste in the following:
Code:
.performancing-navbuttons-small{
font-size: x-small;
color: red;
background-color: blue;
}
jEdit Screenshot:
I save the file then hit refresh (
) in firefox (refresh button or F5) and..... we see the changes live. Wasn't that easy?!
I can do other nifty stuff like:
.performancing-navbuttons-small:hover{
font-size: large;
color: yellow;
background-color: black;
}
Now when i hover over a navbar I get this (yeah it's ugly, but it's an example):
I can do other cool stuff from information I get from the dom inspector like say,
any child of the navbar vbox that is a box should have a black background.
code:
#performancing-navbar-tabs box{
black;
}result:
Remember, Firefox supports a whole boat load of CSS 1, 2 and 3 features.
So go ahead and use Type selectors, Child Selectors, Descendant Selectors, and all the other goodies. to make your life easier.
Using Images in your css file
So, now I showed you how to make a plain jane .css theme for PFF, but what about images?Well you have two choices
- Use urls to an image from a site or your harddrive
- Packed images with your theme
In my theme, I want to change the insert image toolbar icon (
) with this one code:
#image-button{
list-style-image: url('http://performancing.com/files/insertimage-icon2.png');
}
Done, damn that was easy!
Now, assuming i want to package my theme and give it to someone, I don't want them downloing that image from my server every time they open up PFF.
So let's make a theme package for PFF!
Making a Theme Package
While we are in our theme folder in our profile, it's easy to add local files.First, for a valid package, we need to create a new folder that has the same name as our .css file
My Theme's file name is mytheme.css, so I create a directory called mytheme\
(..\performancing\skins\mytheme\)
I drop the
insertimage-icon2.png in there and change mytheme.css to the following:#image-button{
list-style-image: url('mytheme/insertimage-icon2.png');
}Cool. So what does that mean?
It means anything I drop into that directory, all I need to access it is mythemename/someimage.png
You can also have folders inside of there. I might have this for example:
mytheme/ui-images/myicon.png
and all I'd have to do is:
#image-button{
list-style-image: url('mytheme/ui-images/myicon.png');
}Awesome, but what about the package?
All you have to do is zip up the mytheme.css file with it's corresponding folder.
As an example, my new zip file looks like this:
mytheme.zip
\mytheme.css
\mytheme\insertimage-icon2.png
So to refrase, the requirements for a theme package are;
- The .css file name and directory name have to be the same
- Only said .css and directory can be in the parent level
That's it!
Easy to distribute .css or .zip files for your new PFF theme!
To install your theme and test it out, all you have to do is either drag and drop it onto the Theme settings or use the 'add' button and select the zip file.
Any questions, comments or corrections please post here!
Enjoy
powered by performancing firefox
Technorati Tags: performancing, blogger beta, blogger
Creating an Add-on for PFF 1.3
Two of the new features in Performancing Firefox 1.3 allows you to write Addons and Themes. This tutorial will get you started on your first Add-on for PFF.
PFF Addons are basically Firefox extensions tailored for PFF integration, so this tutorial assumes you know a tab bit of XUL, CSS and Javascript.
In reality you can get away with knowing any XUL for the time being and to use this tutorial, and as you go along you'll start to pick it up really easily.
1) First, grab the following two Add-ons for PFF 1.3
2) Drag and drop each .xpi file onto firefox (seperately) and you will be prompted to install the addons as Firefox extension.
3) Restart Firefox and launch pff, then click on the "Settings" nav bar button then the 'Add-ons' tab
3) Enable both of the add-ons by clicking on them, you should see their checkboxe's checked
You have now both installed and enabled your first PFF Add-ons.
The template extension was built to facilitate you for packaging your add-on as a template and as a showcase for the easy api calls in PFF.
Understanding the Template Functionality:
The template add-on has placeholder prompts for events in PFF and placeholder XUL elements for the tab listing and content. We'll explain that a bit more further down.
Add-ons in PFF can have 3 main components
Before looking at the code, let's show what the first two look like,
When you enabled the Template add-on, you saw a prompt stating that the addon was loaded (this is a placeholder) as seen in the image below:
The function that displays this prompt is called everytime pff has loaded.
This is usefull if you need to run some code when PFF starts.
Now that the addon has loaded you will see it under the Addons tab. Note however that the addons tab will only show when you have one or more addons enabled.
The second function call the Template add-on accepts is when the add-on's tab is clicked.
Clicking on the PFF Template tab as shown in the image above will load the add-on's content and fire off a function call that shows us the following prompt:
This aswell is a placeholder so you know where to place any code you want executed when the tab is clicked and the content is shown.
The contet placeholder for the Template looks like this:
This will all make more sense furthur on where we look at the code.
In the example of the Fireftp plugin. We only use #2 and #3,
Since we only care about when the FireFTP tab is clicked, when that function is called we load FireFTP into our content's placeholder effectively giving you an embeded FireFTP.
Template Add-on Content
Now we get into the fun part.
An addon has the following structure
Or the text version would be:
The important bits here are;
Editing the Template add-on
Now that you have installed the template addon, let's modify it to make your own.
First, locate your Firefox Profile (see Locate your profile folder)
then go to the extensions\pffaddontemplate@performancing.com\ directory.
i.e. On windows mine looks something like this:
C:\Documents and Settings\Jed\Application Data\Mozilla\Firefox\Profiles\se6t32gw.pff-svn-dev\extensions\pffaddontemplate@performancing.com\
The pffaddontemplate@performancing.com is the unique identifer for the add-on.
In my case I'm going to rename it to myfirstaddon@performancing.com however you can use whatever name you want somename@somedomain.com
In this directory you will find the exact directory structure as I mentioned above.
Now that I've edited this dir to myfirstaddon@performancing.com
I then want to procede by renaming all instances of
pffaddontemplate with myfirstaddon
You can easily do this with jEdit by doing a search and replace and selecting 'directory' as shown in the image below:
Now that I've done that, lets open up the
overlay.js file
( /chrome/content/overlay.js )
This most important part of this file is the following:
This is what defines this Firefox extension as a PFF addon.
It's pretty obvious what each field does. In this example,I've changed mine to look like this:
Now we have a new and working PFF Addon.
Let's open up the overlay.xul file and change the name of the Addon tab.
You'll see the following code:
The only change you need to make here is to the value=""
I've changed mine to looks like this
Optionally you could skip doing this is you did a search and replace for "PFF Template" to "My First".
For kicks, I'm also going to change the words of the content:
From:
To:
Here I changed the name of the 'label' element and added on onclick handler that will prompt us with the words "I clicked it" when you click on the 'This is my first!" text.
If you restart Firefox and re-launch pff, you should now have the following in your add-on's tab:
Clicking on the tab should then give you a similar prompt as the Template add-on and show the following:
Here you can see the prompt that appears when I clicked on the "This is my first!" text
That was easy!
Now let's look at the overlay.js file again, specifically the following functions:
and
In both of these sections, you can remove the alert(....); functions and replace them with your own code. For the FireFTP add-on I just placed a '//foo' where the alert function was in the onPFFLoad function to ignore when pff has loaded as I don't want to run any code then.
In onThisTabClick, I run code that loads fireFTP into an iframe I defined in the overlay.xul file.
Packaging the files for distributing you addon is easy.
Creat a .zip file with the content in your myfirst@... directory and rename your .zip to .xpi so your new XPI should have the following structure:
Depending on what you did with Search and Replace, you will also want to upen up the install.rdf file and edit the entries in there.
Specifically you will want to change the ID, Name, version, description and homepage to reflect your own addon.
As mentioned before PFF Addons are basically Firefox extensions tailored for PFF integration.
To learn more about Firefox Extension development, I'd start with the following links;
PFF Addons are basically Firefox extensions tailored for PFF integration, so this tutorial assumes you know a tab bit of XUL, CSS and Javascript.
In reality you can get away with knowing any XUL for the time being and to use this tutorial, and as you go along you'll start to pick it up really easily.
Getting Started
1) First, grab the following two Add-ons for PFF 1.3
2) Drag and drop each .xpi file onto firefox (seperately) and you will be prompted to install the addons as Firefox extension.
3) Restart Firefox and launch pff, then click on the "Settings" nav bar button then the 'Add-ons' tab
3) Enable both of the add-ons by clicking on them, you should see their checkboxe's checked
You have now both installed and enabled your first PFF Add-ons.
Getting to know the Template Add-on
The template extension was built to facilitate you for packaging your add-on as a template and as a showcase for the easy api calls in PFF.
Understanding the Template Functionality:
The template add-on has placeholder prompts for events in PFF and placeholder XUL elements for the tab listing and content. We'll explain that a bit more further down.
Add-ons in PFF can have 3 main components
- A function call at PFF Startup
- A function call when it's tab is
- Registering with PFF
Before looking at the code, let's show what the first two look like,
When you enabled the Template add-on, you saw a prompt stating that the addon was loaded (this is a placeholder) as seen in the image below:
The function that displays this prompt is called everytime pff has loaded.
This is usefull if you need to run some code when PFF starts.
Now that the addon has loaded you will see it under the Addons tab. Note however that the addons tab will only show when you have one or more addons enabled.
The second function call the Template add-on accepts is when the add-on's tab is clicked.
Clicking on the PFF Template tab as shown in the image above will load the add-on's content and fire off a function call that shows us the following prompt:
This aswell is a placeholder so you know where to place any code you want executed when the tab is clicked and the content is shown.
The contet placeholder for the Template looks like this:
This will all make more sense furthur on where we look at the code.
In the example of the Fireftp plugin. We only use #2 and #3,
Since we only care about when the FireFTP tab is clicked, when that function is called we load FireFTP into our content's placeholder effectively giving you an embeded FireFTP.
Template Add-on Content
Now we get into the fun part.
An addon has the following structure
Or the text version would be:
pffaddontemplate.xpi
/chrome.manifest
/install.rdf
/chrome/
/chrome/content/
/overlay.js
/overlay.xul
/chrome/skin/
/overlay.css
/pffaddontemplate-icon.png
The important bits here are;
- overlay.js -- Where your addon's code will be
- overlay.xul -- the xul (interface) for your addon
- overlay.css -- the css styling for your xul
Editing the Template add-on
Now that you have installed the template addon, let's modify it to make your own.
First, locate your Firefox Profile (see Locate your profile folder)
then go to the extensions\pffaddontemplate@performancing.com\ directory.
i.e. On windows mine looks something like this:
C:\Documents and Settings\Jed\Application Data\Mozilla\Firefox\Profiles\se6t32gw.pff-svn-dev\extensions\pffaddontemplate@performancing.com\
The pffaddontemplate@performancing.com is the unique identifer for the add-on.
In my case I'm going to rename it to myfirstaddon@performancing.com however you can use whatever name you want somename@somedomain.com
In this directory you will find the exact directory structure as I mentioned above.
Now that I've edited this dir to myfirstaddon@performancing.com
I then want to procede by renaming all instances of
pffaddontemplate with myfirstaddon
You can easily do this with jEdit by doing a search and replace and selecting 'directory' as shown in the image below:
Now that I've done that, lets open up the
overlay.js file
( /chrome/content/overlay.js )
This most important part of this file is the following:
var myfirstaddon = {
//Required fields: Change these values to reflect your Add-on
name: "PFF Template Add-on", //Add-on Name
version: "1.0", //Add-on version number
description: "A template add-on for PFF", //Add-on Description
author: "Jed Brown", //Add-on Author
id: "myfirstaddon", //Add-on internal name
pffver: 1.3, //Min PFF version supported
//User fields: add your own
myvariable: "hello" //Make sure the last defined var does not have a trailing ','
}
This is what defines this Firefox extension as a PFF addon.
It's pretty obvious what each field does. In this example,I've changed mine to look like this:
var myfirstaddon = {
//Required fields: Change these values to reflect your Add-on
name: "My First", //Add-on Name
version: "0.5", //Add-on version number
description: "My First PFF Add-on", //Add-on Description
author: "Jed Brown", //Add-on Author
id: "myfirstaddon", //Add-on internal name
pffver: 1.3 //Min PFF version supported
}
Now we have a new and working PFF Addon.
Let's open up the overlay.xul file and change the name of the Addon tab.
You'll see the following code:
The only change you need to make here is to the value=""
I've changed mine to looks like this
Optionally you could skip doing this is you did a search and replace for "PFF Template" to "My First".
For kicks, I'm also going to change the words of the content:
From:
To:
Here I changed the name of the 'label' element and added on onclick handler that will prompt us with the words "I clicked it" when you click on the 'This is my first!" text.
If you restart Firefox and re-launch pff, you should now have the following in your add-on's tab:
Clicking on the tab should then give you a similar prompt as the Template add-on and show the following:
Here you can see the prompt that appears when I clicked on the "This is my first!" text
That was easy!
Now let's look at the overlay.js file again, specifically the following functions:
myfirstaddon.onPFFLoad = function () {
alert("Hello world, its the "+myfirstaddon.name+" addon\n Doing something when PFF loads\n or this addon is enabled!")
}
and
myfirstaddon.onThisTabClick = function () {
alert("Hello world, its the "+myfirstaddon.name+" addon\n Doing something after it's tab was clicked!");
}
In both of these sections, you can remove the alert(....); functions and replace them with your own code. For the FireFTP add-on I just placed a '//foo' where the alert function was in the onPFFLoad function to ignore when pff has loaded as I don't want to run any code then.
In onThisTabClick, I run code that loads fireFTP into an iframe I defined in the overlay.xul file.
Packaging your Add-on files:
Packaging the files for distributing you addon is easy.
Creat a .zip file with the content in your myfirst@... directory and rename your .zip to .xpi so your new XPI should have the following structure:
myfirstaddon.xpi
/chrome.manifest
/install.rdf
/chrome/
/chrome/content/
/overlay.js
/overlay.xul
/chrome/skin/
/overlay.css
/myfirstaddon-icon.png
Depending on what you did with Search and Replace, you will also want to upen up the install.rdf file and edit the entries in there.
Specifically you will want to change the ID, Name, version, description and homepage to reflect your own addon.
More about Extension Writtting
As mentioned before PFF Addons are basically Firefox extensions tailored for PFF integration.
To learn more about Firefox Extension development, I'd start with the following links;
powered by performancing firefox
Testing blogger Beta again
Testing blogger Beta again
Technorati Tags: performancing, blogger, atom
Technorati Tags: performancing, blogger, atom
powered by performancing firefox
Friday, August 25, 2006
Delicoius Test #4
Delicoius Test #4
Technorati Tags: performancing, blogger, beta, atom
Technorati Tags: performancing, blogger, beta, atom
powered by performancing firefox
Delicoius Test #3
Delicoius Test #3
Technorati Tags: performancing, blogger, beta, atom
Technorati Tags: performancing, blogger, beta, atom
powered by performancing firefox
Delicoius Test #2
Delicoius Test #2
Technorati Tags: performancing, blogger, beta, atom
Technorati Tags: performancing, blogger, beta, atom
powered by performancing firefox
Delicious Test
Delicious/ blogger beta test!
Technorati Tags: blogger, performancing
Technorati Tags: blogger, performancing
powered by performancing firefox
Subscribe to:
Comments (Atom)