Joomla Template Kit 2.5 beta progress report

[admin]

Hello everyone,

Here’s the progress report on the new 2.5 Joomla Template kit Beta.

The extension itself 90% percent done

Newly added features to the extension are.

1. Quick button to launch your web browser to view template
2. Single module include with condition
3. Single module name condition with no module include.
4. Multiple module name condition with no module include
5. New base style sheets easier to read and edit.
6. “Jtemplate” page icons to view type of Joomla code in DW


I’m working on the best way to do the CSS files.
There some challenges that we are facing with two parts of the CSS.

1. The “RTL” Right to left or “LTR” Left to Right language formats.
Its not difficult to implement. This code would change the direction for the
Text in a div tag in CSS would look like this.

Hard coded:
<div dir="LTR"> Hello Joomla </div>
the about code is left to right.

Hard coded:
<div dir="RTL"> Hello Joomla </div>
the about code is left to right.

Middle Eastern languages such as Hebrew and Arabic are written predominantly right-to-left. Numbers
written with the most significant digit left-most, just as in European or other left-to-right text.


The way that Joomla 1.5 Beta handles this is in a Pat-template / Jtemplate Template Condition

<jdoc:tmpl name="loadcss" varscope="document" type="condition" conditionvar="LANG_DIR">
<jdoc:sub condition="rtl">
<link href="templates/{TEMPLATE}/css/template_rtl.css" rel="stylesheet" type="text/css" />
</jdoc:sub>
</jdoc:tmpl>

Basically in short it looks for the condition RTL if this true then it calls the Condition template_rtl.css
Style Sheet.

Now this style sheet is the last sheet called and it will override any matching class’s from any
other styles that have the same name like if you made two class’s in one style sheet with the same
name the last class would win the formatting fight. So in our case template_rtl.css is the last class to be called.

So what does this mean? Well it plays a big part on your layout design if you are going to be dealing
with a site that will have RTL text. Now fact is that 99.99% of you designing a site that uses RTL
could and should just not use call condition above.

I’ll explain in calling the above template condition this will bring in the RTL Style sheet if your site was design using ID tags for your Div tags or tables that use wrappers/containers to hold your template into
place. <div id="brianDIV"> <table width="200" border="0" id="brianTBL">.

Now you have two main style sheets in Joomla 1.5 Beta
Main master style: template.css
Language style: template_rtl.css


The template.css gets called first. If you’re going to design a tableless design div tag wrappers you’re going to add your floats and positions in the template.css in most cases.
If you’re designing a multilingual template you would add your same layout to
The template_rtl.css but you would add dir="LTR” or dir="RTL” to you’re your styles ID’s and class.

Now both styles have same class and ID names the template_rtl.css will win the fight because it’s the last to called. Now you see how one part of the new language system works in Joomla 1.5 Beta.

Now is issue for the extension flow.
If you’re designing a template for a Right to left languages your site visitors want to read
Right to left which is what your content will most likely be written in.

So why should you use the template_rtl.css sheet?
In my option you shouldn’t it’s twice the code and twice the work for nothing.

The same goes for Left to Right designers.

So in My opinion RTL designers you should add dir="RTL” in it template.css.
and not in the template_rtl.css it’s a waste of time no one that reads LTR can read your content.

And no LTR content can make sense read RTL.

This is a fork in the road for us at M65 to follow suit of Joomla 1.5 design
or make one that makes more sense to us.

I have decided to go with a different approach to the CSS files and break them down to into parts.

Template.css will import the other CSS files that have been
Broken down into smaller more readable files

Template.css
@import url(*.css) all;
components.css
Will hold the Content and component formatting

editors.css
Will hold the editor formatting

forms.css
Will hold the form formatting

layouts.css
Will hold the layout formatting

misc.css
Will hold the miscellaneous formatting

modules.css
Will hold the Module formatting

navigation.css
Will hold the Navigation formatting

systemmessage.css
Will hold the system message formatting


broswerhacks.css
Will hold browser hacks will not imported into main template.css
It will added to the template with a browser condition.

print.css
Will hold the print formatting template
Via @import url(*.css) print;

template_rtl.css
HMM ? will be added


Lastly are the help files and how-tos since this still beta and the there I’m sure some changes to take place.
We are going to make an online book section for the extension that you will have access to with the right account access.
I will link to sections later.

On the case truly yours,
Brian Diaz
Media 65