Page 1 of 1
062 - Write a document describing how to add browser-specific code to a templat
Posted: Wed Dec 05, 2007 4:30 pm
by Dorf
Hello everyone. My name is Dor, and I had my first experience with Joomla right after it broke off the Mambo team.
Today I claimed this task:
One line summary
Write a document describing how to add browser-specific code to a template.
Description
The document should describe the most commonly used techniques for adding
browser-specific code to a template. These include using conditional
comments to add browser-specific CSS and using the Joomla! 1.5
browser-detection API calls together with PHP conditionals.
The document should comply with current Joomla! Editorial Style Guidelines
and guidelines for the Template Tutorials Project.
Documentation written for this task must be made available under the
Joomla! Electronic Documentation License.
Skills Needed
Prior knowledge of browser detection methods would be useful.
Difficulty
Basic.
Work Product
Document as described above.
My first question about this task: should this document be written like a tutorial or more like a
reference?
Here is
an excerpt of the document I've been writing to help you understand my question.
Thanks in advance!
Claimed: Dec 05 Due: Dec 19
Google Task
[me=AmyStephen]Changed subject
slightly for sorting all threads to match against Google resource
[/me]
Re: 062 - Write a document describing how to add browser-specific code to a tem
Posted: Thu Dec 06, 2007 12:35 am
by Chris Davenport
Hi Dor,
I just read your work so far and I must say it's looking pretty good. A few points to note:-
• The Holly Hack doesn't work for IE7; you might want to note that. See for example:
http://www.positioniseverything.net/art ... r-html.php
• You might mention using conditional comments for IE browsers. For example:
• You should include a description of how to detect browser versions using the Joomla! 1.5 API. Refer to:
http://api.joomla.org/svn/Joomla-Framew ... owser.html You might need to read some of the Joomla! source files to see how these API calls are used in practice, or ask for further information on this forum, or the 1.5 development forum.
• Show how you can use the browser-detection API calls to add an internal or external stylesheet (you can use the addScript and addScriptDeclaration methods in JDocument in your examples).
• Show how you can use the browser-detection API calls to construct browser-specific CSS selectors.
I like the tutorial style of writing that you're using. Continue in the same vein and I think you will end up with a really valuable addition to the documentation. Good luck with the contest!
Regards,
Chris.
Re: 062 - Write a document describing how to add browser-specific code to a tem
Posted: Thu Dec 06, 2007 12:18 pm
by Dorf
Thanks for your help, Chris!
I knew about the first items in your list from the task description, but I didn't really understand the last one - can you please explain (I'm talking about "constructing browser-specific CSS selectors")?
Anyway, here's another update (I think it covers everything except those "browser-specific CSS selectors"):
http://code.google.com/p/google-highly- ... lates.html
Re: 062 - Write a document describing how to add browser-specific code to a tem
Posted: Fri Dec 07, 2007 9:54 am
by Chris Davenport
Dorf wrote:
can you please explain (I'm talking about "constructing browser-specific CSS selectors")?
Sure. Simply that you can construct selectors on-the-fly in your PHP code. For example, you could maybe do something like this in index.php (this won't actually work, but just to give you an idea):
Code: Select all
<?php
$browser = & JBrowser::getInstance();
switch ($browser->getVersion()) {
case '6.0': $browser_hack = '-ie60'; break;
case '7.0': $browser_hack = '-ie70'; break;
default: $browser_hack = '';
}
?>
Then later on you can have tags like this:
Code: Select all
<div class="myClass<?php echo $browser_hack; ?>">
Meanwhile, in your CSS you would have something like this:
Code: Select all
#myClass { whatever-you-need-for-nice-browsers }
#myClass-ie60 { whatever-you-need-for-IE-6.0 }
#myClass-ie70 { whatever-you-need-for-IE-7.0 }
Regards,
Chris.
Re: 062 - Write a document describing how to add browser-specific code to a templat
Posted: Fri Dec 07, 2007 1:05 pm
by Dorf
Re: 062 - Write a document describing how to add browser-specific code to a tem
Posted: Fri Dec 07, 2007 2:47 pm
by AmyStephen
Dorf -
What format is this .dat file? Are you able to provide an Open Office .odt file, as per the contest guidelines?
Thanks!
Amy
Re: 062 - Write a document describing how to add browser-specific code to a templat
Posted: Fri Dec 07, 2007 4:52 pm
by Dorf
It was actually an HTML file :P
I attached an ODT version. Sorry for the mess, but it's a lot harder to design in OpenOffice than in plain HTML files...
Just to be sure, I also uploaded an updated version of the HTML file:
http://code.google.com/p/google-highly- ... lates.html
Re: 062 - Write a document describing how to add browser-specific code to a templat
Posted: Sat Dec 08, 2007 2:37 pm
by Dorf
Can someone have a look at this document and tell me if it's easy enough to understand?
I'd appreciate it a lot.
Thanks!
Re: 062 - Write a document describing how to add browser-specific code to a templat
Posted: Sun Dec 09, 2007 3:43 pm
by Dorf
I really hate to spam like this, but the topic is already on the second page, and I don't have anyone to proofread the document...
Can you help?
Re: 062 - Write a document describing how to add browser-specific code to a tem
Posted: Mon Dec 10, 2007 3:02 am
by AmyStephen
Thanks for saving that as an .odt. I didn't know what to do with the .dat file.
Wow! I learned a lot! Thanks!
Two points:
1. Couple of minor spelling errors:
complicated
This way is a bit more comlicated,
invoke
inkove
2. Consider using a courier 10 font for your xHTML and CSS examples.
This is fabulous and ready to publish. We like to have two judges look at it -- and will try to get that done quickly.
Thank-you very much for this important contribution to the Joomla! community. Fabulous work!
Amy
Re: 062 - Write a document describing how to add browser-specific code to a templat
Posted: Fri Dec 14, 2007 3:17 pm
by Dorf
Can someone mark the task "Closed" on the Google project site, so I can move on to the next task?
Re: 062 - Write a document describing how to add browser-specific code to a tem
Posted: Fri Dec 14, 2007 4:02 pm
by AmyStephen
Dorf -
You have not responded to the feedback with your changes. So, it has not been reviewed and approved, yet, by two judges.
Please provide your latest copy and we will try to review.
Thanks!
Amy
Re: 062 - Write a document describing how to add browser-specific code to a templat
Posted: Fri Dec 14, 2007 4:55 pm
by Dorf
I thought your last post was just an acknowledgement... Sorry
Here is the updated HTML version. The ODT file is attached to this message.
Good night, and sorry again!
Re: 062 - Write a document describing how to add browser-specific code to a tem
Posted: Fri Dec 14, 2007 5:01 pm
by AmyStephen
I approve. Looks great. I'll try to get someone else to review, ASAP.
Thanks very much for this important contribution to the Joomla! community.
Amy
Re: 062 - Write a document describing how to add browser-specific code to a tem
Posted: Sat Dec 15, 2007 12:51 am
by Chris Davenport
Good work Dor! This is a useful and important piece of documentation and I will be incorporating it into the official documentation as soon as I have time.
I'm happy to sign off on this one. If you haven't already done so, please upload your final version to the Google issue tracker and we will mark the task as closed. Please feel free to select another task if you wish.
Good luck with the contest!
Regards,
Chris.
PS: What is your last name so I can make sure that you are attributed with the work?
Re: 062 - Write a document describing how to add browser-specific code to a templat
Posted: Sat Dec 15, 2007 1:07 pm
by Dorf
My last name is Fire.
The ODT file from Google Code:
http://code.google.com/p/google-highly- ... ?id=62#c13
Thank you