Discover your template css-styles and learn how to change them!

Forum closed, please submit your tips and tricks to: http://docs.joomla.org/Category:Tips_and_tricks
Forum rules
Please submit all new Tips and Tricks to: http://docs.joomla.org/Category:Tips_and_tricks

This forum section will be closed and removed eventually.
Locked
User avatar
leolam
Joomla! Master
Joomla! Master
Posts: 19494
Joined: Mon Aug 29, 2005 10:17 am
Location: Netherlands/ UK/ S'pore/Jakarta/ North America
Contact:

Discover your template css-styles and learn how to change them!

Post by leolam » Sat Feb 04, 2006 12:00 pm

Many questions on the forums 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 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!
8)

Leo
Last edited by leolam on Sat Feb 04, 2006 12:02 pm, edited 1 time in total.
Joomla's #1 Professional Support Provider:
-> Joomla Professional Support: https://gws-desk.com -
-> Joomla Specialized Hosting Solutions: https://gws-host.com -
-> Joomla Webmaster Services: gws-webmaster.services

User avatar
pantelis
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Thu Oct 27, 2005 9:26 am
Location: Limassol - Cyprus
Contact:

Re: Discover your template css-styles and learn how to change them!

Post by pantelis » Sat Feb 18, 2006 3:06 pm

I have read your article ad really is very interesting !!

Pls ... i want help.

I would like to gain control on the show / not show of modules on pages.

For example i would like a page NOT to have modules on positions user1 / user2 / user3 but i ant OTHER pages to have.

How can i do that?

Also i want to do the same with menus.

Thanks
Pp

popi
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Wed Mar 29, 2006 9:09 am

Re: Discover your template css-styles and learn how to change them!

Post by popi » Tue May 02, 2006 11:37 pm

hum...can't this be done in the admin panel under the module config. in the right pane you have a list of in which items you want your model to appear. Or are you trying something different?

User avatar
pantelis
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Thu Oct 27, 2005 9:26 am
Location: Limassol - Cyprus
Contact:

Re: Discover your template css-styles and learn how to change them!

Post by pantelis » Wed May 03, 2006 4:40 am

Since Feb 22 i have learned a bit more about Joomla - Mambo.
One of these things is the appearence of Modules on pages.
Thank you honestly for your reply.
Pp

User avatar
jackbremer
Joomla! Explorer
Joomla! Explorer
Posts: 265
Joined: Wed Jul 12, 2006 5:37 pm
Location: London, UK

Re: Discover your template css-styles and learn how to change them!

Post by jackbremer » Wed Jul 12, 2006 7:32 pm

ok great, thanks....

Took me about 20 minutes of searching the FF Add Ons site for Web Developer v1.0.2 so here's the link for ease of finding:

https://addons.mozilla.org/firefox/60/


Locked

Return to “Submit Your Suggested Tips & Tricks to Docs.joomla.org now please.”