059 - Create a document entitled "Getting Started with Template Overrides."

hashani · **Posted:** Thu Jan 03, 2008 6:57 am

Hi all,

I'm Hashani Weerarathna, from Sri Lanka ,16 years old, a girl, I'm a newbie to the
opensource and also for the Joomla!.

I'm interested in Create a document entitled "Getting Started with Template Overrides"

This is my second task and I had been working with another joomla project and
I finished it. take a look at my first task forum thread:
http://forum.joomla.org/index.php/topic,239685.0.html

I would like to contribute to another joomla! project. So claimed this task and
I suppose to give my contribution in my best.

Thank you.
Hashani

Google Task

Quote:

One line summary
Create a document entitled "Getting Started with Template Overrides."

Description

* Copy the HTML folder from the BEEZ template folder into your template folder.
* Mention a benefit for using the BEEZ template overrides is a more accessible website where tables are largely removed and improved semantic xHTML is in place.
* Explain what each of the com_* and mod_* folders represent, and within each of those folders what each subfolder represents. Also, list each file and what can be found in the file.
o com_contact - Contact Component
+ category
# default.php - Contact Category Listing Headings and Footers
# default_items.php - Individual entry for each Contact in a certain category
+ contact
# default.php - Basic Contact Information for an Individual
# default_address.php - Contact Address, Phone, Fax, Mobile, etc. Information
# default_form.php - Form that shows Basic Contact and Address information for a specific person

* Show how to remove numbers from an article category list or a link category list

Documentation written for this task must be made available under the Joomla! Electronic Documentation License.

Skills Needed
Ability to install XAMPP, download and install Joomla! on a localhost using default data. Ability to review software and identify features. Good Open Office Writer and communication skills.

Difficulty
Advanced.

Work Product
Attractive, correctly written white paper. Use logo and color scheme.

Extra Credit (optional)
Provide screen shots and step by step instructions for several different frontend layout examples.

Time Limit
4 weeks.

shantanubala · **Joined:** Thu Nov 29, 2007 9:41 pm **Posts:** 141

Hi!

If you need any help, I've been doing a lot of work with template overrides lately, and I can maybe give some advice, help, etc.

Feel free to post in this thread, or PM me - I'll try and respond as quickly as I can.

Good luck!
-Shantanu

AmyStephen · **Posted:** Thu Jan 03, 2008 6:15 pm

Hashani -

I am *so pleased* you selected this task - it is very important to document so that the community can take full advantage of the power in the template overrides.

Shantanu is doing some very cool stuff with template overrides - you should check out his task - very cool stuff. So, do take full advantage of his knowledge - I am certain you will find him helpful.

Thanks to both of you,
Amy

hashani · **Posted:** Thu Jan 03, 2008 6:20 pm

Hi, Shantanu

Thank you very much for your support and help.

I let you know if I need any advice.

Cheers,
Hashani

shantanubala · **Joined:** Thu Nov 29, 2007 9:41 pm **Posts:** 141

Ok, I found this great, multipurpose, template tutorial, which is licensed under creative commons (so you should be able to use part of it if need be).

[url=http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_6.html]
http://www.compassdesigns.net/tutorials ... ial_6.html[/url]

If you scroll down past the template parameters section, there is a great breakdown of template overrides, which goes into much of the basics involved with template overrides.

Also, the tutorial mentions Beez. If you have your own Joomla installation, look in the 'templates' folder, and you'll notice a template named Beez. This is probably one of the best utilizations of template overrides - it makes Joomla! tableless. If you are comfortable editing code, try dissecting Beez, and maybe even including parts of it in your documentation used as an example - or atleast mention Beez. From my experience developing themes/templates for multiple CMS's, it's a lot easier to understand and code when you have something to use as an example or model.

Just some ideas, hope all goes well.
-Shantanu

AmyStephen · **Posted:** Thu Jan 03, 2008 9:50 pm

Shantanu -

Also, check out the description in the first post, too. It mentions the scope specifically and BEEZ is the focus.

This is not intended to be a really big "how to build template overrides from scratch" piece.

The whole idea is to explain how to copy BEEZ into your template folder. Figure out what all the sub-folders mean. Know how to change a layout - specifically showing how to "show how to remove numbers from an article category list or a link category list."

It's a "getting started" piece and it must be really nice and easy. Not too much or we'll scare them off.

Amy

shantanubala · **Joined:** Thu Nov 29, 2007 9:41 pm **Posts:** 141

Oh D'oh. I should have paid more attention. Gosh I'm too impatient...

Anyways... I'd still take a look at compassdesign's stuff. They've got a good "getting started" and explanation of the various components of template overrides - apart from Beez, they've got a great explanation for the structures and functions of overrides. After you look at Beez, it's really just HTML and CSS from there, as well as maybe an understanding of the various parts which compose a certain page on the frontend.

