Download and install Firefox browser. When you install Firefox, please make sure you do not select 'automatic install'. Instead, choose 'custom install' and then make sure you check the option that installs 'Developer Tools' - enabling this adds a very useful feature called 'View Style information' which we will discuss later. If you already have Firefox installed, you can reinstall over it again with this option enabled.

If you have already installed Firefox, make sure you have installed the 'Web Developer Toolbar' extension. 'Web Developer Toolbar' (Webdev for short) is a key element in making editing stylesheets easier. Note: don't confuse this 'webdev' with the popular PBase stylesheet, they are not the same thing.

To check if you have webdev installed, right click your mouse on the top bar of the browser (the bar where you see 'File' 'Edit' 'View' etc.). You will see a menu option that says 'Web Developer Toolbar'. Checking that option will display a new toolbar in your browser. Like so:

(Minor Note: The toolbar may look a little different for you - Firefox supports themes (aka appearances) and the exact look would depend on the theme you chose.)

If you already have 'webdev' installed, skip to Step 4.

If you are here, then you do not have Webdev installed in firefox. Go to https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=60 and install the toolbar.

If the location changes in the future, search for it in https://addons.mozilla.org

Click on “Install Now”, like so:

Restart Firefox after installing webdev. Then enable webdev, if needed, so you can see it. To do this, right click your mouse on the top bar of the browser(The bar where you see 'File' 'Edit' 'View' etc.) you will see a menu option that says 'Web Developer Toolbar'. Make sure it it checked.

As in the original forum posting, Arjun's gallery http://www.pbase.com/arjunrc/nightscapes is chosen.

Lets say I want to fiddle with the style of that page.

Note: This workflow is the same whether you are working on your stylesheet or playing with someone else's stylesheet.

Once you are there, in the new webdev toolbar click on the “CSS” button and select “Edit CSS” from the menu, Like so:

Ta-dah ! All of a sudden a new vertical side pane opens up with the CSS style for the current page! And the best part - its 'visual' - every change you make on the left pane (the stylesheet) will be immediately reflected on the right side (the gallery display). Super cool instant feedback.

Here is what it looks like:

Some Notes: On the left pane, you will see two tabs. Basically, when you create a gallery, PBase adds its own default styles, typically in a file called gallery2.css and then stores your own style in a file name with numbers. In this case, its 33106.css. As you cannot change the PBase default stylesheet (gallery2.css), make sure you click on your own stylesheet tab and fiddle with it.

Okay, this is good. So now we have instant visual feedback. Any change you make is immediately reflected on the right. But still, how on earth do you know which class on the left controls which component in your display screen ?

That is where another cool feature of webdev comes in:

Click on the “Information” button on the webdev toolbar and check “Display ID & Class Details” like so:

When you check that option, this is what you see:

Voila! You now have small colored boxes on the right that tells you which component in CSS controls this display. For example, the “Id=linkedsubgalleries” box on the right tells you that you need to modify the “linkdsubgalleries” identifier in the CSS pane on the left to change the effect of that part on the right.

Remember, if you cannot locate that class in your CSS, that simply means that you have not specified any customizations, and PBase is using its default definition - in which case, you can simply add that class to your own stylesheet and play.

For example:

Here, webdev tells us that the text “London” is controlled by the class “location” in my CSS. So all we need to do is to navigate to the ”.location” class on the left pane and fiddle with it. Hmmmmm lets see if we can increase the font size……

Notes

• once you have located what you need to change, you may want to turn off the “Display ID&Class” feature on the right - it can interfere with your visual perception. To disable it, simply uncheck that option -same steps as enabling it)

• Instead of using the “Display ID&Class” option, you could instead enable the “View Style Information” Option under the webdev CSS button. Once enabled, as you hover your mouse over the gallery, you could notice that Firefox displays the ID & Class details of the elements under your mouse in the status bar area of your browser. If this option is disabled (grayed out) for you, you need to re-install Firefox - follow instructions in Step 1.

So lets see what happens when I change font size to “30”

Hooray! We can see the change to the right!!

This is very important to remember. All changes you make are 'temporary' and not 'permanent'. When you exit Firefox or visit a new page, all changes made to the current page are lost. It is therefore a great tool to fiddle NON-DESCTRUCTIVELY. Once you have fiddled enough, and like what you see on the right, copy the complete style sheet on the left (select all→copy) and paste it into the usual PBase interface for CSS changes.