- - - Last Edited: Aug-9-05 : added view style information - - -
Hi folks,
I receive several mails from people who get stuck with CSS and don't know how/what to edit and which style controls which elements of their galleries. There are many more people who understand what CSS is about but do not use the right tools to make life simpler for them to be able to get to the problem spot sooner - resulting in many hours of frustration.
One of the objectives of the HTML/CSS section in the <a href="http://www.pbase.com/magazine"> PBase Magazine </a> is to help you understand CSS. In addition, this post may help you with some basics with selecting the right approach to making life simpler for you.
The objective of this note is to help you become a little more comfortable in using the right tools and understanding the ease in which you can locate your own problems for the most part.
Really, if you are into editing your own gallery styles:
1. Get Firefox
2. Get the 'Web Developer' Toolbar('Webdev' for short)
(Note: don't confuse this 'webdev' with the popular PBase stylesheet - not the same thing. )
Its MUCH simpler to figure out whats going in with the above tools than staring blankly at your CSS trying to figure out what goes where.
Here is a step-by-step do-it-yourself for getting started:
STEP 1: - Do you have firefox installed ?
If not, go to http://www.mozilla.org/products/firefox and install it !
http://www.pbase.com/arjunrc/image/46842722
NOTE: 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' to webdev which we will talk about later. If you already have Firefox installed, you can reinstall over it again with this option enabled (Thanks to Matias & Alan for this). Also, please uninstall webdev and re-install after you install Firefox.
NOTE: All the subsequent steps MUST be done with Firefox - do not try them with IE or any other browser. It will not work. Specifically, don't try and install 'Web Developer' using IE - you must be running Firefox !
STEP 2: - Do you have Web Developer installed ?
Firefox browser allows you to add many 'features' to the standard browser. One such feature is the 'Web Developer Toolbar' (Webdev for short) that is a key element in making editing stylesheets easier
If you have webdev installed, if you 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:
http://www.pbase.com/arjunrc/image/46842705
(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
STEP 3 - Install Webdev
IF you are here, then you do not have Webdev installed in firefox.
Go to http://addons.mozilla.org and install the toolbar.
the exact location is http://tinyurl.com/d4hv7
If the location changes in the future, search for it in addons.mozilla.org
Click on "Install Now" (make sure you are using Firefox and not IE)
Like so:
http://www.pbase.com/arjunrc/image/46842706
After installing it, exit Firefox and restart again. Then enable the Web Developer toolbar, if needed, so you can see it. To enable it 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.
STEP 4 - Go to the PBase gallery you want to work with
In this case, I selected my own page, http://www.pbase.com/arjunrc/nightscapes
Lets say I want to fiddle with the style of that page.
NOTE: You could go to any other user's gallery too - this workflow is the same whether you are working on your stylesheet or playing with someone else's stylesheet (Thanks Alan)
While you are there, in the new webdev toolbar click on the "CSS" button and select "Edit CSS" from the resulting menu, Like so:
http://www.pbase.com/arjunrc/image/46842707
STEP 5 - The CSS Edit pane
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:
http://www.pbase.com/arjunrc/image/46842708
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. You cannot change the PBase default stylesheet, so make sure you click on your own stylesheet tab and fiddle with it.
STEP 6 - But how do I know which is which ?
Okay, this is good. So now you have instant visual feedback, very easily. 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:
http://www.pbase.com/arjunrc/image/46842709
STEP 7 - Now you know !
When you check that option, this is what you see:
http://www.pbase.com/arjunrc/image/46842710
Voila ! You now have small colored boxes on the right that tell 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)
Way too cool !
For example:
http://www.pbase.com/arjunrc/image/46842711
Here, webdev tells me that the text "London" is controlled by the class "location" in my CSS. So all I need to do is to navigate to the ".location" class on the left pane and fiddle with it.
Hmmmmm lets see if I can increase the font size......
(Note: 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)
Further Note: 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).
STEP 8 - Locate, change and Play !
So lets see what happens when I change font size to "30"
http://www.pbase.com/arjunrc/image/46842712
Hooray ! I see the change to the right !!
STEP 9 - Remember: NONE OF THIS IS PERMANENT
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. Therefore its 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.
regds
arjun