057 - Write a document describing how to use CSS class suffixes in Joomla! 1.5.
-
- 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.
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.
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.
-
- 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.
Hello . Anyone plz describe what i need to do pls
-
- 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.
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:
If you need any more help, let me know.
Good luck!
-Shantanu
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!
- drmmr763
- Joomla! Ace
- Posts: 1671
- 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.
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.
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
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
-
- Joomla! Champion
- Posts: 7018
- 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.
Thanks Chad and Shantanu. Muhammad - do those answers help?
Amy
Amy
-
- Joomla! Champion
- Posts: 7018
- 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
Just to let you know, this is the last week of the contest.
Thanks!
Amy
Thanks!
Amy
-
- 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
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.
-
- Joomla! Champion
- Posts: 7018
- 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
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
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
-
- 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
deleted
Last edited by takercena on Fri Feb 01, 2008 6:23 pm, edited 1 time in total.
- drmmr763
- Joomla! Ace
- Posts: 1671
- 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.
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
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
- Chris Davenport
- Joomla! Ace
- Posts: 1370
- 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
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.
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
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
-
- 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
I'm not quite sure how to do this.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.
-
- 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
deleted
Last edited by takercena on Fri Feb 01, 2008 6:23 pm, edited 1 time in total.
-
- 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
Last edited by takercena on Fri Feb 01, 2008 3:07 am, edited 1 time in total.
- Chris Davenport
- Joomla! Ace
- Posts: 1370
- 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
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.takercena wrote:I'm not quite sure how to do this.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.
Regards,
Chris.
Chris Davenport
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
-
- Joomla! Apprentice
- Posts: 14
- Joined: Tue Dec 11, 2007 7:23 am
- trombonechamp
- 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
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.
different module."
the template.css file."
menu module. In conclusion, Class Suffixes save us time in styling the required modules."
-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.
-This should be "Windows users".As example, for Windows’ users,
-"Other templates"Other template may have different settings.
-Remove the "." after template.css, and the "the" before template.cssNow add this code inside the
template.css. anywhere you want.
-Change "codes" to "code"Add the highlighted codes inside template.css.
-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."Remember, adding class suffix must be exactly as
in the module manager class suffix.
-"It should look like the image on the right."It should look exactly like the beside
image.
-Remove the "therefore" and the "some"Since Joomla! is a complex web application,
therefore it will be hard for us to do some styling in Joomla!.
-Add an "an" after "As", a comma after "example", and a "the" before "Main"As example we are going to do some styling on Main
Menu module.
-"Now refresh your browser. It should look like the below image."Then refresh your browser. It must looks exactly
like below:
-Add a "the" after "Joomla!"In this example we are
going to do some simple styling on Joomla! 1.5 Overview heading.
-"To see the content before the styling is applied, click on the 'Joomla! Overview' link"Contents before styling. Click on the Joomla! Overview link to go there.
-put a "the" before "Page"Type “‐overview” inside Page Class Suffix box.
-"The same goes to the contentpaneopen‐overview, if you want to modify the style of the whole content.The same goes to the contentpaneopen‐overview if you want to modify the style to the whole contents.
-put a "the" before "key"This time we are going to do some styling on Key
Concept menu.
-"By now you should at least be familiar with the admin page."By now you should at least familiar with the admin page.
-Colon after "is"And the result is
-"instead of"If you do “.menu‐horizontal.item38” instead “.menu‐horizontal .item38”, the result is nothing
-In this exampleAs this example,
-modulesit also will affect the menu module
that use the same suffix
-"The former doesn’t have a table, but the latter has a table beside the module."Well if you notice, the former doesn’t have table but the later has table beside the module
-"These are very crucial things to consider when doing some styling to aThis is very crucial things to consider when we going to do some styling to
different module.
different module."
-"We already used it a lot in the previous examples."We already used a lot in the previous example.
-remove the comma before "in"Remember if the suffix is style2, in template.css file, you must exactly enter
like modulesuffix or moduletablesuffix.
-"If you want to do a single menu styling, follow the class information exactly from the Firefox Web Developer plugin."If you want to do a single menu styling, follow as exactly as class
information from Firefox Web Developer plugin.
-"As an example in the picture,"As example on the picture,
-"we just added the suffix inside the required module manager and coded it insidewe just add the suffix inside the required module manager and code it inside
the template.css file.
the template.css file."
-"Class Suffixes also help us modify specific modules, like what we did to the mainClass 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.
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
Web Development Services: www.BernsteinForPresident.com
My Software Freedom Blog: Trombonechamp.Wordpress.com
-
- 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
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.
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.
- Chris Davenport
- Joomla! Ace
- Posts: 1370
- 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
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.
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
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
-
- 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
Task Complete
Yes I did it. . 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
Yes I did it. . 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.
- mcsmom
- Joomla! Exemplar
- Posts: 7897
- 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
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!.
http://officialjoomlabook.com Get it at http://www.joomla.org/joomla-press-official-books.html Buy a book, support Joomla!.
-
- 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
Thank you.mcsmom wrote: Wow, this is a really, really helpful document! Thanks for your hard work on it.
Err, can someone close this task?
Last edited by takercena on Sun Feb 03, 2008 2:54 am, edited 1 time in total.
- eagleshout
- 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
Does anyone know where this document can be found?
- Chris Davenport
- Joomla! Ace
- Posts: 1370
- 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
Chris Davenport
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
- eagleshout
- 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
Thanks much . . . this is a treasure trove as many of these forum posts seem to dead end without a final download link.