058 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Google's Highly Open Participation Program tries to get young students into Open Source and Joomla! specifically. Everyone is welcome, there are not limits. You can be a coder, documenter, tester, translator to help out. Jump in and start helping!
_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

058 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Tue Jan 15, 2008 6:57 pm

Hello.

I just claimed this task.
I need to list all CSS classes that are being used in Joomla! 1.5.

I found 104 css files, and i think this will be quite a challenge.
Last edited by AmyStephen on Mon Feb 04, 2008 8:18 am, edited 1 time in total.

User avatar
mcsmom
Joomla! Exemplar
Joomla! Exemplar
Posts: 7985
Joined: Thu Aug 18, 2005 8:43 pm
Location: New York
Contact:

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by mcsmom » Tue Jan 15, 2008 8:38 pm

It's a challenge, but you can do it I'm sure. I would make a spread sheet.

One trick is to use grep if you have it available or get a version of grep from the web. WIth it you could search for class="

Those results would give you a good starting point.

:)
So we must fix our vision not merely on the negative expulsion of war, but upon the positive affirmation of peace. MLK 1964.
http://officialjoomlabook.com Get it at http://www.joomla.org/joomla-press-official-books.html Buy a book, support Joomla!.

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Tue Jan 15, 2008 10:05 pm

Thank you on your proposal. If anyone has any similiar ideas, please, speak. :)

I'm using linux / ubuntu, so yes, i have grep. I think i'm going to write an C or C++ application which would read CSS files and then generate HTML page with a list of classes used in that CSS file and ofcourse CSS code of that class. Then it should be easy to transfer that table / list to openoffice word processor.
Last edited by _SchmRz_ on Tue Jan 15, 2008 10:07 pm, edited 1 time in total.

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Tue Jan 15, 2008 11:36 pm

Here is how I'm planning to list all the CSS classes. If this is wrong let me now. Thank you.
You do not have the required permissions to view the files attached to this post.

User avatar
mcsmom
Joomla! Exemplar
Joomla! Exemplar
Posts: 7985
Joined: Thu Aug 18, 2005 8:43 pm
Location: New York
Contact:

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by mcsmom » Wed Jan 16, 2008 10:48 am

Seems like a good start to me, but I am going to get someone from documentation to give you some tips about the best way to organize it. :)
So we must fix our vision not merely on the negative expulsion of war, but upon the positive affirmation of peace. MLK 1964.
http://officialjoomlabook.com Get it at http://www.joomla.org/joomla-press-official-books.html Buy a book, support Joomla!.

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 11:22 am

Ok.

I just noticed a small problem in headings :)
(/home/schmrz/Desktop/joomla/administrator/components/com_media/assets/popup-imagelist.css)

Solved.

Should I skip CSS files which have no CSS classes? (for example: joomla/administrator/help/en-GB/css/docbook.css)
Last edited by _SchmRz_ on Wed Jan 16, 2008 11:32 am, edited 1 time in total.

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1385
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by Chris Davenport » Wed Jan 16, 2008 11:57 am

Hi _SchmRz_,

