Joomla Day Austin Part 2


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • - “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

    1. 2. Slice & Dice HTML/CSS HTML/CSS <ul><li>- Create A Standard Web Page </li></ul><ul><li>- Copy & Paste HTML from Joomla Site Into Editor </li></ul><ul><li>- Style HTML Offline </li></ul><ul><li>- Finish CSS On Test Site </li></ul>
    2. 8. 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>
    3. 9. 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>
    4. 10. 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);}
    5. 11. 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 */}
    6. 12. 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:
    7. 14. 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-->
    8. 15. 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;}
    9. 16. Menu CSS /* Social Top Menu Links *//* THESE ITEM-IDS ARE SUBJECT TO CHANGE!!! */.item-12,.item-13,.item-14{ float: right;}
    10. 18. 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-->
    11. 20. Using Google Fonts @import url( ); #header .primary{ font-family: 'Lobster', cursive;}
    12. 21. 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;}
    13. 22. 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%;}
    14. 24. 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;}
    15. 25. 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 */}
    16. 26. 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%;}
    17. 27. 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%;}
    18. 28. 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>
    19. 29. 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;}
    20. 30. 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;}
    21. 31. 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;}
    22. 32. 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;}
    23. 33. Content Structure <ul><li><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> </li></ul><ul><ul><li></div></div> </li></ul></ul>
    24. 34. 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-->
    25. 35. 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;}