Today I’m going to show You how to code a Zen Garden template into HTML&CSS with amazing Piecemaker 2 slider. Template in PSD is available here.
What will be needed in this tutorial?
Step 1. Preparation
You should have now a PSD file of the template and Piecemaker 2. Also You should have a text editor. I personally use Aptana Studio. You should use something You are comfortable with.
There is one more thing. For rounded corners in CSS3 and gradients I use two websites:
They save me some time when I use this elements on my code. Especially gradient generator.
Now create a folder structure for your template. Create You main folder called as You want, “zen garden html” is good enough for me. In this folder create a images folder and two files: index.html and style.css. I will be using xHtml 1.0 Transitional and a little bit of CSS3. You also want a couple files from Piecemaker web folder:
- piecemaker.swf
- piecemaker.xml
- scripts folder
After all that you are ready to start.
Step 2. Slicing a PSD file
Now open a PSD file. Take the slice of the background. 200x200px will be fine. Now go to file -> save for web & devices, choose jpg file type with quality between 60-70. I personally use 65. I think it’s enough for websites and the quality is good. Now to the same thing on the rest of the pictures. You will need all three boxes, social icons, logo, separator, Your slides for Piecemaker, three icons from boxes and that’s it. You can slice it on Your own, or You can just download the project files and use the pictures from there.
Step 3. HTML beginnings
Ok. Now open the html file and put there some default stuff for xhtml transitional
<!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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <title>Zen Garden</title> </head> <body> </body> </html>
After that create some divs
<div id="wrapper"> <div id="header"> <div id="logo"> </div><!-- logo end --> <div id="nav"> </div><!-- nav end --> </div><!-- header end --> <div id="slider"> </div><!-- slider end --> <div id="content"> <div class="box1"> </div><!-- box1 end --> <div class="box2"> </div><!-- box2 end --> <div class="box3"> </div><!-- box3 end --> </div><!-- content end --> </div><!-- wrapper end --> <div id="footer-wrap"> <div id="footer"> <div class="block1 blocks"> </div><!-- block1 end --> <div class="block2 blocks"> </div><!-- block2 end --> <div class="block3 blocks"> </div><!-- block3 end --> <div class="block4 blocks"> </div><!-- block4 end --> </div><!-- footer end --> </div><!-- footer-wrap end -->
Now we have our basic structure of the site.
Step 4. Give me some random content – header
Now we need add some random content and images that we sliced earlier.
Let’s start from header section. Just add some h1 tag for logo and ul for our navigation
<div id="header"> <div id="logo"> <h1><a href="#">Zen garden</a></h1> </div><!-- logo end --> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Garden designs</a></li> <li><a href="#">How to</a></li> <li><a href="#">Plants & Trees</a></li> <li><a href="#">Contact us</a></li> </ul> </div><!-- nav end --> </div><!-- header end -->
Step 5. Give me some random content – slider
For the slider just add a standard code from demo file
<center>
<div id="piecemaker">
<p>Put your alternative Non Flash content here.</p>
</div>
</center>
Step 6. Give me some random content – boxes
Now add some text to our content section. Just a couple of h2s, random text and a link which will be out icons on the bottom of the boxes.
<div id="content"> <div class="box1"> <h2>Plan Your Garden</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id elit turpis, in bibendum lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sit amet laoreet augue. Ut vitae lectus in augue bibendum cursus ut eget tellus.</p> <a href="#">Read more</a> </div><!-- box1 end --> <div class="box2"> <h2>How To Gardening</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id elit turpis, in bibendum lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sit amet laoreet augue. Ut vitae lectus in augue bibendum cursus ut eget tellus.</p> <a href="#">Read more</a> </div><!-- box2 end --> <div class="box3"> <h2>Trees, Shrubs & Vines</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id elit turpis, in bibendum lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sit amet laoreet augue. Ut vitae lectus in augue bibendum cursus ut eget tellus.</p> <a href="#">Read more</a> </div><!-- box3 end --> </div><!-- content end -->
Step 7. Give me some random content – footer
Now fill the footer. There are 3 boxes with links lists and one box with input field and social icons
<div id="footer"> <div class="block1 blocks"> <h3>Useful Links</h3> <ul> <li><a href="#">Patios</a></li> <li><a href="#">Indoor House Plants</a></li> <li><a href="#">Free Garden Plans</a></li> <li><a href="#">Flower Bulbs</a></li> <li><a href="#">Lawn Watering</a></li> <li><a href="#">Landscaping Ideas</a></li> <li><a href="#">Rose Pruning</a></li> <li><a href="#">Vegetable Gardening</a></li> </ul> </div><!-- block1 end --> <div class="block2 blocks"> <h3>Community</h3> <ul> <li><a href="#">Videos</a></li> <li><a href="#">Tools</a></li> <li><a href="#">Topics</a></li> <li><a href="#">Message Boards</a></li> <li><a href="#">Garden Store</a></li> <li><a href="#">Better Blog</a></li> <li><a href="#">Free Offers</a></li> <li><a href="#">Help Resources</a></li> </ul> </div><!-- block2 end --> <div class="block3 blocks"> <h3>Gardening Ideas</h3> <ul> <li><a href="#">Plan-a-Garden</a></li> <li><a href="#">Garden Plans</a></li> <li><a href="#">Bird & Flower Photos</a></li> <li><a href="#">Ask The Garden Docto</a></li> <li><a href="#">Garden Care</a></li> <li><a href="#">DIY Gardening</a></li> <li><a href="#">Garden Doctor </a></li> <li><a href="#">Picture Perfect Lawn</a></li> </ul> </div><!-- block3 end --> <div class="block4 blocks"> <h3>Follow Us</h3> <h4>Join Our Mailing List</h4> <form method="get" id="newsletter" action="#"> <input type="text" name="Enter Your email" id="join" /> <input type="submit" class="submit" value="+ join" /> </form> <ul id="social"> <li><a href="#"><img src="images/fb.png" alt="Facebook" /></a></li> <li><a href="#"><img src="images/twitter.png" alt="Twitter" /></a></li> <li><a href="#"><img src="images/yt.png" alt="Youtube" /></a></li> <li><a href="#"><img src="images/rss.png" alt="RSS Feed" /></a></li> </ul> <p>Copyright © 2011 Mtuts</p> </div><!-- block4 end --> </div><!-- footer end -->
Ok, so now we have our random content done. Now we should open our style.css file and start styling our template. But first lets configure our Piecemaker. Originally I’ve done it later, after I had my template styled. But there is no problem to configure it now.
Step 8. Configuring Piecemaker 2
My slider images are 900×360. In this project I have four of them. You can of course add some more if You want or change the size of them, but remember to change the css file later.
Open Your piecemaker.xml file and remove the unnecessary code from there
<?xml version="1.0" encoding="utf-8"?>
<Piecemaker>
<Contents>
<Image Source="images/slide2.jpg" Title="Slide2"></Image>
<Image Source="images/slide1.jpg" Title="Slide1"></Image>
<Image Source="images/slide3.jpg" Title="Slide3"></Image>
<Image Source="images/slide4.jpg" Title="Slide4"></Image>
</Contents>
<Settings ImageWidth="900" ImageHeight="360" LoaderColor="0x333333" InnerSideColor="0x222222" SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95" DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999" MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20" ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95" ControlsX="450" ControlsY="280
" ControlsAlign="center" TooltipHeight="0" TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF" TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100" InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0" InfoThickness="0" Autoplay="3" FieldOfView="45"></Settings>
<Transitions>
<Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"></Transition>
<Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"></Transition>
<Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500" CubeDistance="50"></Transition>
<Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900" CubeDistance="5"></Transition>
</Transitions>
</Piecemaker>
If You want add some images just add some code
<Image Source="images/slide5.jpg" Title="Slide5"></Image> <Image Source="images/slide6.jpg" Title="Slide6"></Image>
Etc… For more info please visit Piecemaker 2 site.
After we have our xml file ready open index.html file and add some code in head section
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<title>Zen Garden</title>
<script type="text/javascript" src="scripts/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.cssSource = "style.css";
flashvars.xmlSource = "piecemaker.xml";
var params = {};
params.play = "true";
params.menu = "false";
params.scale = "showall";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.allownetworking = "all";
swfobject.embedSWF('piecemaker.swf', 'piecemaker', '900', '360', '10', null, flashvars,
params, null);
</script>
</head>
Make sure Your links are correct. Remember to change swfobject.embedSWF if You have different size of the images.
Now we can start styling our template.
Step 9. Styling the header
So now we have to style our header. Start from global code and then style the logo and our navigation
* {
padding:0;
margin:0;
}
body {
background: #eaeaea url(images/bg.jpg);
color: #222222;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
width: 940px;
margin: 0 auto;
}
#logo h1 {
float: left;
background: url(images/logo.png) no-repeat top left;
margin-top: 45px;
width: 290px;
height: 53px;
}
#logo h1 a {
text-indent: -9999px;
width: 290px;
height: 53px;
display: block;
}
#nav {
margin-top: 40px;
float: right;
}
#nav ul {
padding: 20px;
background: #595959; /* old browsers */
background: -moz-linear-gradient(top, #595959 0%, #363636 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#595959), color-stop(100%,#363636)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595959', endColorstr='#363636',GradientType=0 ); /* ie */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#nav ul li {
display: inline;
padding: 0 10px;
}
#nav a {
color: #adc531;
text-transform: uppercase;
font-size: 13px;
text-decoration: none;
font-weight: bold;
}
#nav a:hover {
color: #cfea43;
}
Now You should have something similar to this
Step 10. Styling the slider
So now we have to style our slider. Just a little bit of code here
#slider {
clear: both;
margin: 40px auto;
}
#piecemaker {
width: 900px;
height: 450px;
margin-top: 20px;
}
Now you should have something like this
Step 11. Styling content area
Now lets add some code for our boxes in the content area.
#content {
min-height: 340px;
}
.box1, .box2, .box3 {
width: 300px;
height: 261px;
float: left;
}
.box1 {
margin-right: 10px;
background: url(images/box1.jpg) no-repeat top left;
}
.box2 {
margin: 0 10px;
background: url(images/box2.jpg) no-repeat top left;
}
.box3 {
margin-left: 10px;
background: url(images/box3.jpg) no-repeat top left;
}
.box1 h2, .box2 h2, .box3 h2 {
padding: 20px 0 10px 27px;
text-shadow: 1px 1px 0 #666;
letter-spacing: -1px;
}
.box1 p, .box2 p, .box3 p {
padding: 10px 27px;
font-size: 12px;
}
.box1 a, .box2 a, .box3 a {
display: block;
text-indent: -9999px;
}
.box1 a {
background: url(images/tree1.png) no-repeat center center;
width: 300px;
height: 128px;
text-align: center;
}
.box2 a {
background: url(images/tree2.png) no-repeat center center;
width: 300px;
height: 108px;
text-align: center;
margin-top: 10px;
}
.box3 a {
background: url(images/tree3.png) no-repeat center center;
width: 300px;
height: 93px;
text-align: center;
margin-top: 20px;
}
Now our template start to look as it suppose to. Only footer section left.
Step 12. Styling footer
First add some background to the footer. Make sure You put the “overflow: hidden” to Your #footer. Otherwise You won’t see the background. It sometimes happen when You floating elements.
#footer-wrap {
background: #595959; /* old browsers */
background: -moz-linear-gradient(top, #595959 0%, #363636 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#595959), color-stop(100%,#363636)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595959', endColorstr='#363636',GradientType=0 ); /* ie */
color: #fff;
width: 100%;
}
#footer {
width: 940px;
margin: 0 auto;
overflow: hidden;
padding: 40px 0;
}
Now style first 3 block in your footer section
.blocks {
width: 220px;
float: left;
}
.blocks h3 {
font-size: 26px;
letter-spacing: -2px;
text-align: center;
margin-bottom: 30px;
font-weight: normal;
}
.blocks h4 {
font-size: 22px;
letter-spacing: -2px;
margin-bottom: 10px;
font-weight: normal;
}
.blocks li {
list-style: none;
margin: 5px 0 5px 15px;
}
.blocks a {
color: #fff;
font-size: 12px;
text-decoration: none;
}
.blocks a:hover {
color: #ccc;
}
.block1 {
margin-right: 10px;
background: url(images/sep.jpg) no-repeat center right;
}
.block2, .block3 {
margin: 0 10px;
background: url(images/sep.jpg) no-repeat center right;
}
And now all You have to do is style a social block. Add some code for the structure of the block
.block4 {
margin-right: 10px;
}
.block4 p {
font-size: 12px;
color: #eee;
text-align: right;
}
ul#social {
padding: 20px 0;
}
#social li {
display: inline;
}
.blocks #social li {
list-style: none;
margin: 0;
}
#social a img {
border: none;
}
#newsletter {
position: relative;
}
Make sure Your position for #newsletter is set to relative. It will be needed in just a moment when we’ll be styling the input field. For that add the last code in our css file.
input#join {
color: #222;
font-size: 12px;
border: none;
padding: 5px;
width: 150px;
height: 21px;
background: #EFEFEF; /* old browsers */
background: -moz-linear-gradient(top, #EFEFEF 0%, #D9D9D9 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EFEFEF), color-stop(100%,#D9D9D9)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFEFEF', endColorstr='#D9D9D9',GradientType=0 ); /* ie */
}
input.submit {
background: #EFEFEF; /* old browsers */
background: -moz-linear-gradient(top, #EFEFEF 0%, #D9D9D9 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EFEFEF), color-stop(100%,#D9D9D9)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFEFEF', endColorstr='#D9D9D9',GradientType=0 ); /* ie */
font-weight: bold;
font-size: 13px;
color: #8dac2d;
text-transform: uppercase;
border: none;
height: 31px;
width: 70px;
padding: 0 5px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
input.submit:hover {
color: #769026;
}
Finished!
So now you have it. You just coded Zen Garden template with this amazing looking slider.
You can now add some other pages. You can style a content section different and make the site ready to go. Hope you guys like this tutorial and learn something from it.
As always please leave Your comments, share this tutorial to Your friends, subscribe and the most important – criticize.
If You have any tips, maybe something that will help me or people who visit this blog, please share in comments.
And remember, if you want to use this template, just make sure it’s validate and looks good in other browsers.
Thank You for reading.
Thanks so much for the lesson
If you want to change the size of the background of the css
How can anyone explain
If You mean the code of CSS3 than You can always create a image of the gradient and paste it as a bg. CSS3 way was quicker for me so I sed it. Maybe in future tutorials there will be images instead of CSS3 code.
Excellent!!! I really loved your tutorial; i’m new to Drupal and this tutorial really helped in theming.
Thanks a lot for sharing!
Your type is so exclusive in comparison to several other people. Thanks for publishing once you possess the opportunity,Guess I will just make this bookmarked.
Really great post, I’ll definitelly come back on your website.
Hello!!!
Really excellent job, not only for your creation, but also for making me understand and get lucky in my piecemaker project…
Thx a lot!
I agree, and I hate to read bio’s that are just a list of keywords. Yes, I may be more likely to find you that way but I’m probably not going to follow you if that’s all you’ve written in your bio. I really like your bio and I need to go back and review mine since it’s been a long time since I’ve changed it.Josh recently posted..Children’s Ultimate UGG Boots