I think you're heading in the wrong direction on this one.  That's my fault for not describing the task better.  :(

The problem we're trying to solve with this task is to help all those web designers out there who come to Joomla! needing to restyle a template or even create a new template from scratch.  They need to know which CSS classes are used by the core and what they are used for.

There is a good list (by Waseem Sadiq) to get you started here: http://forum.joomla.org/index.php/topic,201275.0.html  Not sure how accurate that list is.  There's been a lot of changes to the code since then.

To give you an idea of what I had in mind (and please don't copy this material), look here: http://www.asiacity.com/triland/index.p ... view&id=28.  There were at least a couple of other sites doing something similar, but I can't seem to find them right now.

Notice how they have taken screenshots and then overlaid information about the CSS classes on top.  I doubt that all the CSS classes available will need to be illustrated in this way and I really don't know how difficult this will turn out to be.  But it is sorely needed information that will be used by many, many people (including me!).

I don't think there is any need to document the CSS classes used by the editors as these are (hopefully) documented elsewhere.  The editors are third-party extensions that are distributed with Joomla!

Hope this gets you on the right track.  If you have any questions, don't be afraid to ask.  :)

Regards,
Chris.
Chris Davenport

Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 12:14 pm

So i don't need to document all CSS files? I'm going to attach a list of CSS files, so that you could give me more detailed info on which CSS files should be documented. Waseem Sadiq did not include CSS code in his list, should I include it?

And as i can see, he did not document all CSS classes from CSS files. He documented only those which were in use in PHP files. Should I do that?

I'm going to put this on hold until i have all the info i need :)
You do not have the required permissions to view the files attached to this post.
Last edited by _SchmRz_ on Wed Jan 16, 2008 12:19 pm, edited 1 time in total.

User avatar
MiCCAS
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 188
Joined: Mon Jan 01, 2007 6:59 am
Contact:

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by MiCCAS » Wed Jan 16, 2008 1:31 pm

Hi mate,

Can't wait to see your entry.. I'm sure you'll do well with it after getting over the slight confusion.

What I think they requested is for you to go through the template classes and say, ie:

.moduletable {}  -- This changes the... etc etc
.componentheading {} -- This changes the colour and style of ... etc etc

Hope that helps, and like I said.. can't wait to see your entry :)
MiCCAS.net Free PC Services

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 1:35 pm

Thanks for replying.

I think it's something like that, but I need to know exactly which CSS files I need to document. As soon as I get that info I will start working on the documentation.

User avatar
MiCCAS
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 188
Joined: Mon Jan 01, 2007 6:59 am
Contact:

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by MiCCAS » Wed Jan 16, 2008 1:36 pm

_SchmRz_ wrote: Thanks for replying.

I think it's something like that, but I need to know exactly which CSS files I need to document. As soon as I get that info I will start working on the documentation.
I don't think you need to document the css files themselves, but the classes used.. have a look in template_css.css and that will get you most if not all of them.
MiCCAS.net Free PC Services

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 2:33 pm

I know that I don't have to document CSS files. I attached some of the documentation in one of the posts, you can check it out if you want.

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1385
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by Chris Davenport » Wed Jan 16, 2008 2:41 pm

Yes, MiCCAS is right.  The PHP code outputs HTML tags, some of which will include CSS class and/or id names.  It is these classes/ids that need to be listed and illustrated.

For example, in Waseem's list you will see "div.componentheading" mentioned several times.  Now, I happen to know that the .componentheading class is used to style the title that is output by the component.  But how would a web designer who is new to Joomla! know that?  What the web designer needs is a list of the CSS classes that are available for her to use and if possible an illustration of what part of the output is affected by that class.  So your list should have an entry for .componentheading, maybe a short description of what it is used for, and a screenshot which shows where the component heading is on a typical screen.  The designer will be able to look at your list and if, for example, she wants to make the component title green, she will know she has to put .componentheading {color: green;} in her CSS file.  And she will know that without having to delve into the code.

Hope this is beginning to make sense now.  :)

Regards,
Chris.
Chris Davenport

Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 3:25 pm

I will install joomla on my local server now, and then I'm going to continue :)

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 3:46 pm

So what I need to do is to write some documentation about CSS classes used in Joomla templates, so that other people can make templates a lot easier, right? But if that is the case, maybe i should document CSS ID's as well?
Last edited by _SchmRz_ on Wed Jan 16, 2008 3:48 pm, edited 1 time in total.

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1385
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by Chris Davenport » Wed Jan 16, 2008 3:58 pm

Yes, I see from Waseem's list that there will be some id's that should be documented too.

Regards,
Chris.
Chris Davenport

Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 4:41 pm

I have template.css and template_rtl.css. What is template_rtl.css for?

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1385
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by Chris Davenport » Wed Jan 16, 2008 4:45 pm

That's for languages that are written right-to-left (eg. Arabic).  I think it includes the same CSS classes, but adapted for right-to-left content.

Regards,
Chris.
Chris Davenport

Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 4:49 pm

Yes, i noticed it had the same classes. I've came up with somewhat different documenting style. I'm going to list all classes, and when someone clicks on one of them it shows him description, example of usage, and maybe some screenshoot.

I was wondering... Can I put the content of template.css from joomla/template/rhuk_milkyway/css/ as an example?
Last edited by _SchmRz_ on Wed Jan 16, 2008 4:55 pm, edited 1 time in total.

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Wed Jan 16, 2008 7:24 pm

Here is how I'm planning to do this. What do you think about it?
http://schmrz.nonlogic.org/documentation.odt

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1385
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by Chris Davenport » Wed Jan 16, 2008 8:33 pm

Yeah, I think with some refinement that should work.  Well done.  :)

Regards,
Chris.
Chris Davenport

Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Thu Jan 17, 2008 10:36 pm

Hello, I'm back :)

I have a question regarding the ".small" CSS class.

Where is it used? (besides for formating the text "Written by...")

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1385
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by Chris Davenport » Fri Jan 18, 2008 12:26 am

