057 - Write a document describing how to use CSS class suffixes in Joomla! 1.5.

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!
takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

057 - Write a document describing how to use CSS class suffixes in Joomla! 1.5.

Postby takercena » Mon Jan 14, 2008 9:51 pm

Hello, My name is Muhammad. I currently working for this task. First of all, i can't start this task yet for two days as i have exam.(My head is killing me) I might start doing the job in about 20 hour more. Thank you for your understanding.  :)


Second, i would like to ask where should i begin with?

I hope this task can make me understand more about joomla. Basically, I am newbie at CMS thing, therefore your help is much appreciate.

P.S : I did claim a task before with joomla, but under certain circumstance, i can't reply as i'm having outdoor activity. Sorry for that.
Last edited by mcsmom on Sun Feb 03, 2008 8:45 am, edited 1 time in total.

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 57 Write a document describing how to use CSS class suffixes in Joomla! 1.5.

Postby takercena » Wed Jan 16, 2008 7:44 pm

Hello  :(. Anyone plz describe what i need to do pls :(

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 57 Write a document describing how to use CSS class suffixes in Joomla! 1.5.

Postby shantanubala » Thu Jan 17, 2008 2:59 am

From looking at your task's GHOP page, it's asking for a document describing the use/implementation of CSS class suffixes. To take a look at class suffixes, go to the module manager, and click on any one of the modules. It'll take you to the Module's options page - look at the screenshot below:
Image

If you need any more help, let me know.

Good luck!
-Shantanu
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

User avatar
drmmr763
Joomla! Ace
Joomla! Ace
Posts: 1675
Joined: Tue Oct 23, 2007 8:51 pm
Location: Orlando, Florida
Contact:

Re: 57 Write a document describing how to use CSS class suffixes in Joomla! 1.5.

Postby drmmr763 » Thu Jan 17, 2008 3:52 am

CSS suffixes work like this:

In the template.css file, you have a class for all your modules. This styles the text, height, width, title, etc...Now, if you want one or two of the module to be slightly different, say you want less padding or something like that, but you want all the others to have it, you can copy the code, put in a suffix, and then use the suffix in the module that you want to be different. Thus, the module will pull the styling from a specific CSS Style, rather than a global one.

I can elaborate more if need be.
-Chad Windnagle
Please use the search feature as your question might already have been answered.

http://www.s-go.net/ ~ Website Hosting - Strategic Marketing - Website Development - Print Work

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

Re: 57 Write a document describing how to use CSS class suffixes in Joomla! 1.5.

Postby AmyStephen » Mon Jan 21, 2008 5:54 pm

Thanks Chad and Shantanu. Muhammad - do those answers help?

Amy :)

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

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby AmyStephen » Tue Jan 29, 2008 1:55 am

Just to let you know, this is the last week of the contest.

Thanks!
Amy :)

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Tue Jan 29, 2008 10:04 am

Sorry for late response.  :( . I actually just started this module about 3 days ago because have a camping activity (after exam activity). I'm very sorry doing the selfish thing by claiming the task :( . Btw , i already progressing. I need to know how to work with joomla menu suffix, because i think module suffix is enough for doing all the styling.

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

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby AmyStephen » Tue Jan 29, 2008 2:06 pm

Menu styling is the same type of thing as was showing above. Look at the Menu item parameters.

There is still this week if you want to complete the task. The more work you show, the better chance you have of completing it correctly.

Good luck!
Amy :)

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Wed Jan 30, 2008 4:25 pm

deleted
Last edited by takercena on Fri Feb 01, 2008 6:23 pm, edited 1 time in total.

User avatar
drmmr763
Joomla! Ace
Joomla! Ace
Posts: 1675
Joined: Tue Oct 23, 2007 8:51 pm
Location: Orlando, Florida
Contact:

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1.5.

Postby drmmr763 » Wed Jan 30, 2008 4:39 pm

Very nice of you to include Amy and I in the credits. Thank you!
-Chad Windnagle
Please use the search feature as your question might already have been answered.

http://www.s-go.net/ ~ Website Hosting - Strategic Marketing - Website Development - Print Work

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

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby Chris Davenport » Thu Jan 31, 2008 12:31 am

Hi Muhammad,

Good start.  :)

In most cases the screenshots need to be scaled up and cropped.  It's quite hard to see the important detail on some of them without squinting at the screen!  On the one on page 6 I cannot read the CSS code that is shown and that's quite important.  Actually, I think that one would be better as just text rather than using a screenshot of Eclipse.

