Slimme Joomla! Templating Tips en Truuks

Slimme Joomla! Templating
Tips en Truuks
Robin Poort (@rhcpoort)
JD13NL, Zeist, april 2013

Tweepixels.nl/Academy
trainer | Joomla!
ThemePartner.com
design / development

Templates
index.php
Module alternatieve weergave
Menu item alternatieve weergave

<?php
$app = JFactory::getApplication();
$menu = $app->getMenu();
$active = $menu->getActive();
$pageclass = '';
if(is_object($active)
&& isset($active->params)
&& $active->params instanceof JRegistry) {
$pageclass = $active->params->get('pageclass_sfx', '');
}
?>
<body class="<?php echo !empty($pageclass) ? $pageclass : ''; ?>">
...
</body>

body.home {
font-size: 120%;
}
div.left-column {
width: 20%;
}
body.home div.left-column {
width: 40%;
}

<field name="templateStyle"
type="list"
default="style1"
label="Template Style"
description="Kies een stijl voor je template">
<option value="style1">Style1</option>
<option value="style2">Style2</option>
</field>
<?php
$params = JFactory::getApplication()->getTemplate(true)->params;
?>
<body class="<?php echo $params->get('templateStyle'); ?>">
body.style1 { ... }
body.style2 h3 { ... }

<body class="mediumFont highlightFirstWords">
...
</body>
body.smallFont {
font-size: .875em;
}
body.mediumFont {
font-size: 1em;
}
body.largeFont {
font-size: 1.25em;
}
$('body.highlightFirstWords h3').each(function() {
...
});

body {
z-index: 0;
}
@media (min-width:600px) {
body {
z-index: 1;
}
}
if ($('body').css('z-index') == '0') {
...
}
if ($('body').css('z-index') == '1') {
...
}

Modules
Componenten Categorieën
M
enu
item
s
Multi
level
Meer info: http://docs.joomla.org/Layout_Overrides_in_Joomla_2.5

Joomla! installation
components
com_content
views
article
tmpl
default.php

templates
[Your template]
html
com_content
article
default.php
views
tmpl

Website name
Home Item1 Item2 Item3 Contact
Proin sit amet justo interdum
nulla commodo dignissim.
Proin consequat neque vestibulum odio tristique sollicitudin. Ut
molestie ligula ipsum. Suspendisse feugiat quam ut elit mattis
laoreet. Praesent non mi tortor, cursus egestas odio. Aliquam
leo tellus, tincidunt vel pulvinar ac, facilisis eget odio.
Readmore

modules
mod_articles_category
tmpl
default.php

templates
[Your template]
html
default.php

templates
[Your template]
html
articleslider.php

<?php
$doc =& JFactory::getDocument();
$doc->addScript('...');
$doc->addStylesheet('...');
?>

<div class="articleslider">
...
<?php foreach ($list as [list or group]) : ?>
<li class="slider-item">
...
<p>
<?php $images = json_decode($item->images); ?>
<img src="<?php echo htmlspecialchars($images->image_intro); ?>">
</p>
...
</li>
<?php endforeach; ?>
...
</div>

Menu Item Alternatieve Weergave

dl.contact-address dt {
display: none;
}
dl.contact-address dd {
margin-left: 0;
}
.contact-form legend {
font-size: 1em;
margin-bottom: 0;
}
.contact-form fieldset .control-group:nth-child(6) {
display: none;
}
#jform_contact_message {
width:60%;
height:150px;
}

components
com_contact
views
contact
tmpl
default.php

templates
[Your template]
html
com_contact
userfriendly.php
contact

components
com_contact
views
contact
tmpl
default.xml

templates
[Your template]
html
com_contact
userfriendly.xml
contact

<layout title="COM_CONTACT_CONTACT_VIEW_DEFAULT_TITLE"
option="COM_CONTACT_CONTACT_VIEW_DEFAULT_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_CONTACT_SINGLE_CONTACT" />
<message>
<![CDATA[COM_CONTACT_CONTACT_VIEW_DEFAULT_DESC]]>
</message>
</layout>
<layout title="User Friendly Contact Form"
option="COM_CONTACT_CONTACT_VIEW_DEFAULT_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_CONTACT_SINGLE_CONTACT" />
<message>
Create a user friendly contact form
</message>
</layout>

...
<div class="span4">
<div class="well">
[contact info area] ...
</div>
<div class="well">
<p>You can use this form in case you:</p>
...
</div>
</div>
<div class="span8">
[contact form area] ...
<h3>Privacy policy</h3>
...
</div>
...

components
com_contact
views
contact
tmpl
default_address.php

templates
[Your template]
html
com_contact
userfriendly_address.php
contact

components
com_contact
views
contact
tmpl
default_form.php

templates
[Your template]
html
com_contact
userfriendly_form.php
contact

Ga eens met overrides spelen en oefenen
Probeer meer uit de core te halen
Laat de core met rust! (geen core-hacks)
Laat extensies niet altijd links liggen

Gebruik in je volgende website eens
maximaal 2 frontend extensies

@rhcpoort | @theme_partner | @tweepixels
www.themepartner.com | www.tweepixels.nl/academy
Time's up

Copyright image on first slide:
http://upload.wikimedia.org/wikipedia/commons/3/32/Terry_Evanswood.jpg

Slimme Joomla! Templating Tips en Truuks

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Slimme Joomla! Templating Tips en Truuks (20)

More from ThemePartner (8)

Recently uploaded (20)

Slimme Joomla! Templating Tips en Truuks

Editor's Notes