Here is how to get some instant help with powerful tools available freely!
General
Firefox offers a great number of tools and especially a very good extension which is extremely helpful in/with web-development.
The Web Developer Extension 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).
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
* View Style Information
* many others
The most important to discuss in this thread 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 specific 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 module table and you will see by clicking on the header of the module the following information
table.moduletable th (line 203)
{
background-color: transparent;
background-image: url(../images/title_background.png);
background-repeat: no-repeat;
background-attachment: scroll;
-x-background-x-position: 0%;
-x-background-y-position: 0%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: rgb(204, 204, 204);
text-align: left;
text-indent: 15px;
width: 100%;
height: 24px;
text-transform: uppercase;
}
What do you learn here:
* 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).
* 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 helpful 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.
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 1.0.2 (version when writing this piece) and install.
5. Close and re-open your browser and go to CSS.... last option is View Style Information (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:
1. 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).
2. 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, but you need to re-install otherwise it will not work!
3. Check after installation if Dom Inspector is present under the Tools-Tab
4. If present goto the extension pages and follow the steps as described above.!
Now have fun with your Template.CSS.CSS!
Leo
