062 - Write a document describing how to add browser-specific code to a templat

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

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:

Quote:

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]

Chris Davenport · **Posted:** Thu Dec 06, 2007 12:35 am

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/articles/poll/star-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-Framework/Environment/JBrowser.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.

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

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

Chris Davenport · **Posted:** Fri Dec 07, 2007 9:54 am

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:

<?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:

Meanwhile, in your CSS you would have something like this:

Code:

#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.

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

Here it is, I hope you like it:
http://code.google.com/p/google-highly- ... lates.html

AmyStephen · **Posted:** Fri Dec 07, 2007 2:47 pm

Dorf -

What format is this .dat file? Are you able to provide an Open Office .odt file, as per the contest guidelines?

Thanks!
Amy

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

It was actually an HTML file

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

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

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!

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

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? :-[

AmyStephen · **Posted:** Mon Dec 10, 2007 3:02 am

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

Quote:

This way is a bit more comlicated,

invoke

Quote:

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

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

Can someone mark the task "Closed" on the Google project site, so I can move on to the next task?

AmyStephen · **Posted:** Fri Dec 14, 2007 4:02 pm

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

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

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!

AmyStephen · **Posted:** Fri Dec 14, 2007 5:01 pm

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

Chris Davenport · **Posted:** Sat Dec 15, 2007 12:51 am

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?

Dorf · **Joined:** Wed Dec 05, 2007 2:46 pm **Posts:** 9

My last name is Fire.
The ODT file from Google Code: http://code.google.com/p/google-highly- ... ?id=62#c13

Thank you

Joomla! Discussion Forums

Forum rules: Please click here to view the forum rules

062 - Write a document describing how to add browser-specific code to a templat

Quick reply

Who is online