Tweaking your Template: Joomla Day Boston 2014 Barb Ackemann
Post on 13-Dec-2014
1430 Views
Preview:
DESCRIPTION
Transcript
Tweaking your Favorite Template
Barb AckemannIrisLines.com
…getting more handles to hang your styles on.
Joomla Day Boston 2014
You don’t have to know anything….
(and this is a good thing?)
What about those of us who do know something?
This workshop is for US!
It’s all about the handles….
•We know how to write CSS styles for particular selectors.•Different templates give us different handles.•We have to examine what our chosen template gives us to work with.
It’s all about the handles….• Beez3: <body id=“shadow”> and <article class=“item-page”>
• Protostar: <body class=“site com_content view-article no-layout no-task itemid-266”> and <div class=“item-page”>
• OneWeb: <body class=“sub-page com_content view-article itemid-266”>
• Master from YooTheme: <body id=“page” class=“page isblog data-config=‘{“twitter”:0, “plusone”:0, “facebook”:0}’>
• Master2 from YooTheme: <body class=“tm-isblog”>
Joomla lets us….
• Add a page class suffix when we create a menu item.
But…• You have to remember to do it.
• You can’t do it with the NoNumber AddtoMenu plugin.
• Your theme might not even use it!
Page Class Suffix “contentx”• Beez3: <body id=“shadow”> and <article class=“item-page”>
<body id=“shadow”> and <article class=“item-pagecontentx”> or <body id=“shadow”> and <article class=“item-page contentx”>
• Protostar: <body class=“site com_content view-article no-layout no-task itemid-266”> and <div class=“item-page”> <div class=“item-pagecontentx”> or <div class=“item-page contentx”>
• OneWeb: <body class=“sub-page com_content view-article itemid-266”> NO USE OF PAGE CLASS SUFFIX AT ALL!
• Master from YooTheme: <body id=“page” class=“page isblog data-config=‘{“twitter”:0, “plusone”:0, “facebook”:0}’> <body id=“page” class=“page isblog contentx data-config=‘{“twitter”:0, “plusone”:0, “facebook”:0}’>
• Master2 from YooTheme: <body class=“tm-isblog”> <body class=“tm-isblog contentx”>
I have lots styles…. but I want to hang different styles on different pages.
Joomla lets us….
• Use more than one template.
• Create multiple variations or styles for templates.
• Assign different templates or styles to different pages.
Barb Ackemann
IrisLines.com
Joomla lets us….
• Use more than one template.
• Create multiple variations or styles for templates.
• Assign different templates or styles to different pages.
But…• You have to remember to make that assignment.
• You can’t make that assignment with the NoNumber AddtoMenu plugin.
So…
• Let’s add a little magic code to “crawl up the menu” and give us a “handle” based on the top level of the menu structure.
• The proverbial
Sky Hook!
Imagine having a class for each section of your site…
A complicated site structure….
• Use more than one template.
• Create multiple variations or styles for templates.
• Assign different templates or styles to different pages.
..that knows where it came from!
• Use more than one template.
• Create multiple variations or styles for templates.
• Assign different templates or styles to different pages.
Just 4 lines of code….
1. $menu = JFactory::getApplication ()->getMenu();
2. $active = $menu->getActive();
3. $top = $active ? $menu->getItem($active->tree[0]) : null;
4. class=“<?php echo $top->alias; ?>”
It’s all about the handles….• Beez3: <body id=“shadow” class=“using-joomla”>
• Protostar: <body class=“site com_content view-article no-layout no-task itemid-266 using-joomla”>
• OneWeb: <body class=“sub-page com_content view-article itemid-266 using-joomla”>
• Master from YooTheme: <body id=“page” class=“page isblog using-joomla” data-config=‘{“twitter”:0, “plusone”:0, “facebook”:0}’>
• Master2 from YooTheme: <body class=“tm-isblog using-joomla”>
One other idea….• Joomla creates a variable $sitehome
• We can harness this if we add this bit of logic in the php block at the top of our index.php:
$activeMenu = & JSite::getMenu();if ($activeMenu->getActive() == $activeMenu->getDefault()) {$siteHome = 'home';}else{$siteHome = 'sub';}
• We can now check the value of $siteHome, and when it is =“sub” we can add in a module position, or hardcoded div to which we can apply a different background image for each section of the site!
Code in place for library site..• No modules need to be created or maintained.
• No modules need to be assigned to new pages as they are added to the site.
• Each section of the site loads a different background image for that banner area.
In the template index.php file:<?php if ($siteHome == 'sub') : ?> <div id="section-banner"> </div> <?php endif; ?>
In the stylesheet:.borrow #section-banner { background-image: url(/../images/section-banners/borrow.jpg); }
.search #section-banner { background-image: url(/../images/section-banners/reference.jpg); }
Etc.
For More Information
Barb Ackemann
IrisLines.com
barb@irislines.com
top related