Board index PBase HTML and Style Sheets Tips on understanding your own CSS !

HTML and Style Sheets

Tips on understanding your own CSS !

Customize your galleries.
arjunrc
 
Posts: 1003

Tips on understanding your own CSS !

Post Thu Jul 28, 2005 9:12 am


- - - 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
Image

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
Image

(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
Image

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
Image

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
Image

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
Image

STEP 7 - Now you know !

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

http://www.pbase.com/arjunrc/image/46842710
Image

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
Image

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
Image

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
Last edited by arjunrc on Tue Aug 09, 2005 10:42 am, edited 3 times in total.

matiasasun
 
Posts: 1493


Post Thu Jul 28, 2005 8:25 pm


Bravo!
I would like to add that "view style information" is also a great tool because it gives you information about all the properties (and parameters) that works into the particular section your clicked on. Try and see.
Anyway the bad news is that many things we can create for Firefox does not work when using Internet Explorer. And many things we can do for Internet Explorer does not work with Firefox. And that`s why it is a good thing to check how does it look -at least- in both softwares when done. It might be frustrating till the point of make your cry "Why can’t we all just get along?â€
Last edited by matiasasun on Sun Jul 31, 2005 10:17 am, edited 1 time in total.
Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

alangrant
 
Posts: 861


Post Fri Jul 29, 2005 5:23 am


Excellent stuff. I just wanted to mention one other great thing about this approach: it works in exactly the same way if you are looking at somebody else's page.

This is very useful if you see something you like but aren't sure how they achieved it. Just follow the above steps while looking at that other person's page. Feel free to, for example, test out what their page would look like if they changed a border from 1px to 5px - you will see their page change instantly, but all of this happens only in your own browser, the "real" page isn't affected.
Alan
Travel Photos - http://www.pbase.com/alangrant
Balkanology: Explore Southeast Europe - http://www.balkanology.com/

alangrant
 
Posts: 861


Post Mon Aug 01, 2005 2:20 pm


I've just helped someone on this forum figure out a problem with their CSS using the techniques Arjun outlined above. I added a detailed explanation of exactly how I was able to figure it out to this thread: http://forum.pbase.com/viewtopic.php?p=76019. (Skip the first few posts as they relate to a different problem).

I hope this might be a useful example of the kind of problem-solving approach that can avoid (to quote from above) "many hours of frustration". In this case, it took me only about 30 seconds to solve the problem - and 20 minutes to write about how I solved it!
Alan
Travel Photos - http://www.pbase.com/alangrant
Balkanology: Explore Southeast Europe - http://www.balkanology.com/

arjunrc
 
Posts: 1003


Post Mon Aug 01, 2005 2:55 pm


Pretty cool, Alan.
I think it would be an excellent idea if people post 'use cases' on how to apply the procedures to solve real cases.

Thanks
regds
arjun

cryssfotos
 
Posts: 2


Post Fri Sep 09, 2005 9:21 am


Je pense que c' est le tutoriel que je recherche, pour personnaliser ma galerie Pbase.

Existe il une traduction en FRANCAIS ? :cry:

Merci d' avance.

CRYSS.

magazine
 
Posts: 122


Post Tue Sep 13, 2005 3:40 am


"Google" French :-) -->

J'avais l'habitude le google pour traduire ceci au Français, si désolé pour les erreurs: Ce cours d'instruction est malheureusement seulement en anglais. Peut-être environ qui sait l'anglais et le français peut traduire.

regds
arjun

cryssfotos
 
Posts: 2


Post Tue Sep 13, 2005 12:24 pm


Merci je vais essayer trouver une solution.

Amitiés.

CRYSS.

matiasasun
 
Posts: 1493


Post Tue Sep 13, 2005 9:48 pm


Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

nik5700group
 
Posts: 13


Post Mon Nov 21, 2005 7:43 am


Great information!

Just wanted to include for those that use Mozilla, you can also add the WebDev toolbar to it too. :-)

mrochette
 
Posts: 1

Re: Tips on understanding your own CSS !

Post Thu Dec 29, 2005 1:35 pm


Thanks !

I am search instruction for load my new CSS.

Michel

soulfulimpressions
 
Posts: 284


Post Fri Dec 30, 2005 9:15 pm


style sheets are provided by pbase . 5 or 6 thats great . ? how come style sheets could not be created by those who would like to contribute and then we or i who cant seem to figure it out , just select them to use. just as we would when selecting those provided by pbase? :D

terberg
 
Posts: 21


Post Sat Feb 18, 2006 1:12 am


HELP! I guess that that is the only word that may soon be left in my vocabulary... I need assistance from one of you people who might know the answer... which I assume may be a very simple one.

How do I enable the installation of a download? Apparently my settings are set up to disable downloads but I cannot find anywhere where I can change these settings. I have gone through the entire menu and am now lost. Please can someone point me in the right direction... Thanks

http://i.pbase.com/o4/52/386352/1/56197073.Disabled.jpg


http://www.pbase.com/terberg/image/56197073/large

srijith
Moderator
 
Posts: 2321
Location: Amsterdam


Post Sat Feb 18, 2006 5:43 am


terberg wrote:How do I enable the installation of a download? Apparently my settings are set up to disable downloads but I cannot find anywhere where I can change these settings. I have gone through the entire menu and am now lost. Please can someone point me in the right direction... Thanks


Google is your friend :)
http://kb.mozillazine.org/Unable_to_ins ... s_(Firefox)#Software_installation_disabled

terberg
 
Posts: 21


Post Sat Feb 18, 2006 1:31 pm


Hehehe, I should have thought of that. Thanks for that.

It was indeed a simple procedure:
1. Type about:config in the Location Bar and hit enter.
2. Type xpi in the Filter box and find xpinstall.enabled in the list.
3. Make sure its value is set to "true" (double-click will toggle).

Thanks Srijith! I owe you one!

Next

Board index PBase HTML and Style Sheets Tips on understanding your own CSS !

Who is online

Users browsing this forum: No registered users and 3 guests