template overrides austin

Hacking JoomlaThe right way

By Chad Windnagle

Who Am I?

• Lead Developer at s-go Consulting

• Joomla Expert

• Joomla Google Summer of Code Co-Admin

• Motorcycle Enthusiast

• College Student

Why You Care

• Consistent Layout• HTML5• Mobile• Custom Tailored For You

Important concepts

• The Rule• The reason• The exception• Language Overrides• Layout Overrides

The rule

"Don't hack Joomla."

(includes core extensions and non-core extensions!)

Why

It kills puppies

Why

and kittens

Everything is bigger in Texas?

Not if you break the rules

Seriously...it's bad

Hacking Core Code Causes:• Security Vulnerabilities• Update Nightmares• No longer Feature / Future Proof• Normal sized foods

The exception

There are times when you can modify code without

killing our four legged friends

It's not hard

Joomla 1.5 and Joomla 2.5 made changing things

correctly a very easy task.

Several "approved" methods:

Two ways to 'hack' Joomla, properly

1. Language Override2. Template Override

Language Overrides: Really cool Joomla 2.5 Feature

Joomla's language manager allows you to search, find, and override language

constants.

What are language constants?

Language constants are text strings, a lot like variables, with a value

assigned them. They are used in components, modules, and plugins,

and their purpose is to make development and translation easier.

Changing a language constant

before...

Changing a language constant

after...

One more time…

before...

Changing a language constant

after...

Let's try it out...

{Live Demo}

Important concepts

• The Rule• The reason• The exception• Language Overrides• Layout Overrides

Template Layout Override

Template overrides allow you to store copies of view files in your template directory,

and change them as needed.

Template Layout Override

Joomla will load any template views in priority over views

in an extensions view directory.

Typical Component File System

We can only override VIEW files

Understand the directory structure

We copy files from:<joomla>components/com_content/views/featured/tmpl

and put them in:<joomla>/templates/atomic/html/com_content/featured

Compare...

What happened?

Joomla will check the loaded template for any installed

components and views. If it finds a match, it will load the file in the template, and skip

the component.

What happens...a visual

Joomla! loads these files

Joomla skips these files

Result

We can now make changes to the files in template that will load instead of the

component's included files.

Try it out

{Live Demo}

Remember

• Only views can be overridden• If the html directory doesn’t

exist, you can create it.• Joomla will ‘know’• If it doesn’t work, you probably

misspelled something

Important concepts

• The Rule• The reason• The exception• Language Overrides• Layout Overrides

Bonus features

• The Rule• The reason• The exception• Language Overrides• Layout Overrides• Module Chrome

In template html add modules.php

Add this function:

function modChrome_name($module, &$params, &$attribs) {

echo $module->title;

echo $module->content;

}

In template index.php

Check out jdoc for modules

<jdoc:include type="modules" name="atomic-bottomleft" style="name" />

Match it up

See that modChrome_name and the module include uses the style name.

What does it mean?

We can now add any HTML or PHP code to modules.php which can change how module content is

presented in the template.

We will attempt this...

{Live Demo}

Bonus features

• The Rule• The reason• The exception• Language Overrides• Layout Overrides• Module Chrome• CSS Overrides

Basic non-Joomla concept

CSS styles can be overwritten by using

cascading order selection statements.

Cascading order in CSS

CSS Code:p {color:black;font-size:100%}

div.intro p {color:white;font-size:200%}HTML code:

<p>A paragraph with black text</p><div class="intro"><p>paragraph witwhite text</p>

</div>

In Joomla...

Cascading order in CSS

Instead of changing redshop.css, I can add to my template css a ordered selection to change ('override') css

styles.

Cascading order in CSS

By simply adding an ordered css statement, we override the component's css file with our own.

Cascading order in CSS

{Live Demo}

New rule

Don't change core code.This includes CSS files!

Conclusion

•Use the language manager to make your site fit you.

•Use template overrides to make all your components consistent and user friendly.

Conclusion

•Use modules.php to add cool features to all your modules.

Contact me

Chad Windnagles-go Consulting

s-go.netchad@s-go.net

@drmmr763