softenedcells
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU"> <head> <title>Softened Cells</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <style type='text/css'> /*************************************************** AUTHOR: Pat Heard ( FullAhead.org ) TEMPLATE: Softened Cells DATE: 2005.08.26 USE: Free use as long as this notice is kept in place. If you would like to remove it, please contact me at http://fullahead.org/contact.html. ***************************************************/ /*************************************************** HTML Element Styles ***************************************************/ body { margin: 20px; text-align: center; font-family: verdana, arial, sans-serif; font-size: 0.62em; color: #666; background-color: #EEE; } h1 { clear: both; padding: 5px 0 12px 10px; margin: 0; font-size: 2em; font-weight: normal; letter-spacing: -1.5px; } #text h1 { background: url(softenedcells-images/h1_bg.jpg) no-repeat bottom center; } h2 { clear: both; padding: 0 0 0 5px; margin: 0 0 -10px 0; font-size: 1.0em; font-weight: normal; text-transform: uppercase; color: #BE0000; } p { line-height: 20px; padding: 8px 0 8px 5px; margin: 5px 0 5px 0; } p:first-letter { font-size: 1.2em; } #news p { padding: 8px; } a { color: #BE0000; } a:hover { color: #111; background-color: #DDD; } #news a:hover, #footer a:hover { background-color: #CCC; } ul, ol { padding-bottom: 8px; line-height: 20px; } ul { list-style-image: url(softenedcells-images/li_bullet_dark.gif); } acronym { border-bottom: 1px solid #BBB; cursor: help; } /*************************************************** Site Layout Container: ------------------------------------------- adjust width attribute if you would like to make the site wider, but make sure to also adjust either #news or #text widths as well. ***************************************************/ #siteBox { width: 588px; margin: 0px auto; text-align: left; } /*************************************************** Header Styles -------------------------------------------- Change main header image with #header background attribute. ***************************************************/ #header { height: 144px; background: url(softenedcells-images/hdr_sunset.jpg) no-repeat top center; } #header .title { padding: 10px 10px 0 10px; text-align: right; font-size: 2.5em; line-height: 0.9em; letter-spacing: -1.5px; color: #EEE; } #header .subTitle { padding: 0 10px 0 12px; text-align: right; color: #EEE; } #header .subTitle a { text-decoration: none; color: #EEE; } #header .subTitle a:hover { color: #BBB; background-color: transparent; } /*************************************************** Top Tabbed Menu Styles ***************************************************/ #menu { text-align: center; margin-bottom: 20px; } #menu a { padding: 6px 20px 0 20px; text-decoration: none; text-transform: uppercase; color: #666; } #menu a:hover, #menu a.active { background: url(softenedcells-images/menu_tab_dark.gif) no-repeat top center; } /*************************************************** Left News Column ------------------------------------------- 1. Change to right side column by altering #news float attribute 2. If you widen the #siteBox, also increase #news or #text width attribute ***************************************************/ #news { float: right; width: 175px; padding: 0 0 0 20px; } #news .block { margin-bottom: 20px; background: #DDD url(softenedcells-images/block_top.gif) no-repeat top center; } #news .block .bottom { height: 28px; background: #DDD url(softenedcells-images/block_bottom.gif) no-repeat bottom center; } #news .links { margin: 10px 0 10px 0; } #news .links a { display: block; padding: 6px 0 6px 20px; text-transform: uppercase; text-decoration: none; } #news .links a:hover { background: #DDD url(softenedcells-images/link_news.gif) no-repeat center center; } #news a img { border: 0px; } /*************************************************** Right Content Column ------------------------------------------- 1. Change to left side column by altering #text float attribute 2. If you widen the #siteBox, also increase #news or #text width attribute ***************************************************/ #text { float: left; width: 375px; } /*************************************************** Footer Styles ***************************************************/ #footer { height: 100px; padding: 28px 3px 0 5px; margin: 20px 0 20px 0; background: url(softenedcells-images/footer.gif) no-repeat top right; } p#footer:first-letter { font-size: 1.0em; } #footer img.right { padding: 5px 2px 0 2px; border: 0px; } /*************************************************** Large <ul> Link Styles -------------------------------------------- Creates the large links blocks that can be used in the #text section ***************************************************/ ul.links { float: left; padding: 0px; margin: 0px; } ul.links li { float: left; list-style-type: none; list-style: none; } ul.links li a { float: left; width: 370px; padding-top: 5px; margin: 0px; cursor: pointer; text-decoration: none; } ul.links li a:hover { background: #DDD url(softenedcells-images/link_top.gif) no-repeat top center; } ul.links li a span.title { display: block; margin-left: 11px; text-indent: 20px; background: url(softenedcells-images/link_arrow.gif) no-repeat center left; } ul.links li a span.desc { float: left; width: 350px; padding-right: 3px; margin-left: 10px; color: #666 } ul.links li a span.bottom { display: block; height: 18px; clear: both; } ul.links li a:hover span.bottom { background: #EEE url(softenedcells-images/link_bottom.gif) no-repeat top center; } /*************************************************** Display Classes ***************************************************/ .date { display: block; text-transform: uppercase; color: #BE0000; } p.quote { float: left; padding: 8px 0 0 8px; margin: 5px 0 20px 5px !important; margin: 5px 0 10px 3px; background: #D3F9FF url(softenedcells-images/quote_top.gif) no-repeat top right; border-left: 2px solid #4EE8FF; } p.quote span.bottom { float: right; width: 20px; background: url(softenedcells-images/quote_bottom.gif) no-repeat bottom right; } img.right { float: right; padding: 3px; } img.left { float: left; padding: 3px; } .grey { color: #AAA; } </style> </head> <body> <div id="siteBox"> <div id="header"> <h1 class="title">Softened Cells</h1> <h2 class="subTitle"><a href="http://www.free-css.com/">Slogan Here</a></h2> <!-- Opera bug fix --> </div> <div id="menu"> <a href="http://www.free-css.com/" class="active">Home</a> <a href="http://www.free-css.com/">About</a> <a href="http://www.free-css.com/">Gallery</a> <a href="http://www.free-css.com/">Projects</a> <a href="http://www.free-css.com/">Journal</a> <a href="http://www.free-css.com/">Contact</a> </div> <div id="content"> <div id="news"> <div class="block"> <h1> Blocks </h1> <p> Here's a spot you could stick some side content relavent to the page you're on. There's also a special link class for anything you decide to put here: </p> <div class="links"> <a href="http://www.free-css.com/">Pinecone Theme</a> <a href="http://www.free-css.com/">ThreeTree</a> <a href="http://www.free-css.com/">FullAhead</a> </div> <p> Tried for an open and soft design on this one. You can see the similarities in this design proposal I did last month. </p> <div class="bottom"> </div> </div> <div class="block"> <h1> Recent </h1> <p> <span class="date">2005.08.28</span> Template finished. Two versions available, each one weighing in at a modest 15<acronym title="kilobytes: unit of computer data size">kb</acronym> in size ... <a href="http://www.free-css.com/"><img src="softenedcells-images/link_arrow.gif" alt="" /></a> </p> <p> <span class="date">2005.08.20</span> Played in the Tree-oh discgolf tournament. Went pretty well, but the body is not happy about the 8 hours of play ... <a href="http://www.free-css.com/"><img src="softenedcells-images/link_arrow.gif" alt="" /></a> </p> <p> <span class="date">2005.08.16</span> Tires suck. Went to get my bike out of my friends garage - flat tire. Next day, the car decides to do the same ... <a href="http://www.free-css.com/"><img src="softenedcells-images/link_arrow.gif" alt="" /></a> </p> <div class="bottom"> </div> </div> </div> <div id="text"> <h1> Template </h1> <p> A tableless <acronym title="eXtensible Hyptertext Markup Language">XHTML</acronym>/<acronym title="Cascading Style Sheet">CSS</acronym> template that focuses on customization. After the success of my last template, reflection, I decided to stick with the "easy-to-modify" theme. The header is simple to change for one of your own, as is the accent colour. </p> <p class="quote"> To change the accent colour, search the style sheet for <acronym title="hexidecimal: base 16 numbering system">hex</acronym> value <acronym title="green">#56B600</acronym> and replace it with one of your own. The top header image is added by the #header class definition. <span class="bottom"> </span> </p> <h2> Semantically Coded </h2> <p> This template is coded using the <acronym title="fancy name for HTML tags">markup</acronym> as it was intended. The result is code that is simple to understand and widely supported in different browsers. Another benefit is that <acronym title="fancy word for browsers">user agents</acronym> that don't support CSS will still display the site's content coherently. You can test it yourself by disabling CSS in your browser. </p> <h1> Specs </h1> <p> <img src="softenedcells-images/firefox.jpg" alt="" class="right"/> Softened Cells is a fixed width template that will work out of the box at <acronym title="WIDTH by HEIGHT measurement of screen resolution in pixels">640x480</acronym> and above. You can change this if you want by altering the width definitions of the #siteBox, #news and #text CSS classes. </p> <p> Browser support for the template is very good because of the simple markup structure. It renders consitently in the following: </p> <ul> <li>Firefox</li> <li>Netscape</li> <li>Opera</li> <li>Safari</li> <li><acronym title="dirty, dirty Internet Explorer">IE</acronym> (Windows/Mac)</li> </ul> <h2> Images </h2> <p> Images are fully supported using the two custom CSS classes <acronym title="image will align right">.right</acronym> and <acronym title="image will align left">.left</acronym>. Simply place an image in the paragraph you'd like, apply the class and you're done. Headings <h1> and sub headings <h2> act as boundaries, so you're images will always remain in context. </p> <h1> Big Links </h1> <p> One last thing for you to play with is the .links CSS class. It lets you create large link blocks in your content for whatever you want to emphasis. I used them on my site for the portfolio and links sections. </p> <ul class="links"> <li> <a href="http://www.free-css.com/"> <span class="title">Deviant ART</span> <span class="desc">Just about the largest art site on the Interweb.</span> <span class="bottom"> </span> </a> </li> <li> <a href="http://www.free-css.com/"> <span class="title">CSS Zen Garden</span> <span class="desc">Showcasing what is possible using only pure CSS design.</span> <span class="bottom"> </span> </a> </li> <li> <a href="http://www.free-css.com/"> <span class="title">FullAhead</span> <span class="desc">My design portfolio site (completely shameless plug).</span> <span class="bottom"> </span> </a> </li> </ul> <h1> Terms of Use </h1> <p> The template is released for free, but I would appreciate it you gave me, <a href="http://fullahead.org">FullAhead</a>, credit. If you keep either of the header images that come with the template, you should also leave a link to <a href="http://www.free-css.com/">ThreeTree</a>, since he took them. </p> <p> If you end up using this template, send me an message. It's always interesting to see how people modify my work. I enjoyed making it, so I hope you enjoy using it. </p> <p id="footer"> <a href="http://www.free-css.com/"><img src="softenedcells-images/logo_fullahead.gif" class="right" alt=""/></a> <a href="http://www.free-css.com/"><img src="softenedcells-images/logo_threetree.gif" class="right" alt="ThreeTree logo"/></a> ©2005 No Rights Reserved<br/> Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator">CSS</a> </p> </div> </div> </div> </body> </html>