grep is your friend. :)
components/com_newsfeeds/views/categories/tmpl/default.php:           
components/com_content/views/article/tmpl/default.php:         
components/com_content/views/section/tmpl/blog_item.php:               
components/com_content/views/section/tmpl/default.php:                 
components/com_content/views/frontpage/tmpl/default_item.php:         
components/com_content/views/category/tmpl/blog_item.php:             
components/com_weblinks/views/categories/tmpl/default.php:             
includes/js/wz_tooltip.js:var tt_tags = new Array("a","area","b","big","caption","center","code","dd","div","dl","dt","em","h1","h2","h3","h4","h5","h6","i","img","input","li","map","ol","p","pre","s","small","span","strike","strong","sub","sup","table","td","th","tr","tt","u","var","ul","layer");
installation/template/tmpl/preinstall.html:                                                                   
installation/template/tmpl/finish.html:                                                       
plugins/system/legacy/html.php:                                document.write('');
plugins/system/legacy/html.php:                                echo ''. JText::_( 'BACK' ) .'';
templates/rhuk_milkyway/templateDetails.xml:                    Small
templates/beez/html/com_newsfeeds/categories/default.php:               (numlinks . ' ' . JText::_( 'items' ); ?>)
templates/beez/html/com_content/article/default.php:
templates/beez/html/com_content/section/blog_item.php:
templates/beez/html/com_content/section/default.php:                   
templates/beez/html/com_content/frontpage/default_item.php:
templates/beez/html/com_content/category/blog_item.php:
templates/beez/html/com_weblinks/categories/default.php:                 (numlinks ?>)
Regards,
Chris.
Chris Davenport

Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Fri Jan 18, 2008 4:05 pm

It's not a problem to find CSS code for classes. The problem is to find out where are they used. (.small is used for the text that says "Written by....")

But i can't find out for what is the .invalid class used. Any ideas?

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by AmyStephen » Mon Jan 21, 2008 8:05 am

Chris Davenport wrote: To give you an idea of what I had in mind (and please don't copy this material), look here: http://www.asiacity.com/triland/index.p ... view&id=28.  There were at least a couple of other sites doing something similar, but I can't seem to find them right now.

Notice how they have taken screenshots and then overlaid information about the CSS classes on top.  I doubt that all the CSS classes available will need to be illustrated in this way and I really don't know how difficult this will turn out to be.  But it is sorely needed information that will be used by many, many people (including me!).
To be honest, Amir, you still don't seem to be zoning in on what I understand Chris to be asking of you. Don't try to generate a list of CSS codes and then, find where those codes are used. Instead, start with how Joomla! looks to people - using Milkyway - split it apart by modules and components into individual pictures. THEN, label each attribute that has a style tag.

Take a look at that link he provided, again, as an example.

A good tool to use for that is FireFox Web Developer - turn on the Information - Display Class and ID Details option and the tags are revealed. Then, use some type of graphic editor to use lines and arrows to point at things providing the class and id information then.

So, instead of going from a list (which we have and don't need) and trying to figure out where items on that list reside, start from the other direction. Look at the Milkyway template and try to figure out what style information is in each piece.

Step 1: Take a screen print of the frontpage - break it apart into all of it's individual models and components - each one will be it's own picture.

Step 2: Using your Firefox Web Developer tool turn on the Information-Display Class and ID Details option.

Step 3: Document it using an image tool.

That's going to be so very very helpful - you would ROCK Joomla!'s world!

Thanks!
Amy :)

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by AmyStephen » Mon Jan 28, 2008 10:58 pm

_SchmRz_ -

How is it going? We are on the final week.

Thanks!
Amy :)

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 58 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Tue Jan 29, 2008 5:30 pm

I don't have a lot of time now. Trouble in school etc :)
I'm not sure if I can do it in one week. It would be the third time that I'm doing everything all over again.

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 058 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by AmyStephen » Tue Jan 29, 2008 5:44 pm

School comes first! We'll be here this week if you want anything reviewed.

Take care!
Amy :)

User avatar
mcsmom
Joomla! Exemplar
Joomla! Exemplar
Posts: 7985
Joined: Thu Aug 18, 2005 8:43 pm
Location: New York
Contact:

Re: 058 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by mcsmom » Tue Jan 29, 2008 6:25 pm

Just do the best job you can in the time allowed, this is a very challenging task.  One thing you learn  quickly in open source is that projects like this are never really finished, so you need to set some concrete  goals that are realistic to accomplish. Avoid scope creep!
I would say,  for now, to the extent you can, focus on the text not the images. Just getting the data organized in some sortable, searchable fashion will be a tremendous help.  That way a designer could ask: what is used here? And also: where else is this used ?(what's going to break if I change this?).
So we must fix our vision not merely on the negative expulsion of war, but upon the positive affirmation of peace. MLK 1964.
http://officialjoomlabook.com Get it at http://www.joomla.org/joomla-press-official-books.html Buy a book, support Joomla!.

_SchmRz_
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Jan 15, 2008 6:45 pm

Re: 058 - Write a list of all the CSS classes used by the Joomla! 1.5 core.

Post by _SchmRz_ » Tue Jan 29, 2008 8:22 pm

Ok.

Maybe il' try something. I really can't promise anything. I just don't want to quit this task like many others :)


Locked

Return to “Google's Highly Open Participation Contest”