Tweaking your Template: Joomla Day Boston 2014 Barb Ackemann
•Download as PPTX, PDF•
2 likes•4,208 views
Presentation at Joomla Day Boston, March 15, 2014
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Tweaking your Template: Joomla Day Boston 2014 Barb Ackemann
Similar to Tweaking your Template: Joomla Day Boston 2014 Barb Ackemann (20)
Recently uploaded
Recently uploaded (20)
Tweaking your Template: Joomla Day Boston 2014 Barb Ackemann
- 1. Tweaking your Favorite Template Barb Ackemann IrisLines.com …gettingmorehandlestohangyourstyleson. Joomla Day Boston 2014
- 2. 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!
- 3. 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.
- 5. 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”>
- 6. 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!
- 7. 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”>
- 8. I have lots styles…. but I want to hang different styles on different pages.
- 9. 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
- 10. 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.
- 11. 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!
- 12. Imagine having a class for each section of your site…
- 13. A complicated site structure…. • Use more than one template. • Create multiple variations or styles for templates. • Assign different templates or styles to different pages.
- 14. ..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.
- 15. 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; ?>”
- 17. 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”>
- 19. 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!
- 20. 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.
- 21. For More Information Barb Ackemann IrisLines.com barb@irislines.com
Editor's Notes
- Play the slide show for this presentation to listen to the audio commentary by Peter Walsh and view slide timings. Or, click the sound icon on a slide for controls that you can use to hear the audio at your own pace.A little organization will go a long way to enhancing your PowerPoint presentation. Your title slide should be catching and relevant to your audience – offer something in the title that your audience wants. Keep some basic principles in mind:Your slides should complement what you have to say, not say it for you. Keep slides direct and to the point - less is more!Choose a background color or design that enhances and complements your presentation rather than competes with it. Don’t get too fancy - a simple font, elegant color scheme and clear message is more important than lots of information (clutter!) on the slide.Keep it simple! The purpose of the PowerPoint slide is to keep the mind of your audience focused – fewer words are better. Note: You understand that Microsoft does not endorse or control the content provided in the following presentation.
- Have a summary slide of your presentation – state it succinctly in a way that wraps your presentation.Use the ‘Fade in and dim’ animation – this keeps focus on the major summary heading but still allows you to talk about summary points.Three important steps in wrapping your presentation: Thank your audience for taking part in the presentation. Call for questions, making it clear how many questions you’ll take or how long question time will last. Encourage the audience to take what they’ve learned in the presentation and apply it to their situation directly.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Demo examining the code that different templates produce
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Be sure that major headings are always in the same font, size and color – this provides your audience with a visual cue to where they are in the presentation.Organize your thoughts before you start preparing your slides – too much mental clutter is as bad for your presentation as too much clutter on your slides. Use the Animation Schemes to add interest – here the ‘Fade’ entrance animation is used to gradually reveal content.Clarity is what your audience needs here so keep your message clear and focused.Keep your major slides brief – the slides are meant to summarize what you’re saying, not contain all your information.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Demo adding the code to each template -- Demo viewing page, and viewing code.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Demo http://www.pca.state.mn.us/Demo http://brookslibraryvt.org/
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- Consider sub-headings that provide an emotional or action-oriented aspect to your presentation – these can be very motivating to an audience.
- If you’re presenting to an audience, the final slide should include:Your contact information.Publications relevant to your presentation and of interest to the audience.Other relevant information for the audience to follow up if interested.Keep this slide on screen while the audience disperses.