| Joomla! http://forum.joomla.org/ |
|
| 057 - Write a document describing how to use CSS class suffixes in Joomla! 1.5. http://forum.joomla.org/viewtopic.php?f=487&t=253046 |
Page 1 of 1 |
| Author: | takercena [ Mon Jan 14, 2008 9:51 pm ] |
| Post subject: | 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. |
|
| Author: | takercena [ Wed Jan 16, 2008 7:44 pm ] |
| Post subject: | 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
|
|
| Author: | shantanubala [ Thu Jan 17, 2008 2:59 am ] |
| Post subject: | 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 |
|
| Author: | drmmr763 [ Thu Jan 17, 2008 3:52 am ] |
| Post subject: | 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. |
|
| Author: | AmyStephen [ Mon Jan 21, 2008 5:54 pm ] |
| Post subject: | 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
|
|
| Author: | AmyStephen [ Tue Jan 29, 2008 1:55 am ] |
| Post subject: | 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
|
|
| Author: | takercena [ Tue Jan 29, 2008 10:04 am ] |
| Post subject: | 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.
|
|
| Author: | AmyStephen [ Tue Jan 29, 2008 2:06 pm ] |
| Post subject: | 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
|
|
| Author: | takercena [ Wed Jan 30, 2008 4:25 pm ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1 |
deleted |
|
| Author: | drmmr763 [ Wed Jan 30, 2008 4:39 pm ] |
| Post subject: | 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! |
|
| Author: | Chris Davenport [ Thu Jan 31, 2008 12:31 am ] |
| Post subject: | 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. |
|
| Author: | takercena [ Thu Jan 31, 2008 2:34 am ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1 |
Quote: 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. |
|
| Author: | takercena [ Thu Jan 31, 2008 4:31 am ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1 |
deleted |
|
| Author: | takercena [ Fri Feb 01, 2008 3:05 am ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1 |
|
|
| Author: | Chris Davenport [ Fri Feb 01, 2008 8:09 am ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1 |
takercena wrote: Quote: 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. |
|
| Author: | takercena [ Fri Feb 01, 2008 6:22 pm ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1 |
http://www.mediafire.com/?bmyoeotj9yz And I think I just complete it.
|
|
| Author: | trombonechamp [ Sat Feb 02, 2008 3:05 am ] |
| Post subject: | 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. Quote: As example, for Windows’ users, -This should be "Windows users". Quote: Other template may have different settings. -"Other templates" Quote: Now add this code inside the template.css. anywhere you want. -Remove the "." after template.css, and the "the" before template.css Quote: Add the highlighted codes inside template.css. -Change "codes" to "code" Quote: 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." Quote: It should look exactly like the beside image. -"It should look like the image on the right." Quote: 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" Quote: 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" Quote: Then refresh your browser. It must looks exactly like below: -"Now refresh your browser. It should look like the below image." Quote: In this example we are going to do some simple styling on Joomla! 1.5 Overview heading. -Add a "the" after "Joomla!" Quote: 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" Quote: Type “‐overview” inside Page Class Suffix box. -put a "the" before "Page" Quote: 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. Quote: This time we are going to do some styling on Key Concept menu. -put a "the" before "key" Quote: By now you should at least familiar with the admin page. -"By now you should at least be familiar with the admin page." Quote: And the result is -Colon after "is" Quote: If you do “.menu‐horizontal.item38” instead “.menu‐horizontal .item38”, the result is nothing -"instead of" Quote: As this example, -In this example Quote: it also will affect the menu module that use the same suffix -modules Quote: 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." Quote: 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." Quote: We already used a lot in the previous example. -"We already used it a lot in the previous examples." Quote: Remember if the suffix is style2, in template.css file, you must exactly enter like modulesuffix or moduletablesuffix. -remove the comma before "in" Quote: 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." Quote: As example on the picture, -"As an example in the picture," Quote: 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." Quote: 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." |
|
| Author: | takercena [ Sat Feb 02, 2008 4:42 am ] |
| Post subject: | 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. |
|
| Author: | Chris Davenport [ Sat Feb 02, 2008 10:13 am ] |
| Post subject: | 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. |
|
| Author: | takercena [ Sat Feb 02, 2008 1:27 pm ] |
| Post subject: | 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 |
|
| Author: | mcsmom [ Sat Feb 02, 2008 2:45 pm ] |
| Post subject: | 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. |
|
| Author: | takercena [ Sat Feb 02, 2008 3:35 pm ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffixes in Joomla! 1 |
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? |
|
| Author: | eagleshout [ Sat Sep 06, 2008 5:05 pm ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffi |
Does anyone know where this document can be found? |
|
| Author: | Chris Davenport [ Sat Sep 06, 2008 5:36 pm ] |
| Post subject: | Re: 057 - Write a document describing how to use CSS class suffi |
All the GHOP tasks can be found here: http://docs.joomla.org/GHOP_Contest_Tasks Regards, Chris. |
|
| Author: | eagleshout [ Sat Sep 06, 2008 6:17 pm ] |
| Post subject: | 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. |
|
| Page 1 of 1 | All times are UTC |
| Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group http://www.phpbb.com/ |
|