More Related Content What's hot (11)
PDF
Thinking about CSS Architecture
拓樹 谷
PPTX
Windows Presentation Foundation
cieszak
Viewers also liked (6)
PPT
Presentaci%c3%b3n%20 incas%20ingles[1]
adriana
PPT
What have you learned from your audience feedback
gueste28757a
More from Kyle Ledbetter (12) 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 8. Base HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="en-gb" lang="en -gb" dir="ltr" > <head> <me ta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/template.css" type="text/css" /> </head> <body id="site"> <div id="wrapper"> </div> </body></html> 9. Base Structure <div id="menu"> <div class="width"> </div> </div> <div id="header"> <div class="width"> </div> </div> <div id="main"> <div class="width"> </div> </div> <div id="footer"> <div class="width"> </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 14. Placeholder Markup <!--Begin Placeholder--> <ul class="menu"> <li class="item-1 active"> <a href="#">Home</a> </li> <li class="item-2"> <a href="#">Minis</a> </li> <li class="item-3"> <a href="#">Programs</a> </li> <li class="item-4"> <a href="#">Photos</a> </li> <li class="item-5"> <a href="#">Donate</a> </li> <li class="item-6"> <a href="#">Volunteers</a> </li> <li class="item-7"> <a href="#">Sponsors</a> </li> <li class="item-8"> <a href="#">Press</a> </li> <li class="item-9"> <a href="#">Testimonials</a> </li> <li class="item-10"> <a href="#">Contact</a> </li> <li class="item-11"> <a href="#">Sitemap</a> </li> <li class="item-12"> <a href="#">RSS</a> </li> <li class="item-13"> <a href="#">Facebook</a> </li> <li class="item-14"> <a href="#">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;} 18. Header Placeholder <!--Begin Placeholder--> <ul class="menu"> <li class="item-15"> <a href="#"> <!--These spans will require a template override--> <span class="primary">Meet</span><span class="secondary">the Minis</span> </a> </li> <li class="item-16"> <a href="#"> <span class="primary">View</span><span class="secondary">Photo Gallery</span> </a> </li> <li class="item-17"> <a href="#"> <span class="primary">Donate</span><span class="secondary">to our Cause</span> </a> </li> <li class="item-18"> <a href="#"> <span class="primary">Home</span> </a> </li> <li class="item-19"> <a href="#"> <span class="primary">Our</span><span class="secondary">Programs</span> </a> </li> <li class="item-20"> <a href="#"> <span class="primary">Become</span><span class="secondary">a Sponsor</span> </a> </li> <li class="item-21"> <a href="#"> <span class="primary">Schedule</span><span class="secondary">a Visit or Event</span> </a> </li> </ul> <!--End Placeholder--> 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%;} 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="footer"> <div class="width"> <div class="footer-modules"> <div class="width-50 ribbon-blue"> <h3>Follow Us</h3> </div> <div class="width-50 ribbon-red"> <h3>Newsletter</h3> </div> </div> <div class="footer-menu"> </div> <div class="footer-copyright"> <p>© 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="main"><div class="width"><div id="above"> </div><div id="inset"> </div><div id="content"> </div><div id="sidebar"> </div><div id="below"> </div> </div></div> 34. Placeholder Text <!--Begin Placeholder--> <div class="moduletable width-50 ribbon-red"> <h3>Minis Out, In The Community</h3> <!--Begin Placeholder--> <ul class="newsflash-vert"> <li class="newsflash-item"> <h4 class="newsflash-title"> <a href="#">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="newsflash-item"> <h4 class="newsflash-title"> <a href="#">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="newsflash-item"> <h4 class="newsflash-title"> <a href="#">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;} Editor's Notes #9: - “site” ID on body will be used to place body styles that won’t show in TinyMCE/JCE Editors #10: - class=”width” is to easily define one class with global width of site #11: - Simple CSS reset - Set our 960px width - Add our bg image to ONLY body tag w/ “site” ID #12: - min-height is just to test if bg images are working #13: - http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page #15: - we’ll yank out this later when it’s time to build the installable template #16: - combine styles to minimize code and duplications #17: - combine styles to minimize code and duplications #19: - we’ll need html template overrides for the spans - the Home link will be the logo #21: - make sure to include the fallback font #26: - we’re just moving 1 background image up vertically, which is negative pixels #27: - 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 