The example shows you changing the font to "Amienne".  This will only work if the user has that font on their system so I think it would be worth noting that or perhaps choosing an example which will demonstrate the effect of the class suffix and will work across (nearly) all platforms.

Some of the text is being centred, but I think it should all be left-justified for consistency.

I don't think the document makes it clear which Joomla! entities can have class suffixes appended to them, nor which CSS classes are affected in each case.  Some of that information is there; I'm just not sure it is complete.

You might like to note that whatever is entered into the class suffix field is appended to the CSS class name without trimming of spaces.  So as you correctly show, entering "_abc" as a suffix will result in class names like "module_abc".  But a useful trick is to have a leading space in the suffx.  For example, entering " abc" as a suffix will result in class names like "module abc".  Now this is actually two separate class names and the styles for both will be applied.  That's a really useful trick and often overlooked.  I think you should mention it.

Keep going.  You can do this.  :)

Regards,
Chris.
Chris Davenport - Joomla Production Leadership Team

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

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Thu Jan 31, 2008 2:34 am

I don't think the document makes it clear which Joomla! entities can have class suffixes appended to them, nor which CSS classes are affected in each case.  Some of that information is there; I'm just not sure it is complete.


I'm not quite sure how to do this.

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Thu Jan 31, 2008 4:31 am

deleted
Last edited by takercena on Fri Feb 01, 2008 6:23 pm, edited 1 time in total.

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Fri Feb 01, 2008 3:05 am

???
Last edited by takercena on Fri Feb 01, 2008 3:07 am, edited 1 time in total.

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

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby Chris Davenport » Fri Feb 01, 2008 8:09 am

takercena wrote:
I don't think the document makes it clear which Joomla! entities can have class suffixes appended to them, nor which CSS classes are affected in each case.  Some of that information is there; I'm just not sure it is complete.


I'm not quite sure how to do this.


Modules are not the only Joomla! entities that can have class suffixes.  A menu item can specify a Page Class Suffix.  The principle is the same, but you'll need to work out which CSS classes are affected.

Regards,
Chris.
Chris Davenport - Joomla Production Leadership Team

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

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Fri Feb 01, 2008 6:22 pm

http://www.mediafire.com/?bmyoeotj9yz

And I think I just complete it.  ;)

User avatar
trombonechamp
Joomla! Explorer
Joomla! Explorer
Posts: 403
Joined: Thu Nov 29, 2007 9:37 pm
Location: Minnesota, USA
Contact:

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby trombonechamp » Sat Feb 02, 2008 3:05 am

A couple small grammar things.

-Throughout this document, you say refer to "Joomla! class suffix", where you should be referring to "a Joomla! class suffix" or "the Joomla! class suffix".
-Some of your images are stretched to the point where your radio buttons look like ovals.  Make sure they aren't distorted!
-Watch your capitalizations after "Joomla!"  :)
-You also refer to the Firefox Web Developer extension without mentioning that you should install it.  You should either provide install information, or remove all of the instances where you refer to it.
As example, for Windows’ users,

-This should be "Windows users".
Other template may have different settings.

-"Other templates"
Now add this code inside the
template.css. anywhere you want.

-Remove the "." after template.css, and the "the" before template.css
Add the highlighted codes inside template.css.

-Change "codes" to "code"
Remember, adding class suffix must be exactly as
in the module manager class suffix.

-This could be better worded as "Remember: the class suffix you are adding must be exactly the same as the class suffix in the module manager."
It should look exactly like the beside
image.

-"It should look like the image on the right."
Since Joomla! is a complex web application,
therefore it will be hard for us to do some styling in Joomla!.

-Remove the "therefore" and the "some"
As example we are going to do some styling on Main
Menu module.

-Add an "an" after "As", a comma after "example", and a "the" before "Main"
Then refresh your browser. It must looks exactly
  like below:

-"Now refresh your browser.  It should look like the below image."
In this example we are
going to do some simple styling on Joomla! 1.5 Overview heading. 

-Add a "the" after "Joomla!"
  Contents before styling. Click on the Joomla! Overview  link to go there.

-"To see the content before the styling is applied, click on the 'Joomla! Overview' link"
Type “‐overview” inside Page Class Suffix box.

-put a "the" before "Page"
The same goes to the contentpaneopen‐overview if you want to modify the style to the whole contents.

