slimme joomla! templating tips en truuks

Slimme Joomla! Templating Tips en Truuks

Robin Poort (@rhcpoort)

JD13NL, Zeist, april 2013

Tweepixels.nl/Academytrainer | Joomla!

ThemePartner.comdesign / development

Templates

index.php

Module alternatieve weergave

Menu item alternatieve weergave

Onveilig

Index.php

Pageclass als body class

<?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') {

...

}

Alternatieveweergaven

ModulesComponenten Categorieën

Menu itemsMulti

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

Module Alternatieve Weergave

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>

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

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

Vragen?

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

Technology