What I'd do first is go through all the various pages in a Joomla installation that would be used regularly - articles etc. Then, view the source of the page (depending on your browser this may vary - if you're using firefox, I'd reccomend Firebug) If there is another source for documentation, I'd most definitely use it, but whenever I need to figure something out, I view the source, match up the divs and elements with the ones located in the template overrides, then modify the functions by using the page's source for reference. Not only would you want to show how to un-number the lists, but try looking into some of the CSS or javascript aspects template overrides can bring out, especially if a person feels like adding some mootools effects to a page.

It'd be nice to go in depth though, because Joomla's core really needs some explanation right now - the lack of adequate documentation makes the extension development process a lot harder, but of course, it'd probably be impossible to provide documentation for every single Joomla override possible.

Thanks

-Shantanu

AmyStephen · **Posted:** Thu Jan 03, 2008 10:32 pm

LOL! Shantanu - I can't believe how much you know! I'm serious. Where do you learn all of this at your age?

Beginner, Shantanu, beginner! No Firebug. No big tutorial on what each of the pieces mean and how the structures are setup. These people are not going to work with Javascript. So, no cool Mootools effects. We want really simple. The exact steps required are listed above - this is really, really easy for technical people but really really difficult for those who are not technical.

This task comes from forum posts. It is intended for people who ask questions like these:

Question: "How do I get rid of tables in my output?" Answer: Copy the BEEZ html folder into your template folder. Done.

OR

Question: "How can I get rid of the sequence number in the category list layout" Answer: Copy the BEEZ html folder, locate the single layout file, find the correct field, remove it.

Now, another tutorial on the stuff you are talking about would also be good. I would read it after you wrote it, trust me! I know I can learn a lot from you! You *should* write guides and I want you to sign up for January 19th when we will be working as a community. I'll be in touch with some of you for that even - both of you in this thread, for certain!

Amy

hashani · **Posted:** Fri Jan 04, 2008 4:05 am

shantanubala wrote:

[url=http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_6.html]
http://www.compassdesigns.net/tutorials ... ial_6.html[/url]

Just some ideas, hope all goes well.
-Shantanu

Thanks you Shantanu, It helps a lot.

Yes Amy, I'm base on BEEZ template.
Now I'm reading all the post on Template overrides forum thread.

Cheers,
Hashani

AmyStephen · **Posted:** Mon Jan 21, 2008 3:32 am

Hashani -

How are you doing on this task? Tomorrow is the last day to claim a new task. I know you do excellent work. If you have something to share, please do so. If you want to take one more task, we can hurry and review your work so that you can select another.

I look forward to hearing from you soon,
Amy

hashani · **Posted:** Tue Jan 22, 2008 3:00 pm

Hi, Amy

Sorry for the late :'(

. I was unable to check my mails until today since a
problem with my network connection. There are two documents I have
created regarding the template overriding and I will upload both of them.
And also I would like to know whether there are any possibility for me to
claim a new task . $:-\$

Looking forward to hearing your comments.

Cheers,
Hashani

First write-up
http://code.google.com/p/google-highly- ... Summary#c5

trombonechamp · **Posted:** Wed Jan 23, 2008 12:26 am

-These should be made in openoffice.

-Font-wise, you should use Arial.
-Make sure "Beez" and "Joomla!" are always capitalized!
-Some of the graphics are blurry. Don't scale them to make them larger once you import them.

