Joomla Day Austin Part 2
Upcoming SlideShare
Loading in...5

Joomla Day Austin Part 2






Total Views
Views on SlideShare
Embed Views



2 Embeds 223 199 24



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • - “site” ID on body will be used to place body styles that won’t show in TinyMCE/JCE Editors
  • - class=”width” is to easily define one class with global width of site
  • - Simple CSS reset - Set our 960px width - Add our bg image to ONLY body tag w/ “site” ID
  • - min-height is just to test if bg images are working
  • -
  • - we’ll yank out this later when it’s time to build the installable template
  • - combine styles to minimize code and duplications
  • - combine styles to minimize code and duplications
  • - we’ll need html template overrides for the spans - the Home link will be the logo
  • - make sure to include the fallback font
  • - we’re just moving 1 background image up vertically, which is negative pixels
  • - you can use a full-blow CSS Grid system instead - these CSS classes can easily be added either manually in template, or as module class suffixes

Joomla Day Austin Part 2 Joomla Day Austin Part 2 Presentation Transcript

  • Slice & Dice HTML/CSS HTML/CSS
    • - Create A Standard Web Page
    • - Copy & Paste HTML from Joomla Site Into Editor
    • - Style HTML Offline
    • - Finish CSS On Test Site
  • Base HTML <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; &quot;><html xmlns=&quot; &quot; xml:lang=&quot;en-gb&quot; lang=&quot;en -gb&quot; dir=&quot;ltr&quot; > <head> <me ta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /> <link rel=&quot;stylesheet&quot; href=&quot;css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;site&quot;> <div id=&quot;wrapper&quot;> </div> </body></html>
  • Base Structure <div id=&quot;menu&quot;> <div class=&quot;width&quot;> </div> </div> <div id=&quot;header&quot;> <div class=&quot;width&quot;> </div> </div> <div id=&quot;main&quot;> <div class=&quot;width&quot;> </div> </div> <div id=&quot;footer&quot;> <div class=&quot;width&quot;> </div> </div>
  • Template.css /* CSS Reset */body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0;}/* Layout */.width { width: 960px; margin: 0 auto; /* Center divs */}/* Theme */body#site{ background: #FFF url(../images/bg.jpg);}
  • Background Images #menu{ background:#162440 url(../images/menu.jpg) repeat-x 0 100%; min-height: 37px; /* Just for testing */}#header{ background: url(../images/header.png) repeat-x; min-height: 139px; /* Just for testing */}#main{ min-height: 300px; /* Just for testing */}#footer{ background: url(../images/footer.png) repeat-x; min-height: 340px; /* Just for testing */}
  • Absolute Bottom Footer /* Absolute Bottom Footer */html,body { height:100%;}#wrapper { height: 100%; /* Old browsers */ min-height:100%; position:relative;}#main { padding-bottom:340px; /* Height of the footer */}#footer { position:absolute; bottom:0; width:100%; height:340px; /* Height of the footer */} credit:
  • Placeholder Markup <!--Begin Placeholder--> <ul class=&quot;menu&quot;> <li class=&quot;item-1 active&quot;> <a href=&quot;#&quot;>Home</a> </li> <li class=&quot;item-2&quot;> <a href=&quot;#&quot;>Minis</a> </li> <li class=&quot;item-3&quot;> <a href=&quot;#&quot;>Programs</a> </li> <li class=&quot;item-4&quot;> <a href=&quot;#&quot;>Photos</a> </li> <li class=&quot;item-5&quot;> <a href=&quot;#&quot;>Donate</a> </li> <li class=&quot;item-6&quot;> <a href=&quot;#&quot;>Volunteers</a> </li> <li class=&quot;item-7&quot;> <a href=&quot;#&quot;>Sponsors</a> </li> <li class=&quot;item-8&quot;> <a href=&quot;#&quot;>Press</a> </li> <li class=&quot;item-9&quot;> <a href=&quot;#&quot;>Testimonials</a> </li> <li class=&quot;item-10&quot;> <a href=&quot;#&quot;>Contact</a> </li> <li class=&quot;item-11&quot;> <a href=&quot;#&quot;>Sitemap</a> </li> <li class=&quot;item-12&quot;> <a href=&quot;#&quot;>RSS</a> </li> <li class=&quot;item-13&quot;> <a href=&quot;#&quot;>Facebook</a> </li> <li class=&quot;item-14&quot;> <a href=&quot;#&quot;>Twitter</a> </li> </ul> <!--End Placeholder-->
  • Menu CSS /* Menus */#menu ul,#header ul,#footer ul{ list-style: none;}#menu li,#header li,#footer li{ display: inline;}#menu ul a,#header ul a,#footer ul a{ color: #FFF; text-shadow: 1px 1px 1px #000; text-decoration: none;}#menu ul,#footer ul{ line-height: 36px;}#menu ul a,#footer ul a{ padding: 4px;}
  • Menu CSS /* Social Top Menu Links *//* THESE ITEM-IDS ARE SUBJECT TO CHANGE!!! */.item-12,.item-13,.item-14{ float: right;}
  • Header Placeholder <!--Begin Placeholder--> <ul class=&quot;menu&quot;> <li class=&quot;item-15&quot;> <a href=&quot;#&quot;> <!--These spans will require a template override--> <span class=&quot;primary&quot;>Meet</span><span class=&quot;secondary&quot;>the Minis</span> </a> </li> <li class=&quot;item-16&quot;> <a href=&quot;#&quot;> <span class=&quot;primary&quot;>View</span><span class=&quot;secondary&quot;>Photo Gallery</span> </a> </li> <li class=&quot;item-17&quot;> <a href=&quot;#&quot;> <span class=&quot;primary&quot;>Donate</span><span class=&quot;secondary&quot;>to our Cause</span> </a> </li> <li class=&quot;item-18&quot;> <a href=&quot;#&quot;> <span class=&quot;primary&quot;>Home</span> </a> </li> <li class=&quot;item-19&quot;> <a href=&quot;#&quot;> <span class=&quot;primary&quot;>Our</span><span class=&quot;secondary&quot;>Programs</span> </a> </li> <li class=&quot;item-20&quot;> <a href=&quot;#&quot;> <span class=&quot;primary&quot;>Become</span><span class=&quot;secondary&quot;>a Sponsor</span> </a> </li> <li class=&quot;item-21&quot;> <a href=&quot;#&quot;> <span class=&quot;primary&quot;>Schedule</span><span class=&quot;secondary&quot;>a Visit or Event</span> </a> </li> </ul> <!--End Placeholder-->
  • Using Google Fonts @import url( ); #header .primary{ font-family: 'Lobster', cursive;}
  • Header Menu CSS #header li{ float: left;}#header li a{ padding: 20px 20px; float: left;}#header span{ display: block;}#header .primary{ font-family: 'Lobster', cursive; font-size: 30px; color: #CE6165;}#header .secondary{ font-family: times, sans-serif; font-style: italic; font-size: 18px;}
  • Logo CSS /* Logo *//* THIS ITEM-ID IS SUBJECT TO CHANGE!!! */#header li.item-18 a{ padding: 10px 14px; text-indent: -9999px; /* Hiding the text */ width: 157px; height: 93px; background: url(../images/logo.png) no-repeat 50% 50%;}
  • Social Sprite CSS /* Social Top Menu Links *//* THESE ITEM-IDS ARE SUBJECT TO CHANGE!!! */.item-12,.item-13,.item-14{ float: right;}.item-12 a,.item-13 a,.item-14 a{ float: right; width: 28px; height: 28px; text-indent: -9999px; /* Hiding the text */ background: url(../images/social-28.png) no-repeat 0 5px;}
  • Social Sprite CSS .item-12 a{ background: url(../images/social-28.png) no-repeat 0 -62px; /* RSS */}.item-13 a{ background: url(../images/social-28.png) no-repeat 0 -29px; /* Facebook */}
  • Simple % Widths /* Simple Width Layout */.width-30,.width-40,.width-50,.width-60,.width-70{ display: inline; float: left; margin-left: 5px; margin-right: 5px;}.width-30{ width: 29%;}.width-40{ width: 39%;}.width-50{ width: 49%;}.width-60{ width: 59%;}.width-70{ width: 69%;}
  • Heading Ribbon BGs /* Module Headings */.ribbon-blue h3,.ribbon-red h3{ display: block; text-align: center; font-family: 'Lobster', cursive; font-size: 30px; color: #FFF; text-shadow: 1px 1px 1px #000; padding: 5px 0 20px 0;}.ribbon-blue h3{ background: url(../images/ribbon-blue-935.png) no-repeat 50% 50%;}.width-50.ribbon-blue h3{ background: url(../images/ribbon-blue-446.png) no-repeat 50% 50%;}.ribbon-red h3{ background: url(../images/ribbon-red-935.png) no-repeat 50% 50%;}.width-50.ribbon-red h3{ background: url(../images/ribbon-red-446.png) no-repeat 50% 50%;}
  • Footer Markup <div id=&quot;footer&quot;> <div class=&quot;width&quot;> <div class=&quot;footer-modules&quot;> <div class=&quot;width-50 ribbon-blue&quot;> <h3>Follow Us</h3> </div> <div class=&quot;width-50 ribbon-red&quot;> <h3>Newsletter</h3> </div> </div> <div class=&quot;footer-menu&quot;> </div> <div class=&quot;footer-copyright&quot;> <p>&copy; 2011 Minis and Friends. All rights reserved.</p> </div> </div> </div>
  • Additional Footer Styles /* Footer */#footer { padding: 40px 0 10px 0;}.footer-menu,.footer-copyright{ text-align: center; margin: 10px 0;}.footer-menu-1{ border-top: 1px solid #14223E; border-bottom: 1px solid #5B7FE5;}.footer-menu-2{ border-top: 1px solid #5B7FE5; border-bottom: 1px solid #14223E;}
  • Footer Social Styles @import url(|Neuton); /* Social Footer Links */.footer-social li,.footer-social li a{ display: block; font-family: 'Neuton', Times, serif; font-size: 30px; float: none;}#footer ul li.footer-facebook a,#footer ul li.footer-twitter a{ padding: 10px 0 10px 80px; margin: 10px 0 10px 50px; background: url(../images/social-62.png) no-repeat 0 0;}#footer ul li.footer-twitter a{ background: url(../images/social-62.png) no-repeat 0 -70px;}
  • Form Styles /* Forms */.inputbox{ font-size: 16px; padding: 5px; border: 1px solid #CCC; -moz-box-shadow: 2px 2px 2px #EEE inset; -webkit-box-shadow: 2px 2px 2px #EEE inset; box-shadow: 2px 2px 2px #EEE inset; margin: 0 0 14px 10px; width: 83%;}label{ font-family: 'Neuton', Times, serif; font-size: 18px; width: 14%;}.button{ margin: 0 auto; font-size: 18px; padding: 6px 60px; color: #FFF; text-shadow: 1px 1px 1px #000; background-color: #C03034; border: 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow: 1px 2px 3px #999; -webkit-box-shadow: 1px 2px 3px #999; box-shadow: 1px 2px 3px #999;}.button:hover{ cursor: pointer;}
  • Footer Form /* Footer Forms */#footer form{ padding: 20px;}#footer .inputbox{ border: 1px solid #1C2A47;}#footer .button{ background-color: #162440; -moz-box-shadow: 1px 2px 3px #111; -webkit-box-shadow: 1px 2px 3px #111; box-shadow: 1px 2px 3px #111;}#footer .button:hover{ background-color: #1C2F53;}#footer .button:active{ background-color: #162440; -moz-box-shadow: -1px 0 1px #111, 0 1px 0 #5B7FE5; -webkit-box-shadow: -1px 0 1px #111, 0 1px 0 #5B7FE5; box-shadow: -1px 0 1px #111, 0 1px 0 #5B7FE5;}.form-submit{ text-align: center;}
  • Content Structure
    • <div id=&quot;main&quot;><div class=&quot;width&quot;><div id=&quot;above&quot;> </div><div id=&quot;inset&quot;> </div><div id=&quot;content&quot;> </div><div id=&quot;sidebar&quot;> </div><div id=&quot;below&quot;> </div>
      • </div></div>
  • Placeholder Text <!--Begin Placeholder--> <div class=&quot;moduletable width-50 ribbon-red&quot;> <h3>Minis Out, In The Community</h3> <!--Begin Placeholder--> <ul class=&quot;newsflash-vert&quot;> <li class=&quot;newsflash-item&quot;> <h4 class=&quot;newsflash-title&quot;> <a href=&quot;#&quot;>September 24</a> </h4> <p>Children’s Health & Safety Fair - Leander Ladies Auxillary VFW Post 10427 - 10am - 2pm. Come meet the little horses and donkies at our 3rd year return to the Children’s Health & Safety Fair!</p> </li> <li class=&quot;newsflash-item&quot;> <h4 class=&quot;newsflash-title&quot;> <a href=&quot;#&quot;>October 1</a> </h4> <p>2011 Round Rock Chalk Walk - 10am to 6pm - meet the minis and watch as Lewis creates a painting masterpiece which will be raffled off after drying. Will be a fun day with lots of creative chalk walk painting.</p> </li> <li class=&quot;newsflash-item&quot;> <h4 class=&quot;newsflash-title&quot;> <a href=&quot;#&quot;>October 8</a> </h4> <p>BlueBonnet Horse Festival - 9am-4pm - we’ll be back for our 4th year of supporting this wonderful Horse Rescue Non-Profit. Fabulous silent auction - we give a mini basket of goodies and a free visit by Minis and Friends. Come bid on this and support this very important organization! </p> </li> </ul> <!--End Placeholder-->
  • Joomla-Specific CSS /* Joomla Styles *//* Newsflash Module */.newsflash img{ padding: 4px; background: #FFF; -moz-box-shadow: 0 2px 3px #AAA; -webkit-box-shadow: 0 2px 3px #AAA; box-shadow: 0 2px 3px #AAA; max-width: 250px; height: auto; margin: 5px 15px 15px 5px;}/* Horizontal Newsflash Layout */.newsflash-horiz{ list-style: none; margin: 10px 0;}.newsflash-horiz li{ display: block; float: left; margin: 0 5px; width: 31%;}/* Vertical Newsflash Layout */.newsflash-vert{ list-style: none; margin: 10px 0; border-top: 1px solid #B0B0B0; border-bottom: 1px solid #FFF;}.newsflash-vert li{ border-top: 1px solid #FFF; border-bottom: 1px solid #B0B0B0; padding: 5px;}.newsflash-vert li h4{ font-family: 'Neuton', Times, serif;}.newsflash-vert li h4 a{ color: #15243F;}