Actions

Difference between revisions of "Discover your template css-styles and learn how to change them"

From Joomla! Documentation

m
 
Line 1: Line 1:
Many questions on the forums are related to CSS; where to find the correct style, what point to module table/etc?  
+
There are many questions within the forums that are related to CSS; where to find the correct style, what point to module table/etc?  
 
Here is how to get some instant help with powerful tools available freely!
 
Here is how to get some instant help with powerful tools available freely!
  
 
'''General'''
 
'''General'''
  
Firefox offers a great number of tools and especially a very good extension which is extremely helpful in/with web-development.
+
Firefox offers a great number of tools and especially a very good extension, which is extremely helpful, when dealing 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).
+
"The Web Developer Extension" by Chris Pederick is an awesome support tool. The extension adds a developer assist toolbar to your FireFox browser, which by the way can be hidden if your not using it.
 
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.......
 
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.......
  
Line 14: Line 14:
 
- many others
 
- many others
  
The most important to discuss in this thread  is the option to VIEW the STYLE INFORMATION
+
One tool I would like to focus on here is the ability 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?
+
Here's why... you may have no or little experience with CSS and you have no idea what the table.moduletable stands for or what it does in your CSS template. 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
 
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
Line 45: Line 45:
  
  
What do you learn here:
+
What are you learning 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).
 
* 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).
Line 61: Line 61:
 
# Close and re-open your browser and go to CSS.... last option is View Style Information (Ctrl+Shift+Y see "Options" for keyboard shortcuts).
 
# 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!
+
Do not forget to look into the other options of this extension. They are powerful and are worth the time to learn about them!
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:
+
For those who already have FireFox 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).
 
# 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).

Latest revision as of 16:05, 2 May 2012

There are many questions within the forums that are related to CSS; where to find the correct style, what point to module table/etc? 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, when dealing with web-development. "The Web Developer Extension" by Chris Pederick is an awesome support tool. The extension adds a developer assist toolbar to your FireFox browser, which by the way can be hidden if your not using it. 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

One tool I would like to focus on here is the ability to VIEW the STYLE INFORMATION.

Here's why... you may have no or little experience with CSS and you have no idea what the table.moduletable stands for or what it does in your CSS template. 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 are you learning 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 to look into the other options of this extension. They are powerful and are worth the time to learn about them! For those who already have FireFox 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. Dont 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 go to the extension pages and follow the steps as described above.!