Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer

TEMPLATING THE RIGHT WAY

by Jonathan Shroyer
Twitter: @learncss
Email: jonathan@corephp.com
by Jonathan Shroyer

DID YOU KNOW?

Tables are for tabular
data... not for layouts

PROPER HEADINGS

• H tags are possibly most important for SEOs

PROPER HEADINGS


• One H1 per page

PROPER HEADINGS


• One H1 per page

• Opening page H1 should be company name
and tagline/short description.

PROPER HEADINGS


• One H1 per page


• H1 tags on all inner pages should be article
title.

PROPER HEADINGS


• One H1 per page


• H1 tags on all inner pages should be article
title.

• NEVER skip a tag! (ie. H2 to H4)

LOGO CODE FOR YOUR
TEMPLATE

LOGO CODE FOR YOUR
TEMPLATE

if( JURI::current() == JURI::base() ) { ?>
<h1 id="company-logo">
<a href="<?php echo JURI::base(); ?>">
Company Name
</a>
</h1>

LOGO CODE FOR YOUR
TEMPLATE

} else {
<p id="company-logo">
<a href="<?php echo JURI::base(); ?>">
Company Name
</a>
</p>
}

HEADINGS INSIDE OF YOUR
TEMPLATE

TEMPLATE

• In your overrides you should use the same logic:
if( JURI::current() == JURI::base() ) {
$h = 2;
} else {
$h = 1;
}
<h<?php echo $h; ?>>Title</h<?php echo $h; ?>}

TEMPLATE

• In your overrides you should use the same logic:
$h = 2;
} else {
$h = 1;
}
<h<?php echo $h; ?>>Title</h<?php echo $h; ?>}

• Module titles are virtually always H2

IMAGES

• Use alt tags on images which you want people to
know what it is. (ie. If image wasn't there, would
the description add to the content?)

IMAGES

• Use alt tags on images which you want people to
know what it is. (ie. If image wasn't there, would
the description add to the content?)

• Learn how to size images properly and how to
compress them. Extra size slows down site and
can lower SEO value.

WHAT ABOUT HTML5?

• No SEO advantage at this time

WHAT ABOUT HTML5?


• Personally don’t recommend it as support is
less than HTML4.

WHAT ABOUT HTML5?


less than HTML4.

• Only use if you have a specific market that you
know has the capability to properly display it.

WHAT ABOUT HTML5?


less than HTML4.

• Only use if you have a specific market that you
know has the capability to properly display it.

• It’s a great movement, but it’s really still the
Wild Wild West.

LEARN THE JOOMLA LANGUAGE

• Why should you learn the Joomla! library for
template development?



• Allows you to do advanced logic with your
template.



• Allows you to do advanced logic with your
template.

• Gives you options you never had before


• JHTML


• JHTML

• link, image, iframe, date, tooltip, calendar, etc.


• JHTML


• Example:
$link = JHTML::_('image', 'images/stories/clock.jpg',
null);
echo $link;


• JHTML


• Example:
$link = JHTML::_('image', 'images/stories/clock.jpg',
null);
echo $link;

• http://api.joomla.org/__filesource/fsource_Joomla-
Framework_HTML_joomlahtmlhtml.php.html#a191

ADDING EXTERNAL
CSS STYLESHEETS (JOOMLA 1.6+)

ADDING EXTERNAL

• $doc = JFactory::getDocument();
$path = 'templates/' .
$this->template . '/css/mystylesheet.css';

$doc->addStyleSheet( $path,
, ‘text/css’, “screen, projection” );

ADDING EXTERNAL

• $doc = JFactory::getDocument();
$path = 'templates/' .
$this->template . '/css/mystylesheet.css';

$doc->addStyleSheet( $path,
, ‘text/css’, “screen, projection” );
• You can also use:
JHTML::stylesheet( $path,
array('media'=>'screen, projection' ) );

ADDING CSS STYLES
FOR ONLY IE

ADDING CSS STYLES
FOR ONLY IE

$stylelink = '' ."n";

$doc =& JFactory::getDocument();
$doc->addCustomTag($stylelink);

