Template overrides austin
-
Upload
chad-windnagle -
Category
Technology
-
view
116 -
download
0
description
Transcript of Template overrides austin
![Page 1: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/1.jpg)
Hacking JoomlaThe right way
By Chad Windnagle
![Page 2: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/2.jpg)
Who Am I?
• Lead Developer at s-go Consulting
• Joomla Expert
• Joomla Google Summer of Code Co-Admin
• Motorcycle Enthusiast
• College Student
![Page 3: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/3.jpg)
Why You Care
• Consistent Layout• HTML5• Mobile• Custom Tailored For You
![Page 4: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/4.jpg)
Important concepts
• The Rule• The reason• The exception• Language Overrides• Layout Overrides
![Page 5: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/5.jpg)
The rule
"Don't hack Joomla."
(includes core extensions and non-core extensions!)
![Page 6: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/6.jpg)
Why
It kills puppies
![Page 7: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/7.jpg)
Why
and kittens
![Page 8: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/8.jpg)
Everything is bigger in Texas?
![Page 9: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/9.jpg)
Not if you break the rules
![Page 10: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/10.jpg)
Seriously...it's bad
Hacking Core Code Causes:• Security Vulnerabilities• Update Nightmares• No longer Feature / Future Proof• Normal sized foods
![Page 11: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/11.jpg)
The exception
There are times when you can modify code without
killing our four legged friends
![Page 12: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/12.jpg)
It's not hard
Joomla 1.5 and Joomla 2.5 made changing things
correctly a very easy task.
![Page 13: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/13.jpg)
Several "approved" methods:
Two ways to 'hack' Joomla, properly
1. Language Override2. Template Override
![Page 14: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/14.jpg)
Language Overrides: Really cool Joomla 2.5 Feature
Joomla's language manager allows you to search, find, and override language
constants.
![Page 15: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/15.jpg)
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.
![Page 16: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/16.jpg)
Changing a language constant
before...
![Page 17: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/17.jpg)
Changing a language constant
after...
![Page 18: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/18.jpg)
One more time…
before...
![Page 19: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/19.jpg)
Changing a language constant
after...
![Page 20: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/20.jpg)
Let's try it out...
{Live Demo}
![Page 21: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/21.jpg)
Important concepts
• The Rule• The reason• The exception• Language Overrides• Layout Overrides
![Page 22: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/22.jpg)
Template Layout Override
Template overrides allow you to store copies of view files in your template directory,
and change them as needed.
![Page 23: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/23.jpg)
Template Layout Override
Joomla will load any template views in priority over views
in an extensions view directory.
![Page 24: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/24.jpg)
Typical Component File System
We can only override VIEW files
![Page 25: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/25.jpg)
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
![Page 26: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/26.jpg)
Compare...
![Page 27: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/27.jpg)
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.
![Page 28: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/28.jpg)
What happens...a visual
Joomla! loads these files
Joomla skips these files
![Page 29: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/29.jpg)
Result
We can now make changes to the files in template that will load instead of the
component's included files.
![Page 30: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/30.jpg)
Try it out
{Live Demo}
![Page 31: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/31.jpg)
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
![Page 32: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/32.jpg)
Important concepts
• The Rule• The reason• The exception• Language Overrides• Layout Overrides
![Page 33: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/33.jpg)
Bonus features
• The Rule• The reason• The exception• Language Overrides• Layout Overrides• Module Chrome
![Page 34: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/34.jpg)
In template html add modules.php
Add this function:
function modChrome_name($module, &$params, &$attribs) {
echo $module->title;
echo $module->content;
}
![Page 35: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/35.jpg)
In template index.php
Check out jdoc for modules
<jdoc:include type="modules" name="atomic-bottomleft" style="name" />
![Page 36: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/36.jpg)
Match it up
See that modChrome_name and the module include uses the style name.
![Page 37: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/37.jpg)
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.
![Page 38: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/38.jpg)
We will attempt this...
{Live Demo}
![Page 39: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/39.jpg)
Bonus features
• The Rule• The reason• The exception• Language Overrides• Layout Overrides• Module Chrome• CSS Overrides
![Page 40: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/40.jpg)
Basic non-Joomla concept
CSS styles can be overwritten by using
cascading order selection statements.
![Page 41: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/41.jpg)
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>
![Page 42: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/42.jpg)
In Joomla...
![Page 43: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/43.jpg)
Cascading order in CSS
Instead of changing redshop.css, I can add to my template css a ordered selection to change ('override') css
styles.
![Page 44: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/44.jpg)
Cascading order in CSS
By simply adding an ordered css statement, we override the component's css file with our own.
![Page 45: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/45.jpg)
Cascading order in CSS
{Live Demo}
![Page 46: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/46.jpg)
New rule
Don't change core code.This includes CSS files!
![Page 47: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/47.jpg)
Conclusion
•Use the language manager to make your site fit you.
•Use template overrides to make all your components consistent and user friendly.
![Page 48: Template overrides austin](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c72f9b4a7959d67c8b456d/html5/thumbnails/48.jpg)
Conclusion
•Use modules.php to add cool features to all your modules.