Joomla Day Austin Part 2

Slice & DiceHTML/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 "-//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><meta 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>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/1999/xhtml

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>

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

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Placeholder Markup

<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>


href="#">Photos</a></li>


href="#">Donate</a></li>


href="#">Volunteers</a></li>


href="#">Sponsors</a></li>


href="#">Press</a></li>


href="#">Testimonials</a></li>


href="#">Contact</a></li>


href="#">Sitemap</a></li>


href="#">RSS</a></li> <li

class="item-13"><a

href="#">Facebook</a></li>


href="#">Twitter</a></li>

</ul> 

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

<ul class="menu"><li class="item-15">

<a href="#"><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>


<span class="primary">Donate</span><span class="secondary">to our Cause</span>

</a></li>


<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>


<span class="primary">Become</span><span class="secondary">a Sponsor</span>

</a></li>


<span class="primary">Schedule</span><span class="secondary">a Visit or Event</span>

</a></li>

</ul> 

Using Google Fonts

@import url(http://fonts.googleapis.com/css?family=Lobster);

#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="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>

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(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;}

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="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>

Placeholder Text

<div class="moduletable width-50

ribbon-red"><h3>Minis Out, In The Community</h3>

 <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>



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;}

Technology

Joomla Day Austin Part 2