SlideShare a Scribd company logo
1 of 49
Download to read offline
JOOMLA! Overrides #JD17NL
Hans Kuijpers @ Joomladay NL 2017
Hans Kuijpers
About me
Elisa Sophia Foltyn · coolcat-creations.com @ Joomlacamp Essen 2017
JOOMLA! Lead Designerin
Selbstständig coolcat-creations
aus Nürnberg
Dipl. Kommunikationswirtin
Mediendesignerin (digital/print)
Elisa Sophia Foltyn
Über mich
Hans Kuijpers @ Joomladay NL 2017
HKweb
Perfect Web Team
Joomladagen
JUG073
Joomla! & Magento
Hans Kuijpers
About me
Hans Kuijpers @ Joomladay NL 2017
• When you create a override you copy/change usually a default.php 

file in your template and override the default-output.

• Creating an alternate Layout means to create a file named by your own and putting it into your
template. For example portfolio.php
Overrides vs. Alternate layouts

Difference
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
• Change Bootstrap 2 based output for own preferences.

• Create an individual Layout without the need of Extensions.

• Output the new Custom Fields in a nice way.
Why do i need that?

Usecases
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
• Stay Update-Able. Never change Joomla! core files. (Core Hacks = NOGO)

• Save Third-Party extensions and release yourself from updating them.
Why do i need that?

Reasons
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
• Works for every component, module, plugin,… that is build in the MVC principle.

• Logic and output are mostly separated, so you can define the style yourself.
Why does it work?
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Where can i create 

Overrides and AL ?
Articles 

Categories
Contacts
Modules
jLayouts
Plugins
Third Party Extensions (MVC)
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Example:
com_content
• Overrides are possible for each of these views.
• Alternate layouts are possible for:
• Articles
• Categories
• Alternate layouts in Connection with own
Menutypes are possible for each view.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Where do i select the alternate layouts? (1)
• In the Global options / Global configuration
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Where do i select the alternate layouts? (2)
• In the Article / in the Categories in the Options-Tab
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Where do i select 

the alternate layouts? (3)
• If a .XML File exist, the layout can be chosen in the
Menutypes.

• In the own Menutype no Alternate Layout 

can be set as it is an Alternate Layout itself.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How do i create 

an override?
• Copy the default.php File from a view 

(Sometimes the name is different such as blog.php etc)
• Put it in your Template Folder into
• html/com_componentname/viewname
• for example html/com_content/article/default.php
• Change the Layout to your needs.
• The Standard-Output is Overwritten.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How do i create 

an alternate layout?
• Copy the default.php File from a view 

(Sometimes the name is different such as blog.php etc.)
• Put it in your template folder into

html/com_componentname/viewname
• and change the filename. For example: 

html/com_content/article/mygreatlayout.php
• Change the layout to your needs:
• Will override the output where you set it.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How do i create an own
Menutype?
• Copy the default.xml File from a view into your
Template-Folder:
• html/com_componentname/viewname
• Change the filename to the one of your Alternate
Layout. for example: mygreatlayout.xml
• Change the Content of the .XML File to your needs
(Languagestrings, Parameters)
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
From „adjusting a bit“ to creating
„whole new crazy stuff“
• Adjusting: Change the Output to be compatible to your used Frontend CSS Framework. 

Bootstrap 2 -> Bootstrap 3 / 4
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
From „adjusting a bit“ to creating
„whole new crazy stuff“
• Creating an own Layout: You can help yourself to determine the possible parameters
and item-variables with writing <?php echo print_r($params); ?> or <?php echo
print_r($this->item); ?> in your layout.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Where do i select an
alternate layout in my modules?
• In the module parameters in the advanced tab
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How do i create an 

module-override?
• Copy the default.php from a module into your
Template-Folder into
• html/modulename
• for example: html/mod_articles_news/default.php
• Change the output according to your needs.
• Overrides the standard-output of this module
everywhere.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How do i create an alternate 

layout for modules?
• Copy the default.php from a module into your
Template-Folder, change the name and put it into
• html/modulename
• for example: html/mod_articles_news/portfolio.php
• Change the Output according to your needs.
• Overrides the Output where you set it.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
TRANSLATION
• You can translate Layoutnames in your Template Languagefile

TPL_PROTOSTAR_COM_CONTENT_ARTICLE_LAYOUT_EXAMPLE=„Example"

• TPL_TEMPLATENAME_COM_COMPONENTNAME_VIEWNAME_LAYOUT_FILENAME
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Modul Chrome
• Has actually nothing to do with overrides… BUT!
• The Modulestyle can be defined in the template
• An alternate Modulestyle can be chosen in the module
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How do i create a
Modul Chrome?
• Easy way: Copy the modules.php from the Protostar
Template to the html/ Folder of your own Template.
• = html/modules.php
• Change the chrome(s) and their function names
• DON’T use names of the Core chromes
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
When an alternate layout?
When a module chrome?
• Create an alternate layout if you want to change specifically this moduletype.
• Create a modulechrome if you wish to change the containers around Modules 

