Clever Joomla! Templating Tips and Tricks

Clever Joomla! Templating
Tips and Tricks
Robin Poort (@rhcpoort)
JAB13, Noordwijkerhout, june 2013

Robin Poort
ThemePartner.com
design / development

Templates
index.php
Module Alternative Layouts
Menu Item Alternative layouts

<?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%;
}
body.list ul li {
display: block;
margin: 0 0 1em 0;
border-bottom: 1px solid #ccc;
}

TemplateDetails.xml
<field name="templateStyle"
type="list"
default="style1"
label="Template Style"
description="Choose a style">
<option value="style1">Style1</option>
<option value="style2">Style2</option>
</field>

index.php
<?php
$params = JFactory::getApplication()->getTemplate(true)->params;
?>
<body class="<?php echo $params->get('templateStyle'); ?>">
template.css
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
Components Categories
M
enu
Item
s
Multi
level
More 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>

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

Have a try using overrides
Try to get more out of the Joomla! core
But leave the core alone! (no core-hacks)
Don't always ignore extenions

Use a maximum of 2 frontend
extensions on your next project!

@rhcpoort | @theme_partner
www.robinpoort.com | www.themepartner.com
Time's up

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

Clever Joomla! Templating Tips and Tricks

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Clever Joomla! Templating Tips and Tricks

Similaire à Clever Joomla! Templating Tips and Tricks (20)

Plus de ThemePartner

Plus de ThemePartner (8)

Dernier

Dernier (20)

Clever Joomla! Templating Tips and Tricks

Notes de l'éditeur