MAKE YOUR TEMPLATE
UPGRADABLE
In templateDetails.xml the opening is:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//
DTD template 1.0//EN" "http://
www.joomla.org/xml/dtd/1.6/template-
install.dtd">
<extension version="1.7" type="template"
client="site" method=”upgrade”>

SIZE BOX

grid_size boxes are used for width, height and overall
positioning of box.

SIZE BOX

grid_size boxes are used for width, height and overall
positioning of box.

.grid_size {
width: 100%;
height: auto;
float: left;
display: inline;
position: relative; }

STYLE BOX

grid_style boxes are used for padding, borders and
positioning of content within box.

STYLE BOX

grid_style boxes are used for padding, borders and
positioning of content within box.

.grid_style {
width: auto;
height: auto;
display: block;
top: 0;
left: 0;
clear: both; }

EXAMPLE BOX

<div class=”grid_size”>

EXAMPLE BOX

<div class=”grid_style”>

EXAMPLE BOX

CSS Box

EXAMPLE BOX

CSS Box
</div>

EXAMPLE BOX

CSS Box
</div>
</div>

GETTING CONTROL
OF YOUR TEMPLATE

ADD AS MANY VARIABLES AS
POSSIBLE TO BODY TAG CLASS

<?php
$body = '';
if( JRequest::getInt( 'Itemid' ) ) {
$body .= 'itemid-'.JRequest::getInt( 'Itemid' );
}
if( JRequest::getInt( 'id' ) ) {
$body .= ' id-'.JRequest::getInt( 'id' );
}
if( JRequest::getVar( 'task' ) ) {
$body .= ' task-'.JRequest::getVar( 'task' );
}

if( JRequest::getVar( 'view' ) ) {
$body .= ' view-'.JRequest::getVar( 'view' );
}
if( JRequest::getVar( 'layout' ) ) {
$body .= ' layout-'.JRequest::getVar( 'layout' );
}
if( JRequest::getVar( 'option' ) ) {
$body .= ' option-'.JRequest::getVar( 'option' );
}


$body .= ' lang-' . $this->language;
$body .= ' direction-' . $this->direction;
$body .= ' frontpage’;
}

Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer

global $mainframe;
$menu = @$mainframe->getMenu();
$active = @$menu->getActive();
while ( $active->parent > 0 ) {
$parent = $menu->getItem(
$active->parent );
if ( 0 == $parent->parent ) {
$top_level = $parent;
break;
} else {
$active = $parent;
}
}
$body .= ' menu_parent-' . $active->id;

$user =& JFactory::getUser();
$userGroups = $user->groups;
foreach($userGroups as $key => $value){
$replace = array(".", " ");
$body .= ' group-' .
strtolower( str_replace( $replace, '_', $key ) );
}

HOW THE VARIABLES OUTPUT

<body class=”<?php echo $body; ?>”>

Outputs:
<body class=”itemid-257 id-6 view-article option-
com_content lang-en-gb direction-ltr frontpage
menu_parent-1 group-super_users”>

HOW WOULD YOU USE THE
MENU_PARENT CODE?

HOW WOULD YOU USE THE
MENU_PARENT CODE?

In the CSS you could use it to change the
sidebar color for each parent menu and inherit
into each child.

.menu_parent-1 #sidebar {
background: #ccc;
}

You can stack body classes safely:
.view-article.menu_parent-1 #sidebar

LOAD DYNAMIC CSS
INTO THE HEAD

LOAD DYNAMIC CSS
INTO THE HEAD

Don’t create external php css files. Instead
do this...

LOAD DYNAMIC CSS
INTO THE HEAD

Don’t create external php css files. Instead
do this...
$doc =& JFactory::getDocument();
$style = 'BODY {'
. 'background: #00ff00;'
. 'color: rgb(0,0,255);'
. '}';
$doc->addStyleDeclaration( $style );

A FEW NOTES ABOUT
CREATING JOOMLA!
1.7+ TEMPLATES

CREATING A NEW TEMPLATE

• Templates will not show up in Template
Manager without being installed

CREATING A NEW TEMPLATE

• Templates will not show up in Template
Manager without being installed
• Clicking Discover in Extension Manager
will make templates show in Templates tab
in Template Manager, but not in Styles