-"The same goes to the contentpaneopen‐overview, if you want to modify the style of the whole content.
This time we are going to do some styling on Key
Concept menu. 

-put a "the" before "key"
By now you should at least familiar with the admin page.

-"By now you should at least be familiar with the admin page."
And the result is

-Colon after "is"
If you do “.menu‐horizontal.item38” instead “.menu‐horizontal .item38”, the result is nothing

-"instead of"
As this example,

-In this example
it also will affect the menu module
that use the same suffix

-modules
Well if you notice, the former doesn’t have table but the later has table beside the module

-"The former doesn’t have a table, but the latter has a table beside the module."
This is very crucial things to consider when we going to do some styling to
different module.

-"These are very crucial things to consider when doing some styling to a
different module."
We already used a lot in the previous example.

-"We already used it a lot in the previous examples."
Remember if the suffix is style2, in template.css file, you must exactly enter
like modulesuffix or moduletablesuffix.

-remove the comma before "in"
  If you want to do a single  menu styling, follow as exactly as class
information from Firefox Web  Developer plugin.

-"If you want to do a single  menu styling, follow the class information exactly from the Firefox Web Developer plugin."
As example on the picture,

-"As an example in the picture,"
we just add the suffix inside the required module manager and code it inside
the template.css file.

-"we just added the suffix inside the required module manager and coded it inside
the template.css file."
Class Suffix also helps us in modify specific module like what we did to the main
menu module. In conclusion, Class Suffix saves us times in styling the required modules.

-"Class Suffixes also help us modify specific modules, like what we did to the main
menu module. In conclusion, Class Suffixes save us time in styling the required modules."
Leonard Bernstein for President -
Web Development Services: www.BernsteinForPresident.com
My Software Freedom Blog: Trombonechamp.Wordpress.com

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Sat Feb 02, 2008 4:42 am

Thank you so much. My native language is not English. You make me realize how bad I am in English.

Here the updated link.

http://www.mediafire.com/?6dtdcztllak

Need final review.
Last edited by takercena on Sat Feb 02, 2008 8:47 am, edited 1 time in total.

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

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby Chris Davenport » Sat Feb 02, 2008 10:13 am

Well done Muhhamad, I knew you could do it.  :)

I think this is a really good piece of work.  If you are happy with it then please upload to Google and we can close the task.

Regards,
Chris.

PS: Oh, and don't forget to upload the source (ODT?), as well as the PDF.  Thanks.
Chris Davenport - Joomla Production Leadership Team

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

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Sat Feb 02, 2008 1:27 pm

Task Complete

Yes I did it.  :D. Shame that this is my first and last taks :(

I can't upload at google page but i give the link to the freehost (quota reached)
http://code.google.com/p/google-highly- ... %20Summary

1.pdf = http://www.mediafire.com/?6dtdcztllak
2.doc = http://www.mediafire.com/?1bejgkjyz3j
3.odt = http://www.mediafire.com/?4979tvyxl4z
Last edited by takercena on Sat Feb 02, 2008 1:40 pm, 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: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby mcsmom » Sat Feb 02, 2008 2:45 pm

Wow, this is a really, really helpful document! Thanks for your hard work on 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!.

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1

Postby takercena » Sat Feb 02, 2008 3:35 pm

mcsmom wrote:Wow, this is a really, really helpful document! Thanks for your hard work on it.


Thank you.  :)
Err, can someone close this task?
Last edited by takercena on Sun Feb 03, 2008 2:54 am, edited 1 time in total.

User avatar
eagleshout
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Thu Nov 16, 2006 8:08 pm
Contact:

Re: 057 - Write a document describing how to use CSS class suffi

Postby eagleshout » Sat Sep 06, 2008 5:05 pm

Does anyone know where this document can be found?

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

Re: 057 - Write a document describing how to use CSS class suffi

Postby Chris Davenport » Sat Sep 06, 2008 5:36 pm

All the GHOP tasks can be found here: http://docs.joomla.org/GHOP_Contest_Tasks

Regards,
Chris.
Chris Davenport - Joomla Production Leadership Team

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

User avatar
eagleshout
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Thu Nov 16, 2006 8:08 pm
Contact:

Re: 057 - Write a document describing how to use CSS class suffi

Postby eagleshout » Sat Sep 06, 2008 6:17 pm

Thanks much . . . this is a treasure trove as many of these forum posts seem to dead end without a final download link.


Return to “Google's Highly Open Participation Contest”

Who is online

Users browsing this forum: No registered users and 0 guests