Page 1 of 1

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

Posted: Mon Jan 14, 2008 9:51 pm
by takercena
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.

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

Posted: Wed Jan 16, 2008 7:44 pm
by takercena
Hello  :(. Anyone plz describe what i need to do pls :(

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

Posted: Thu Jan 17, 2008 2:59 am
by shantanubala
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

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

Posted: Thu Jan 17, 2008 3:52 am
by drmmr763
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.

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

Posted: Mon Jan 21, 2008 5:54 pm
by AmyStephen
Thanks Chad and Shantanu. Muhammad - do those answers help?

Amy :)

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

Posted: Tue Jan 29, 2008 1:55 am
by AmyStephen
Just to let you know, this is the last week of the contest.

Thanks!
Amy :)

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

Posted: Tue Jan 29, 2008 10:04 am
by takercena
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.

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

Posted: Tue Jan 29, 2008 2:06 pm
by AmyStephen
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 :)

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

Posted: Wed Jan 30, 2008 4:25 pm
by takercena
deleted

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

Posted: Wed Jan 30, 2008 4:39 pm
by drmmr763
Very nice of you to include Amy and I in the credits. Thank you!

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

Posted: Thu Jan 31, 2008 12:31 am
by Chris Davenport
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.

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

Posted: Thu Jan 31, 2008 2:34 am
by takercena
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.

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

Posted: Thu Jan 31, 2008 4:31 am
by takercena
deleted

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

Posted: Fri Feb 01, 2008 3:05 am
by takercena
???

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

Posted: Fri Feb 01, 2008 8:09 am
by Chris Davenport
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.

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

Posted: Fri Feb 01, 2008 6:22 pm
by takercena
http://www.mediafire.com/?bmyoeotj9yz

And I think I just complete it.  ;)

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

Posted: Sat Feb 02, 2008 3:05 am
by trombonechamp
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."

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

Posted: Sat Feb 02, 2008 4:42 am
by takercena
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.

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

Posted: Sat Feb 02, 2008 10:13 am
by Chris Davenport
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.

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

Posted: Sat Feb 02, 2008 1:27 pm
by takercena
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

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

Posted: Sat Feb 02, 2008 2:45 pm
by mcsmom
Wow, this is a really, really helpful document! Thanks for your hard work on it.

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

Posted: Sat Feb 02, 2008 3:35 pm
by takercena
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?

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

Posted: Sat Sep 06, 2008 5:05 pm
by eagleshout
Does anyone know where this document can be found?

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

Posted: Sat Sep 06, 2008 5:36 pm
by Chris Davenport
All the GHOP tasks can be found here: http://docs.joomla.org/GHOP_Contest_Tasks

Regards,
Chris.

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

Posted: Sat Sep 06, 2008 6:17 pm
by eagleshout
Thanks much . . . this is a treasure trove as many of these forum posts seem to dead end without a final download link.