independent of the moduletype.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Joomla! Overrides and alternate layouts
DEMO Example Overrides
http://fast-lines.com
Blogview with hover
Hans Kuijpers @ Joomladay NL 2017
Joomla! Overrides and alternate layouts
DEMO Example Overrides
https://btb-abvv.be/
Menu and Module override on the
right.
Hans Kuijpers @ Joomladay NL 2017
What are jLayouts?
• Layouts are Files, that are used in Joomla! in different
locations. They are excluded so you can 

always include it in different Layouts 

and save duplicated Code.
• For Example: Readmore Button
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How do i create a 

jLayout Override?
• Copy the xyz.php from a layout into your 

template-Folder into
• html/layouts/path/path
• for example:

html/layouts/joomla/content/intro_image.php
• Adjust the output according to your needs.
• Changes the standard-output of this layout
everywhere.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
What if i don´t want to change the Layout
everywhere?
• Copy the xyz.php File from a Layout into your Template-Folder
• html/layouts/path/path
• For example html/layouts/joomla/content/intro_image_elisa.php
• Change the Output according to your needs.
• Include the Layout with the NEW News into your Override or AL
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Media-File Overrides
• You can override files from the Joomla! Media Folder.
• But only if they are implemented somewhat like:

JHtml::_('script', 'com_something/creative.min.js', false, true)
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Override Scripts from the Media Folder
• Override Scripts from the media/jui/js/ Folder:

templates/yourtemplate/js/jui/bootstrap.min.js

templates/yourtemplate/js/jui/html5.js

templates/yourtemplate/js/jui/jQuery.min.js

templates/yourtemplate/js/jui/jQuery-migrate.min.js

templates/yourtemplate/js/jui/jQuery-noconflict.min.js
Joomla! Overrides and alternate layouts
• Override Scripts from the media/system/js Folder:
• templates/ihrtemplate/js/system/caption.js

templates/ihrtemplate/js/system/core.js

templates/ihrtemplate/js/system/html5fallback.js

templates/ihrtemplate/js/system/polyfill.event.js
Hans Kuijpers @ Joomladay NL 2017
UNSET SCRIPTS
• You can unset single scripts with: 

unset($this->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);



NEW in Joomla 3.7:

unset all Joomla! core Scripts in your Template with:

JFactory::getDocument()->resetHeadData('scripts');
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Override images from the media folder
• For Example: Breadcrumbs arrow

media/system/images/arrow.png
• Override with:

templates/yourtemplate/images/system/arrow.png
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Override CSS from the media folder
• For Example: Custom Field Calendar CSS

media/system/css/fields/calendar.css
• Override with:

templates/ihrtemplate/css/system/fields/calendar.css
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Override Files outside the Media Folder
• Sometimes Thirdparty Extension Developers include a code like this in their Component etc.

• $css_path = JPATH_THEMES. '/'.$document->template.'/css/'.$module_name;

if(file_exists($css_path.'/'.$style.'.css'))

{

$document->addStylesheet(JURI::base(true) .

'/templates/'.$document->template.'/css/'. $module_name.' /'.$style.'.css');

}

• You have to look into the code to see if it´s possible.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Override Language Files
• You can override Language Files in Extensions » Language » Overrides
• For Frontend, Backend or both
• You can search for a languagekey or string
• You can only search for languagekeys/strings that are in an .ini File. 

For example not for own defined Custom Fields Labels 

(but they are translateable in the Language Overrides)
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
New in Joomla 3.7: Custom Fields
customfields.coolcat-creations.com
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Override for Plugins
for example Custom Fields

