Your SlideShare is downloading. ×
  • Like
Joomla Day Austin Part 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Joomla Day Austin Part 2

  • 1,122 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,122
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
28
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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
  • - http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
  • - 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

Transcript

  • 1.  
  • 2. 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
  • 3.  
  • 4.  
  • 5.  
  • 6.  
  • 7.  
  • 8. Base HTML <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &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>
  • 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>
  • 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);}
  • 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 */}
  • 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: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
  • 13.  
  • 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-->
  • 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;}
  • 16. Menu CSS /* Social Top Menu Links *//* THESE ITEM-IDS ARE SUBJECT TO CHANGE!!! */.item-12,.item-13,.item-14{ float: right;}
  • 17.  
  • 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-->
  • 19.  
  • 20. Using Google Fonts @import url( http://fonts.googleapis.com/css?family=Lobster ); #header .primary{ font-family: 'Lobster', cursive;}
  • 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;}
  • 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%;}
  • 23.  
  • 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;}
  • 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 */}
  • 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%;}
  • 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%;}
  • 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>
  • 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;}
  • 30. Footer Social Styles @import url(http://fonts.googleapis.com/css?family=Lobster|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;}
  • 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;}
  • 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;}
  • 33. 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>
  • 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-->
  • 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;}
  • 36.