There are also a few grammar/punctuation errors. I can make some changes once you convert it to an odt (Use OpenOffice! Don't just use ZamZar or open it in OO and resave it. Make sure you fix the text running off the page, etc.)

hashani · **Posted:** Wed Jan 23, 2008 5:30 pm

Hi trombonechamp,

Thank you very much for your comments. I have done with some improvements
according to your comments. Any way since I don't have a Linux machine
I had my work on my sisters computer.

I have done some changes to the images and I think now it is more clear to
users. And also I have converted my document to open office document.(.odt)

Any comments?

Cheers,
Hashani

Updated write-up
http://code.google.com/p/google-highly- ... Summary#c6

Chris Davenport · **Posted:** Wed Jan 23, 2008 6:09 pm

Hi hashani,

I'll confine my comments mainly to the content of the document. There are also problems with the layout and use of images which I won't delve in to too much. As English is not your first language (I assume) we'll make allowances for that and I'm sure that others will help you in that respect.

The term "jump labels" is not one I've heard of before. Perhaps that needs a bit more explanation.

For this part of the document:

Quote:

* Explain what each of the com_* and mod_* folders represent, and within each of those folders what each subfolder represents. Also, list each file and what can be found in the file.
o com_contact - Contact Component
+ category
# default.php - Contact Category Listing Headings and Footers
# default_items.php - Individual entry for each Contact in a certain category
+ contact
# default.php - Basic Contact Information for an Individual
# default_address.php - Contact Address, Phone, Fax, Mobile, etc. Information
# default_form.php - Form that shows Basic Contact and Address information for a specific person

I don't think the images you are including really add anything other than visual clutter. I suggest you drop them and just use the outlining facility in OO.

I think you have too many examples which are somewhat repetitive. I would think just 2 or 3 examples (at most) would suffice. As a rule, if an example doesn't add anything new that hasn't been shown before, then don't include it.

I can see the difference in the HTML generated (going from tables to divs), but in most examples I am struggling to see any visible difference in the rendered output. If there is no difference then you don't need to show comparison images; if there is a difference I think you will need to point it out a bit more clearly.

In some examples, the output seems to go from having multiple columns to just a single column. Is that the intended change? I'm wondering why anyone would want to do that as it seems to be reducing readability. If the only change that the overrides are achieving is to go from tables to divs then perhaps small changes in the rendered output are largely irrelevant and there is little point in focussing the readers attention on those differences. Maybe just a single image would suffice to show the reader what part of a typical Joomla! website is being affected.

Regards,
Chris.

hashani · **Posted:** Wed Jan 23, 2008 6:45 pm

Hi Chris,

Thanks for your important comments. I will change my document again.
The last one I have done is "Getting_Started_with_Template_Overrides"
document and I will improve it further.

Btw, The term "jump labels", I refer this,
http://www.joomla-beez.com/index.php?op ... 9&Itemid=1

And Hooray...... Person who write 'The Fine Manual' of Joomla! make comment in my forum thread.

Cheers,
Hashanai

Chris Davenport · **Posted:** Wed Jan 23, 2008 7:07 pm

hashani wrote:

Btw, The term "jump labels", I refer this,
http://www.joomla-beez.com/index.php?op ... 9&Itemid=1

Thanks for that. I learnt a new expression today.

hashani wrote:

And Hooray...... Person who write 'The Fine Manual' of Joomla! make comment in my forum thread.

Well, "The Fine Manual" is written by a lot of people, not just me. In fact I don't get to write anywhere near as much as I'd like to and I'd have commented a lot sooner if there wasn't so much going on at the moment. Now that the Doc Camp is over I should be able to keep up with the GHOP work a bit better.

Regards,
Chris.

AmyStephen · **Posted:** Wed Jan 23, 2008 7:19 pm

Hashani -

I got your PM. I sure do wish we could give you another task but we are required to follow the Google guidelines. Unfortunately, the date has past for new tasks.

There are some planning to continue working with Joomla! after the contest is complete. Your work is fabulous and you are certainly warmly welcome to join in as your time allows.

Thanks so much for all you have done and are doing,
Amy

hashani · **Posted:** Wed Jan 23, 2008 7:30 pm

Hi, Amy

AmyStephen wrote:

There are some planning to continue working with Joomla! after the contest is complete. Your work is fabulous and you are certainly warmly welcome to join in as your time allows.

Yes, I definitely join with you and this great community.

Cheers,
Hashani

trombonechamp · **Posted:** Wed Jan 23, 2008 11:54 pm

This is turning out well!

-There are some spots in there where you have full blank pages.
-Again, make sure you use Arial as your font. There are some sentences, too, where there are two fonts in one sentence.
-Also, there are some places where "Beez" and "Joomla!" aren't capitalized, especially in the titles. Make sure you get those capitalized.

AmyStephen · **Posted:** Mon Jan 28, 2008 10:59 pm

Just as a polite reminder, Hashani, we are in the final week of the contest.

Thanks!
Amy

hashani · **Posted:** Fri Feb 01, 2008 6:11 pm

Hi all,

Finally I manage to show you something.

I was looking for how can I show the template overriding with the examples
which gives users to understand the concept of template overriding very clearly.
So by looking at some questions in the forum I decided to do two examples
which are based on those questions.

So the first I found from here.
In here there is a question like "how I rounded corners by the modules in
template BEEZ". So I solve this with template overriding in my example 2.

Next question I found from here.
Here there is a question regarding "Is it possible to change the article layout
so i get the intro and the readmore text in a separate div?". So I tried to
find solutions for that with template overriding and the solution I kept on
my example 3.

Except above two I have shown how can we override a module with beez. Its
in my example1.

I think those example will be useful to understand how the technique of overriding
template works.

Any thoughts are welcome.

Cheers,
Hashani.

Updated write-up here. [3.25 MB]

mcsmom · **Posted:** Sat Feb 02, 2008 4:17 pm

Hashani,

Looking for real world questions that users have was a great strategy

.

solutions3 · **Joined:** Sun Mar 09, 2008 11:18 am **Posts:** 20

I read it and it is good. I would like to help by making the instructions flow a bit easier. How do I give back the 'refined' file?

I have a question though. The document states the beez template has override. Does this mean that if I want to override another template that I have active. For example, I have 2 templates: beez and funkydesign. If funkydesign is the default template and I want to use override. Then I have to put the files into the beez folder?
OR does it mean that for override you just put it into the template folder you are using. I am confused because it continually refers to beez template as being the override and not override being a function of system which can work for any template.

Thank you!

Joomla! Discussion Forums

Forum rules: Please click here to view the forum rules

059 - Create a document entitled "Getting Started with Template Overrides."

Quick reply

Who is online