SETTING/REMOVING SCRIPTS

Add this above your DOCTYPE


• JHtml::_('behavior.framework', false);


• FALSE = just mootools core (89KB)


• TRUE = mootools-core + mootools-more (89KB +
238KB = 327KB!)


238KB = 327KB!)
To remove all scripts:


238KB = 327KB!)
• $doc =& JFactory::getDocument();
$doc->_scripts = array();


238KB = 327KB!)
• $doc =& JFactory::getDocument();
$doc->_scripts = array();
This is not recommended!

REMOVING MOOTOOLS IN 1.7

$user =& JFactory::getUser();
if ( $user->get( 'guest' ) == 1 ) {
$document =& JFactory::getDocument();
$headerstuff = $document->getHeadData();
reset($headerstuff['scripts']);
foreach ($headerstuff['scripts'] as $key=>$value){
if (substr_count($key, 'mootools') > 0)
unset($headerstuff['scripts'][$key]);
}
$document->setHeadData( $headerstuff );
}

MAKE IT SMALLER...
AND FASTER!

KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE

UP YOUR TEMPLATE
• Optimize your images

UP YOUR TEMPLATE

• Make sprites with your images

UP YOUR TEMPLATE


• Combine CSS and JavaScript into one file for
each

UP YOUR TEMPLATE


each

• Don't use "on the fly" compression plugins

UP YOUR TEMPLATE


each

• Don't use "on the fly" compression plugins

• If you use a CSS and/or JavaScript compression
plugin then make sure it stores it somehow
instead of compressing on each load.

UP YOUR TEMPLATE

• Use a CDN for your template resources

UP YOUR TEMPLATE

• Use a CDN for your template resources

• If possible, remove calls in component or
modules for library’s if they are already used so
you don’t have them loading twice.

EXTENSIONS WE USE FOR
DEVELOPMENT

DEVELOPMENT

• Advanced Module Manager (www.nonumber.nl)

DEVELOPMENT


• CSS3 Automated Generator (www.corephp.com)

DEVELOPMENT



• JCE (www.joomlacontenteditor.net/)

DEVELOPMENT



• JCE (www.joomlacontenteditor.net/)

• Mass Content (www.baticore.com)

ADVANCED MODULE
MANAGER CODE

How to assign to only articles:

ADVANCED MODULE
MANAGER CODE

How to assign to only articles:

• $view = 'article';
/* --- DO NOT EDIT BELOW --- */
if ( JRequest::getCmd( 'view' ) == $view ) {
$pass = 1;
} else {
$pass = 0;
}
return $pass;

ADVANCED MODULE
MANAGER CODE

How to assign to Wordpress homepage:

ADVANCED MODULE
MANAGER CODE

How to assign to Wordpress homepage:

• if ( defined( 'ABSPATH' ) && is_home() ) {
$pass = 1;
} else {
$pass = 0;
}
return $pass;

ADVANCED MODULE
MANAGER CODE

How to assign to Wordpress single blog:

ADVANCED MODULE
MANAGER CODE

How to assign to Wordpress single blog:

• if ( is_single() ) {
$pass = 1;
} else {
$pass = 0;
}
return $pass;

AUTOMATED CSS3
GENERATOR

Automatically creates many cross-browser CSS3
styles for you.

AUTOMATED CSS3
GENERATOR

styles for you.

• Dropshadow, Text Shadow, Rounded Corners,
Opacity, Gradient, RGBA, Rotate, Border Image

AUTOMATED CSS3
GENERATOR

styles for you.

• Dropshadow, Text Shadow, Rounded Corners,
Opacity, Gradient, RGBA, Rotate, Border Image

• Rounded Corner Example:
.rounded {topleft_radius:8, topright_radius:8,
bottomright_radius:8, bottomleft_radius:8,
support_ie:yes};

MASS CONTENT

Mass Content allows you to enter several
articles, categories, tags, etc. at once, including
assigning to menu item.

Q&A
“If we would have new
knowledge, we must get a
whole world of new
questions.”
- Susanne K. Langer

Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer

Related slideshows

More Related Content

Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer

Editor's Notes