Based on initial post from Andy Miller (Rhuk) in the old forum whcih helped me very much. We receive on the forums many questions related to CSS, where to find the correct style, what point to module tabe/etc? I did follow Andy's suggestions and it has helped me a lot. Here is a recall with some adjustments:
General Firefox offers a great number of tools and especially a very good extension which is extremely helpful in/with web-development. Web Developer (current version 0.9.3) by Chris Pederick is an awesome supporting tool. The extension adds a developer assist toolbar to your FF browser (can be hidden if no use). At the bottom of this article you will find the links.
Amongst so many other tools such as "validation"/ broken links/ source indebts/ forms generation and convert Gets to Posts and Posts to Gets etc/ it offers you the world on CSS.......
- Edit CSS
- View CSS
- Add User Syle Sheet
- many others
The most important to discuss in line with this post though is the option to
VIEW the
STYLE INFORMATION Here is the deal why.......you have no or little experience with CSS and you have no idea what the
table.moduletable stands for or what ist does in your template CSS .You want to change the header background of modules in your template. The view style information option in the Web Development extension of Firefox which is accesible via Ctrl+Shift+Y keyboard shortcut allows you the following. It creates a crosshair which you can move over your template. Lets say you want to change the header and size of a the module header as said and you have no idea how to do that becasue what to change and how to change and where to change this in your template?
In the toolbar (or via CTR+SHift+Y) you can place the crosshair on top of the desired table and you will see by clicking on the header of the module the following information :) ( picture should be visible here but if not see the attachement)
What do you see here:
1. You learn that the info is located in /yoursite/templates/name-of-your-template(JavaBean)/name-of folder(CSS)/name-of-file(template.css.css) >>>now you know where to go to change!
2. You know what is the "container" that holds your information "table.moduletable.th" so this is the one you have to do something with and you can locate it in your directory structure and do something with it with help of Notepad or any other text editor such as Notepad (or advance tools such as Dreamweaver/Zend/etc)
3. Now you wanted to change the size etc :::: see here what is stated? color/size/weight/width/spacing/etc you can all change to your likings!
save your changes and done! See how helpfull this extension is???
Now how to get this properly installed which is very simple but you might run into some small issues. Follow this and it will work perfectly:
1: Download Firefox if you have not done yet (which is hard to believe... ???)
2. Install and choose "custom install" and check that the the development tools are tagged! (yes!)
3. Install FF goes for itself.
4. Start FF > Tools > Extensions > get more extensions > developers tools > page 7 (last page) > web developer 0.9.3 and install
5. close and re-open your browser and goto CSS.... last option is
View Style Information or (Ctrl+Shift+Y see "Options" for keyboard shortcuts)
Do not forget the look into the other options of this extension. It is worthwhile!
For those who already have FF installed but not yet the Web Developer Tools you need to do te following when you want to install:
Open Tools from the Browser and see if "Dom Inspector" is present as choice. If yes follow the steps above and install the extension and it wil work. If DOM Inspector is NOT present do the following steps (Needed otherwise the View Style Information does not work since it needs the Dom-function).
1. Re-install Firefox with development tools! This will take care that the Dom Inspector is installed as well. Don't be afraid...all your FF-settings are preserved when re-installing... no fear!
2. Check after installation if Dom Inspector is present under the Tools-Tab
3. if present goto the extension pages and follow the steps as described above.!
Now have fun with your Template.CSS.CSS!
Leo
Credit http://chrispederick.com/work/firefox/webdeveloper/_________________
Specialized & Individual On-Site Support:: HTTP://GWS-DESK.COMJoomla Professional Web Site Development::
HTTP://GWS-STUDIO.COMDid you Google 'Joomla Specialized Hosting' ? # 1: People ++ #1: Reliability ++ #1: Service
