slimme joomla! templating tips en truuks
Post on 19-Nov-2014
618 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Joomla! installation
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
Joomla! installation
modules
mod_articles_category
tmpl
default.php
Joomla! installation
templates
[Your template]
html
mod_articles_category
default.php
Joomla! installation
templates
[Your template]
html
mod_articles_category
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;
}
Joomla! installation
components
com_contact
views
contact
tmpl
default.php
Joomla! installation
templates
[Your template]
html
com_contact
userfriendly.php
contact
Joomla! installation
components
com_contact
views
contact
tmpl
default.xml
Joomla! installation
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>
...
Joomla! installation
components
com_contact
views
contact
tmpl
default_address.php
Joomla! installation
templates
[Your template]
html
com_contact
userfriendly_address.php
contact
Joomla! installation
components
com_contact
views
contact
tmpl
default_form.php
Joomla! installation
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
top related