Joomla! Overrides and alternate layouts
(no sorry, the gallery Custom Field

was removed :-( )
Hans Kuijpers @ Joomladay NL 2017
How can i change the Output of a Custom Field 

in the User Profile?
• Create an Override from 

/components/com_users/views/profile/tmpl/default.php 



Output with 

<?php echo $this->data->fields[21]->value; ?>
• or

<?php echo $customFields['fieldalias']->value; ?>
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How can i change the output of a Custom Field 

in an article?
• Use the Field Button to insert Field-Values in the Editor
• Or Create an Article Override and output the fields with: <?php echo $this->item->fields[10]->value; ?>
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How can i output Custom Fields from the
Userprofile in an Article?
• Call the User in the Override:

$user = JFactory::getUser($this->item->created_by);

JEventDispatcher::getInstance()->trigger('onContentPrepare', array(

'com_users.user',&$user,&$user->params,0 ));

• Output the Field with:

<?php echo $user->fields[3]->value; ?>
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How can i output a Custom Field in a contact?
• Use the Field Button to insert fieldvalues in the WYSIWYG Editor.

• Create an Override from the Contact View

• Output the Field with:

<?php echo $this->item->fields[18]->label; ?>

<?php echo $this->item->fields[18]->value; ?>
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How can i call Custom Fields 

from Userprofile in a contact?
• Create an Override from the Contact View

• Output the User Profile Custom Field with:

<?php echo $this->contactUser->fields[20]->value; ?>
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How can i call Custom Fields in a contactform?
• Create an override from the contact form

• Call the Joomla! core fields with:

<?php $this->form->renderField('contact_name'); ?>

• Call the Custom Field with:

<?php $this->form->renderField('fieldalias', ‚com_fields'); ?>
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
More Comfort? You can map the Fieldalias/name
• Possibility: Map Fieldname/alias and use it.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
How can i override the Fields itself? (rendering)
• Override of the Definitionlist around the Fields:

Find: components/com_fields/layouts/fields/render.php 

Put: templates/ihrtemplate/html/layouts/com_fields/fields/render.php

• Override of the Markup around the Field itself:

Find: components/com_fields/layouts/field/render.php 

Put: templates/ihrtemplate/html/layouts/com_fields/field/render.php
• Override of the Fieldinput:
• Find: /layouts/joomla/form/field
• Put: html/layouts/joomla/form/field/xyz
• + Possible that the Plugin has a view, too - Copy and create a new Plugin or Override it.
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Creating an override through the
Template Manager
Joomla! Overrides and alternate layouts
Hans Kuijpers @ Joomladay NL 2017
Questions?
Ask.
twitter:@hans2103
hkweb.nl
Hans Kuijpers @ Joomladay NL 2017
Thank you Community.
You are family.
Greetings from Athens,

Elisa

More Related Content

What's hot

Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeAdolfo Nasol
 
How to Develop Your First Ever Joomla Template?
How to Develop Your First Ever Joomla Template?How to Develop Your First Ever Joomla Template?
How to Develop Your First Ever Joomla Template?damienwoods
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGapAlex S
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web componentsbtopro
 
Top 5 Non-Obvious Drupal Modules
Top 5 Non-Obvious Drupal ModulesTop 5 Non-Obvious Drupal Modules
Top 5 Non-Obvious Drupal Modulesghing
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Holger Bartel
 
Gentle Intro to Drupal Code
Gentle Intro to Drupal CodeGentle Intro to Drupal Code
Gentle Intro to Drupal CodeAddison Berry
 
How to Get Started Theming Plone
How to Get Started Theming PloneHow to Get Started Theming Plone
How to Get Started Theming Plonecdw9
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Filippo Dino
 
Survey on Script-based languages to write a Chatbot
Survey on Script-based languages to write a ChatbotSurvey on Script-based languages to write a Chatbot
Survey on Script-based languages to write a ChatbotNguyen Giang
 
Doing Things the WordPress Way
Doing Things the WordPress WayDoing Things the WordPress Way
Doing Things the WordPress WayMatt Wiebe
 
Drupal 7 Theming - what's new
Drupal 7 Theming - what's newDrupal 7 Theming - what's new
Drupal 7 Theming - what's newMarek Sotak
 
Inchoo s magento posts
Inchoo s magento postsInchoo s magento posts
Inchoo s magento postsTuyến Trần
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
 

What's hot (20)

Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
 
How to Develop Your First Ever Joomla Template?
How to Develop Your First Ever Joomla Template?How to Develop Your First Ever Joomla Template?
How to Develop Your First Ever Joomla Template?
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
 
Top 5 Non-Obvious Drupal Modules
Top 5 Non-Obvious Drupal ModulesTop 5 Non-Obvious Drupal Modules
Top 5 Non-Obvious Drupal Modules
 
Lecture 3 Javascript1
Lecture 3  Javascript1Lecture 3  Javascript1
Lecture 3 Javascript1
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
 
Gentle Intro to Drupal Code
Gentle Intro to Drupal CodeGentle Intro to Drupal Code
Gentle Intro to Drupal Code
 
How to Get Started Theming Plone
How to Get Started Theming PloneHow to Get Started Theming Plone
How to Get Started Theming Plone
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998
 
Survey on Script-based languages to write a Chatbot
Survey on Script-based languages to write a ChatbotSurvey on Script-based languages to write a Chatbot
Survey on Script-based languages to write a Chatbot
 
Doing Things the WordPress Way
Doing Things the WordPress WayDoing Things the WordPress Way
Doing Things the WordPress Way
 
Drupal 7 Theming - what's new
Drupal 7 Theming - what's newDrupal 7 Theming - what's new
Drupal 7 Theming - what's new
 
Inchoo s magento posts
Inchoo s magento postsInchoo s magento posts
Inchoo s magento posts
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 

Similar to JD17NL Joomla! Overrides and alternate layouts

How to customise Joomla
How to customise JoomlaHow to customise Joomla
How to customise JoomlaTim Plummer
 
Joomla templates2011
Joomla templates2011Joomla templates2011
Joomla templates2011Linda Coonen
 
Template overrides austin
Template overrides   austinTemplate overrides   austin
Template overrides austinChad Windnagle
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Mediacurrent
 
What's New in Joomla! 1.6 Templates?
What's New in Joomla! 1.6 Templates?What's New in Joomla! 1.6 Templates?
What's New in Joomla! 1.6 Templates?Barb Ackemann
 
Wordcamp St. Louis - Clean Coding
Wordcamp St. Louis - Clean CodingWordcamp St. Louis - Clean Coding
Wordcamp St. Louis - Clean Codinginspector_fegter
 
Madcap Case Study from Write2Users, Denmark
Madcap Case Study from Write2Users, DenmarkMadcap Case Study from Write2Users, Denmark
Madcap Case Study from Write2Users, DenmarkWrite2Users
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsSteven Slack
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme developmentNaeem Junejo
 
Introduction to styling Molly
Introduction to styling MollyIntroduction to styling Molly
Introduction to styling MollyChris Northwood
 
Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5Don Cranford
 
Keeping Your Themes and Plugins Organized.
Keeping Your Themes and Plugins Organized.Keeping Your Themes and Plugins Organized.
Keeping Your Themes and Plugins Organized.Jacob Martella
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesAndy Wallace
 
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfOrtus Solutions, Corp
 
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...John Sgammato
 
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...John Sgammato
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technicalAlex Walker
 

Similar to JD17NL Joomla! Overrides and alternate layouts (20)

How to customise Joomla
How to customise JoomlaHow to customise Joomla
How to customise Joomla
 
Joomla templates2011
Joomla templates2011Joomla templates2011
Joomla templates2011
 
Template overrides austin
Template overrides   austinTemplate overrides   austin
Template overrides austin
 
Joomla! theming
Joomla! themingJoomla! theming
Joomla! theming
 
Joomla Templates101
Joomla Templates101Joomla Templates101
Joomla Templates101
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
What's New in Joomla! 1.6 Templates?
What's New in Joomla! 1.6 Templates?What's New in Joomla! 1.6 Templates?
What's New in Joomla! 1.6 Templates?
 
Wordcamp St. Louis - Clean Coding
Wordcamp St. Louis - Clean CodingWordcamp St. Louis - Clean Coding
Wordcamp St. Louis - Clean Coding
 
Nanocon Taiwan
Nanocon TaiwanNanocon Taiwan
Nanocon Taiwan
 
Madcap Case Study from Write2Users, Denmark
Madcap Case Study from Write2Users, DenmarkMadcap Case Study from Write2Users, Denmark
Madcap Case Study from Write2Users, Denmark
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme development
 
Introduction to styling Molly
Introduction to styling MollyIntroduction to styling Molly
Introduction to styling Molly
 
Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5
 
Keeping Your Themes and Plugins Organized.
Keeping Your Themes and Plugins Organized.Keeping Your Themes and Plugins Organized.
Keeping Your Themes and Plugins Organized.
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic Templates
 
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
 
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
 
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
Putting it where they need it: How to Populate a Salesforce Knowledge base wi...
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technical
 

More from Hans Kuijpers

JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayoutsJD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayoutsHans Kuijpers
 
RSForm!pro jug073 maart 2019
RSForm!pro  jug073 maart 2019RSForm!pro  jug073 maart 2019
RSForm!pro jug073 maart 2019Hans Kuijpers
 
Template overrides in joomla jug073 februari 2019
Template overrides in joomla   jug073 februari 2019Template overrides in joomla   jug073 februari 2019
Template overrides in joomla jug073 februari 2019Hans Kuijpers
 
Joomla Website optimaliseren - jug073 augustus 2018
Joomla Website optimaliseren - jug073 augustus 2018Joomla Website optimaliseren - jug073 augustus 2018
Joomla Website optimaliseren - jug073 augustus 2018Hans Kuijpers
 
Best Practice: Joomla! templating
Best Practice: Joomla! templatingBest Practice: Joomla! templating
Best Practice: Joomla! templatingHans Kuijpers
 
Maak je website geschikt voor mobiel
Maak je website geschikt voor mobielMaak je website geschikt voor mobiel
Maak je website geschikt voor mobielHans Kuijpers
 
Google Webmasters Tools
Google Webmasters ToolsGoogle Webmasters Tools
Google Webmasters ToolsHans Kuijpers
 
Google Tag Manager #jd14nl
Google Tag Manager #jd14nlGoogle Tag Manager #jd14nl
Google Tag Manager #jd14nlHans Kuijpers
 
Social Share Buttons - #jd14nl
Social Share Buttons - #jd14nlSocial Share Buttons - #jd14nl
Social Share Buttons - #jd14nlHans Kuijpers
 
Site Performance Optimization for Joomla #jwc13
Site Performance Optimization for Joomla #jwc13Site Performance Optimization for Joomla #jwc13
Site Performance Optimization for Joomla #jwc13Hans Kuijpers
 
Rich Snippets in Joomla - #JUG073
Rich Snippets in Joomla - #JUG073Rich Snippets in Joomla - #JUG073
Rich Snippets in Joomla - #JUG073Hans Kuijpers
 
Rich Snippets in Magento product page - #MUG020
Rich Snippets in Magento product page - #MUG020Rich Snippets in Magento product page - #MUG020
Rich Snippets in Magento product page - #MUG020Hans Kuijpers
 
Rich Snippets in Magento product page
Rich Snippets in Magento product pageRich Snippets in Magento product page
Rich Snippets in Magento product pageHans Kuijpers
 
CSS with LESS for #jd13nl
CSS with LESS for #jd13nlCSS with LESS for #jd13nl
CSS with LESS for #jd13nlHans Kuijpers
 
Site Speed Optimisation for JWC2012
Site Speed Optimisation for JWC2012Site Speed Optimisation for JWC2012
Site Speed Optimisation for JWC2012Hans Kuijpers
 
Form2content case for #JUG073
Form2content case for #JUG073Form2content case for #JUG073
Form2content case for #JUG073Hans Kuijpers
 
Magento Theme - set the basics right - mm12nl
Magento Theme - set the basics right - mm12nlMagento Theme - set the basics right - mm12nl
Magento Theme - set the basics right - mm12nlHans Kuijpers
 
Google analytics - jd12nl met Byte Internet
Google analytics - jd12nl met Byte InternetGoogle analytics - jd12nl met Byte Internet
Google analytics - jd12nl met Byte InternetHans Kuijpers
 
Joomla extensies kiezen-jd12nl
Joomla extensies kiezen-jd12nlJoomla extensies kiezen-jd12nl
Joomla extensies kiezen-jd12nlHans Kuijpers
 
Meet magento 2011-templating
Meet magento 2011-templatingMeet magento 2011-templating
Meet magento 2011-templatingHans Kuijpers
 

More from Hans Kuijpers (20)

JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayoutsJD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
 
RSForm!pro jug073 maart 2019
RSForm!pro  jug073 maart 2019RSForm!pro  jug073 maart 2019
RSForm!pro jug073 maart 2019
 
Template overrides in joomla jug073 februari 2019
Template overrides in joomla   jug073 februari 2019Template overrides in joomla   jug073 februari 2019
Template overrides in joomla jug073 februari 2019
 
Joomla Website optimaliseren - jug073 augustus 2018
Joomla Website optimaliseren - jug073 augustus 2018Joomla Website optimaliseren - jug073 augustus 2018
Joomla Website optimaliseren - jug073 augustus 2018
 
Best Practice: Joomla! templating
Best Practice: Joomla! templatingBest Practice: Joomla! templating
Best Practice: Joomla! templating
 
Maak je website geschikt voor mobiel
Maak je website geschikt voor mobielMaak je website geschikt voor mobiel
Maak je website geschikt voor mobiel
 
Google Webmasters Tools
Google Webmasters ToolsGoogle Webmasters Tools
Google Webmasters Tools
 
Google Tag Manager #jd14nl
Google Tag Manager #jd14nlGoogle Tag Manager #jd14nl
Google Tag Manager #jd14nl
 
Social Share Buttons - #jd14nl
Social Share Buttons - #jd14nlSocial Share Buttons - #jd14nl
Social Share Buttons - #jd14nl
 
Site Performance Optimization for Joomla #jwc13
Site Performance Optimization for Joomla #jwc13Site Performance Optimization for Joomla #jwc13
Site Performance Optimization for Joomla #jwc13
 
Rich Snippets in Joomla - #JUG073
Rich Snippets in Joomla - #JUG073Rich Snippets in Joomla - #JUG073
Rich Snippets in Joomla - #JUG073
 
Rich Snippets in Magento product page - #MUG020
Rich Snippets in Magento product page - #MUG020Rich Snippets in Magento product page - #MUG020
Rich Snippets in Magento product page - #MUG020
 
Rich Snippets in Magento product page
Rich Snippets in Magento product pageRich Snippets in Magento product page
Rich Snippets in Magento product page
 
CSS with LESS for #jd13nl
CSS with LESS for #jd13nlCSS with LESS for #jd13nl
CSS with LESS for #jd13nl
 
Site Speed Optimisation for JWC2012
Site Speed Optimisation for JWC2012Site Speed Optimisation for JWC2012
Site Speed Optimisation for JWC2012
 
Form2content case for #JUG073
Form2content case for #JUG073Form2content case for #JUG073
Form2content case for #JUG073
 
Magento Theme - set the basics right - mm12nl
Magento Theme - set the basics right - mm12nlMagento Theme - set the basics right - mm12nl
Magento Theme - set the basics right - mm12nl
 
Google analytics - jd12nl met Byte Internet
Google analytics - jd12nl met Byte InternetGoogle analytics - jd12nl met Byte Internet
Google analytics - jd12nl met Byte Internet
 
Joomla extensies kiezen-jd12nl
Joomla extensies kiezen-jd12nlJoomla extensies kiezen-jd12nl
Joomla extensies kiezen-jd12nl
 
Meet magento 2011-templating
Meet magento 2011-templatingMeet magento 2011-templating
Meet magento 2011-templating
 

Recently uploaded

WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 

Recently uploaded (12)

WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 

JD17NL Joomla! Overrides and alternate layouts

  • 2. Hans Kuijpers @ Joomladay NL 2017 Hans Kuijpers About me Elisa Sophia Foltyn · coolcat-creations.com @ Joomlacamp Essen 2017 JOOMLA! Lead Designerin Selbstständig coolcat-creations aus Nürnberg Dipl. Kommunikationswirtin Mediendesignerin (digital/print) Elisa Sophia Foltyn Über mich
  • 3. Hans Kuijpers @ Joomladay NL 2017 HKweb Perfect Web Team Joomladagen JUG073 Joomla! & Magento Hans Kuijpers About me
  • 4. Hans Kuijpers @ Joomladay NL 2017 • When you create a override you copy/change usually a default.php 
 file in your template and override the default-output.
 • Creating an alternate Layout means to create a file named by your own and putting it into your template. For example portfolio.php Overrides vs. Alternate layouts
 Difference Joomla! Overrides and alternate layouts
  • 5. Hans Kuijpers @ Joomladay NL 2017 • Change Bootstrap 2 based output for own preferences.
 • Create an individual Layout without the need of Extensions.
 • Output the new Custom Fields in a nice way. Why do i need that?
 Usecases Joomla! Overrides and alternate layouts
  • 6. Hans Kuijpers @ Joomladay NL 2017 • Stay Update-Able. Never change Joomla! core files. (Core Hacks = NOGO)
 • Save Third-Party extensions and release yourself from updating them. Why do i need that?
 Reasons Joomla! Overrides and alternate layouts
  • 7. Hans Kuijpers @ Joomladay NL 2017 • Works for every component, module, plugin,… that is build in the MVC principle.
 • Logic and output are mostly separated, so you can define the style yourself. Why does it work? Joomla! Overrides and alternate layouts
  • 8. Hans Kuijpers @ Joomladay NL 2017 Where can i create 
 Overrides and AL ? Articles 
 Categories Contacts Modules jLayouts Plugins Third Party Extensions (MVC) Joomla! Overrides and alternate layouts
  • 9. Hans Kuijpers @ Joomladay NL 2017 Example: com_content • Overrides are possible for each of these views. • Alternate layouts are possible for: • Articles • Categories • Alternate layouts in Connection with own Menutypes are possible for each view. Joomla! Overrides and alternate layouts
  • 10. Hans Kuijpers @ Joomladay NL 2017 Where do i select the alternate layouts? (1) • In the Global options / Global configuration Joomla! Overrides and alternate layouts
  • 11. Hans Kuijpers @ Joomladay NL 2017 Where do i select the alternate layouts? (2) • In the Article / in the Categories in the Options-Tab Joomla! Overrides and alternate layouts
  • 12. Hans Kuijpers @ Joomladay NL 2017 Where do i select 
 the alternate layouts? (3) • If a .XML File exist, the layout can be chosen in the Menutypes.
 • In the own Menutype no Alternate Layout 
 can be set as it is an Alternate Layout itself. Joomla! Overrides and alternate layouts
  • 13. Hans Kuijpers @ Joomladay NL 2017 How do i create 
 an override? • Copy the default.php File from a view 
 (Sometimes the name is different such as blog.php etc) • Put it in your Template Folder into • html/com_componentname/viewname • for example html/com_content/article/default.php • Change the Layout to your needs. • The Standard-Output is Overwritten. Joomla! Overrides and alternate layouts
  • 14. Hans Kuijpers @ Joomladay NL 2017 How do i create 
 an alternate layout? • Copy the default.php File from a view 
 (Sometimes the name is different such as blog.php etc.) • Put it in your template folder into
 html/com_componentname/viewname • and change the filename. For example: 
 html/com_content/article/mygreatlayout.php • Change the layout to your needs: • Will override the output where you set it. Joomla! Overrides and alternate layouts
  • 15. Hans Kuijpers @ Joomladay NL 2017 How do i create an own Menutype? • Copy the default.xml File from a view into your Template-Folder: • html/com_componentname/viewname • Change the filename to the one of your Alternate Layout. for example: mygreatlayout.xml • Change the Content of the .XML File to your needs (Languagestrings, Parameters) Joomla! Overrides and alternate layouts
  • 16. Hans Kuijpers @ Joomladay NL 2017 From „adjusting a bit“ to creating „whole new crazy stuff“ • Adjusting: Change the Output to be compatible to your used Frontend CSS Framework. 
 Bootstrap 2 -> Bootstrap 3 / 4 Joomla! Overrides and alternate layouts
  • 17. Hans Kuijpers @ Joomladay NL 2017 From „adjusting a bit“ to creating „whole new crazy stuff“ • Creating an own Layout: You can help yourself to determine the possible parameters and item-variables with writing <?php echo print_r($params); ?> or <?php echo print_r($this->item); ?> in your layout. Joomla! Overrides and alternate layouts
  • 18. Hans Kuijpers @ Joomladay NL 2017 Where do i select an alternate layout in my modules? • In the module parameters in the advanced tab Joomla! Overrides and alternate layouts
  • 19. Hans Kuijpers @ Joomladay NL 2017 How do i create an 
 module-override? • Copy the default.php from a module into your Template-Folder into • html/modulename • for example: html/mod_articles_news/default.php • Change the output according to your needs. • Overrides the standard-output of this module everywhere. Joomla! Overrides and alternate layouts
  • 20. Hans Kuijpers @ Joomladay NL 2017 How do i create an alternate 
 layout for modules? • Copy the default.php from a module into your Template-Folder, change the name and put it into • html/modulename • for example: html/mod_articles_news/portfolio.php • Change the Output according to your needs. • Overrides the Output where you set it. Joomla! Overrides and alternate layouts
  • 21. Hans Kuijpers @ Joomladay NL 2017 TRANSLATION • You can translate Layoutnames in your Template Languagefile
 TPL_PROTOSTAR_COM_CONTENT_ARTICLE_LAYOUT_EXAMPLE=„Example"
 • TPL_TEMPLATENAME_COM_COMPONENTNAME_VIEWNAME_LAYOUT_FILENAME Joomla! Overrides and alternate layouts
  • 22. Hans Kuijpers @ Joomladay NL 2017 Modul Chrome • Has actually nothing to do with overrides… BUT! • The Modulestyle can be defined in the template • An alternate Modulestyle can be chosen in the module Joomla! Overrides and alternate layouts
  • 23. Hans Kuijpers @ Joomladay NL 2017 How do i create a Modul Chrome? • Easy way: Copy the modules.php from the Protostar Template to the html/ Folder of your own Template. • = html/modules.php • Change the chrome(s) and their function names • DON’T use names of the Core chromes Joomla! Overrides and alternate layouts
  • 24. Hans Kuijpers @ Joomladay NL 2017 When an alternate layout? When a module chrome? • Create an alternate layout if you want to change specifically this moduletype. • Create a modulechrome if you wish to change the containers around Modules 
 independent of the moduletype. Joomla! Overrides and alternate layouts
  • 25. Hans Kuijpers @ Joomladay NL 2017 Joomla! Overrides and alternate layouts DEMO Example Overrides http://fast-lines.com Blogview with hover
  • 26. Hans Kuijpers @ Joomladay NL 2017 Joomla! Overrides and alternate layouts DEMO Example Overrides https://btb-abvv.be/ Menu and Module override on the right.
  • 27. Hans Kuijpers @ Joomladay NL 2017 What are jLayouts? • Layouts are Files, that are used in Joomla! in different locations. They are excluded so you can 
 always include it in different Layouts 
 and save duplicated Code. • For Example: Readmore Button Joomla! Overrides and alternate layouts
  • 28. Hans Kuijpers @ Joomladay NL 2017 How do i create a 
 jLayout Override? • Copy the xyz.php from a layout into your 
 template-Folder into • html/layouts/path/path • for example:
 html/layouts/joomla/content/intro_image.php • Adjust the output according to your needs. • Changes the standard-output of this layout everywhere. Joomla! Overrides and alternate layouts
  • 29. Hans Kuijpers @ Joomladay NL 2017 What if i don´t want to change the Layout everywhere? • Copy the xyz.php File from a Layout into your Template-Folder • html/layouts/path/path • For example html/layouts/joomla/content/intro_image_elisa.php • Change the Output according to your needs. • Include the Layout with the NEW News into your Override or AL Joomla! Overrides and alternate layouts
  • 30. Hans Kuijpers @ Joomladay NL 2017 Media-File Overrides • You can override files from the Joomla! Media Folder. • But only if they are implemented somewhat like:
 JHtml::_('script', 'com_something/creative.min.js', false, true) Joomla! Overrides and alternate layouts
  • 31. Hans Kuijpers @ Joomladay NL 2017 Override Scripts from the Media Folder • Override Scripts from the media/jui/js/ Folder:
 templates/yourtemplate/js/jui/bootstrap.min.js
 templates/yourtemplate/js/jui/html5.js
 templates/yourtemplate/js/jui/jQuery.min.js
 templates/yourtemplate/js/jui/jQuery-migrate.min.js
 templates/yourtemplate/js/jui/jQuery-noconflict.min.js Joomla! Overrides and alternate layouts • Override Scripts from the media/system/js Folder: • templates/ihrtemplate/js/system/caption.js
 templates/ihrtemplate/js/system/core.js
 templates/ihrtemplate/js/system/html5fallback.js
 templates/ihrtemplate/js/system/polyfill.event.js
  • 32. Hans Kuijpers @ Joomladay NL 2017 UNSET SCRIPTS • You can unset single scripts with: 
 unset($this->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
 
 NEW in Joomla 3.7:
 unset all Joomla! core Scripts in your Template with:
 JFactory::getDocument()->resetHeadData('scripts'); Joomla! Overrides and alternate layouts
  • 33. Hans Kuijpers @ Joomladay NL 2017 Override images from the media folder • For Example: Breadcrumbs arrow
 media/system/images/arrow.png • Override with:
 templates/yourtemplate/images/system/arrow.png Joomla! Overrides and alternate layouts
  • 34. Hans Kuijpers @ Joomladay NL 2017 Override CSS from the media folder • For Example: Custom Field Calendar CSS
 media/system/css/fields/calendar.css • Override with:
 templates/ihrtemplate/css/system/fields/calendar.css Joomla! Overrides and alternate layouts
  • 35. Hans Kuijpers @ Joomladay NL 2017 Override Files outside the Media Folder • Sometimes Thirdparty Extension Developers include a code like this in their Component etc.
 • $css_path = JPATH_THEMES. '/'.$document->template.'/css/'.$module_name;
 if(file_exists($css_path.'/'.$style.'.css'))
 {
 $document->addStylesheet(JURI::base(true) .
 '/templates/'.$document->template.'/css/'. $module_name.' /'.$style.'.css');
 }
 • You have to look into the code to see if it´s possible. Joomla! Overrides and alternate layouts
  • 36. Hans Kuijpers @ Joomladay NL 2017 Override Language Files • You can override Language Files in Extensions » Language » Overrides • For Frontend, Backend or both • You can search for a languagekey or string • You can only search for languagekeys/strings that are in an .ini File. 
 For example not for own defined Custom Fields Labels 
 (but they are translateable in the Language Overrides) Joomla! Overrides and alternate layouts
  • 37. Hans Kuijpers @ Joomladay NL 2017 New in Joomla 3.7: Custom Fields customfields.coolcat-creations.com Joomla! Overrides and alternate layouts
  • 38. Hans Kuijpers @ Joomladay NL 2017 Override for Plugins for example Custom Fields
 Joomla! Overrides and alternate layouts (no sorry, the gallery Custom Field
 was removed :-( )
  • 39. Hans Kuijpers @ Joomladay NL 2017 How can i change the Output of a Custom Field 
 in the User Profile? • Create an Override from 
 /components/com_users/views/profile/tmpl/default.php 
 
 Output with 
 <?php echo $this->data->fields[21]->value; ?> • or
 <?php echo $customFields['fieldalias']->value; ?> Joomla! Overrides and alternate layouts
  • 40. Hans Kuijpers @ Joomladay NL 2017 How can i change the output of a Custom Field 
 in an article? • Use the Field Button to insert Field-Values in the Editor • Or Create an Article Override and output the fields with: <?php echo $this->item->fields[10]->value; ?> Joomla! Overrides and alternate layouts
  • 41. Hans Kuijpers @ Joomladay NL 2017 How can i output Custom Fields from the Userprofile in an Article? • Call the User in the Override:
 $user = JFactory::getUser($this->item->created_by);
 JEventDispatcher::getInstance()->trigger('onContentPrepare', array(
 'com_users.user',&$user,&$user->params,0 ));
 • Output the Field with:
 <?php echo $user->fields[3]->value; ?> Joomla! Overrides and alternate layouts
  • 42. Hans Kuijpers @ Joomladay NL 2017 How can i output a Custom Field in a contact? • Use the Field Button to insert fieldvalues in the WYSIWYG Editor.
 • Create an Override from the Contact View
 • Output the Field with:
 <?php echo $this->item->fields[18]->label; ?>
 <?php echo $this->item->fields[18]->value; ?> Joomla! Overrides and alternate layouts
  • 43. Hans Kuijpers @ Joomladay NL 2017 How can i call Custom Fields 
 from Userprofile in a contact? • Create an Override from the Contact View
 • Output the User Profile Custom Field with:
 <?php echo $this->contactUser->fields[20]->value; ?> Joomla! Overrides and alternate layouts
  • 44. Hans Kuijpers @ Joomladay NL 2017 How can i call Custom Fields in a contactform? • Create an override from the contact form
 • Call the Joomla! core fields with:
 <?php $this->form->renderField('contact_name'); ?>
 • Call the Custom Field with:
 <?php $this->form->renderField('fieldalias', ‚com_fields'); ?> Joomla! Overrides and alternate layouts
  • 45. Hans Kuijpers @ Joomladay NL 2017 More Comfort? You can map the Fieldalias/name • Possibility: Map Fieldname/alias and use it. Joomla! Overrides and alternate layouts
  • 46. Hans Kuijpers @ Joomladay NL 2017 How can i override the Fields itself? (rendering) • Override of the Definitionlist around the Fields:
 Find: components/com_fields/layouts/fields/render.php 
 Put: templates/ihrtemplate/html/layouts/com_fields/fields/render.php
 • Override of the Markup around the Field itself:
 Find: components/com_fields/layouts/field/render.php 
 Put: templates/ihrtemplate/html/layouts/com_fields/field/render.php • Override of the Fieldinput: • Find: /layouts/joomla/form/field • Put: html/layouts/joomla/form/field/xyz • + Possible that the Plugin has a view, too - Copy and create a new Plugin or Override it. Joomla! Overrides and alternate layouts
  • 47. Hans Kuijpers @ Joomladay NL 2017 Creating an override through the Template Manager Joomla! Overrides and alternate layouts
  • 48. Hans Kuijpers @ Joomladay NL 2017 Questions? Ask. twitter:@hans2103 hkweb.nl
  • 49. Hans Kuijpers @ Joomladay NL 2017 Thank you Community. You are family. Greetings from Athens,
 Elisa