It's been a while coming, but today, during the coding phase of this massive tutorial, we're going to begin the HTML conversion of our theme. We've already designed the whole thing in Photoshop, so now we'll look at converting our homepage into a valid HTML web page.
Throughout our conversion phase we'll follow best practices, use valid HTML 5 (doctype, though none of the newer spec elements) and CSS 2.1 for maximum browser support.
The Game Plan
We'll use this general process to convert our Photoshop design into HTML in three phases
Phase 1
- Create document/folder/site structure.
- Define document type.
- Inspect the main design and figure out the overall basic markup.
- Inspect the specific page sections to get an idea as to how to mark it up.
- Insert HTML tags according to our markup ideas and finish the HTML coding.
Phase 2
- Reset the default styles of browsers.
- Add some default styles for common HTML elements.
- Position and design elements sequentially from top to bottom and section by section.
Phase 3
- We'll check our design in all modern browsers and compensate for IE.
- Finally, we'll add some behavior to our theme with some custom and third party jQuery plugins and scripts.
Our theme is very simple, so we need to slice very few graphics from our design. Those graphics that we do slice will be done as necessary as we approach the HTML and CSS. Please follow the tutorial from start to finish attentively as I'll discuss each trick only once.
Resources Used For This Project
You can use your own resources if you'd like, but here's the full list of the images and icons that I've used in the tutorial:
- Images - Lil Rhody Dan, Flickr
- Merry Christmas (photo)- from PSDTuts flickr group
- Social Icons – wefunction
- Twitter Bird – webtreats
- jQuery - 1.4.2 JavaScript Library
- jQuery prettyPhoto Plugin
- jQuery Cycle Plugin
Generally, HTML conversion consists of three separate parts:
- Content (HTML/XHTML)
- Presentation (CSS) and
- Behavior (JS)
Today's three sub-parts are defined below. Feel free to jump back and forth when you're proficient at a certain skill outlined in a specific section.
- Part A -- Content - Creating markup and populating the page With content.
- Part B -- Presentation - Positioning and designing content with pure CSS.
- Part C -- Behavior - Defining interactions with JavaScript
Let's convert our Photoshop design into a working HTML page!
Step A - 1: Creating The Site Structure
Creating a well thought-out folder structure is extremely important for any web development work. With that in mind, we'll create our folder structure first. Use the image A - 1a as a guideline to create your folder structure.
- In the assets folder, we'll place all our assets -- images, videos, flash, etc.
- In the files folder, there are two subfolders named, codes and images.
- The folder named codes is for css (Style Sheet) and js (JavaScript) files.
- All our images used for creating this theme will be placed inside the images folder.
- Our HTML files will be directly inside the ICONIFY folder.
Step A - 2: The First HTML Document
Create a new HTML file and name it index.html. Open the file in your favorite HTML/Code editor. Place the following content inside your index.html file.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" />
<meta name="description" content="A brief description of this website or your business." />
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" />
<title>ICONIFY :: Welcome</title>
<!-- Favorites icon -->
<link rel="shortcut icon" href="assets/favicon.ico" />
</head>
<body>
</body>
</html>
This is an HTML 5 document and we're ensuring this by setting its doctype to <!DOCTYPE HTML>. In the head section, we're placing some meta tags like- author, description, keywords these meta tags help search engines to easily find and index our web pages. We are also declaring our page's title and favicon.
Step A - 3: Inspecting The Design
By inspecting the homepage design, we find three horizontal sections: #header, #content, and #footer. Two (header, footer) of these three sections are static, because they are going to be same throught-out the site. So, depending on this preliminary markup idea from the design, our HTML markup will be:
<body>
<div id="header">
<div class="inner">
header
</div><!-- end of .inner -->
</div><!-- end of #header -->
<div id="content">
<div class="inner">
content
</div><!-- end of .inner -->
</div><!-- end of #content -->
<div id="footer">
<div class="inner">
footer
</div><!-- end of .inner -->
</div><!-- end of #footer -->
</body>
</html>
Our three vertical sections are div#header, div#content, and div#footer. Also note that within each section, there's a div.inner element, this is for the glow effect of every section and we'll also place all our elements inside these div.inner containers.
In browsers, our document now looks like this image:
Note: every closing tag has an associated comment, which describes the element that is being closed. It's best practice to always comment out important parts or sections in an HTML document. We'll follow this practice today.
Now let's populate our three sections with HTML contents, sequentially from header to footer
Step A - 4: Populate the Header
Inspect the design and trace out the HTML parts in the header section. Use the image A - 4a as a guideline.
Here's our header design translated into HTML markup:
<div id="header">
<div class="inner">
<ul class="top">
</ul><!-- end of .top -->
<div id="nav">
<div id="logo">
</div><!-- end of #logo -->
<ul id="menu">
</ul><!-- end of #menu -->
</div><!-- end of #nav -->
</div><!-- end of .inner -->
</div><!-- end of #header -->
We're going to slice our first image, the logo, so open the index design in Photoshop. Select the Slice tool from inside the Crop Tool group. Now use images A - 4b and A - 4c as a guideline to crop your logo. Then goto File->Save for Web & Devices or press Alt+Shift+Ctrl+S from key board to call the Save for Web & Devices dialogue box. Select PNG-24 and Transparent then save to our web roots files->images folder as shown in image A - 4d.
We'll use these same techniques/steps for slicing our next images. Only the dimensions will be mentioned from now on.
Let's fill up the #header section with associated contents. Copy the following into your document:
<div id="header">
<div class="inner">
<ul class="top">
<li><a href="#">Downloads</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Login</a></li>
<li>
<form action="#" method="get">
<fieldset>
<legend>Search Form</legend>
<label for="searchTerm">Search</label>
<input type="text" name="searchTerm" id="searchTerm" size="40" maxlength="150" />
<input type="submit" value="Search" />
</fieldset>
</form>
</li>
</ul><!-- end of .top -->
<div id="nav">
<div id="logo">
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/images/logo.png" height="48" width="138" alt="ICONIFY" /></a>
</div><!-- end of #logo -->
<ul id="menu">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a href="#">Features</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blogs.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul><!-- end of #menu -->
</div><!-- end of #nav -->
</div><!-- end of .inner -->
</div><!-- end of #header -->
Our ul.top is a list element and thus is made up of li elements. The last child of ul.top holds our search form. Inside div#nav, there are two immediate children: div#logo and ul#menu. ul#menu is a list element and all its children are menu items. Notice that one menu item has a class li.active and one menu item has a class li.dropdown. Those are to merely indicate active and dropdown menu items respectively.
Your browser should now render index.html like this
Step A - 5: Populate The #content
Inspect the design and trace out the HTML parts in the content section. Use the following image as a guideline.
After inspecting the content section in the design, we can plan our HTML sub-sections inside the #content section as shown below.
<div id="content">
<div class="inner">
<div id="slider">
<ul id="cycle">
</ul>
<div id="cyclePager"></div>
</div><!-- end of #slider -->
<ul class="promo-col-4">
</ul><!-- end of .promo-col-4 -->
<hr />
<ul class="promo-col-3">
</ul><!-- end of .promo-col-3 -->
<div class="testimonial">
</div><!-- end of .testimonial -->
<div id="recentProjects">
<div class="bar">
</div><!-- end of .bar -->
<ul class="">
</ul><!-- end of . -->
</div><!-- end of #recentProjects -->
</div><!-- end of .inner -->
</div><!-- end of #content -->
Now we're going to fill up the #content section with some contents, sequentially, from top to bottom. Copy the following code into your html document.
<div id="slider">
<ul id="cycle">
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/1.jpg" height="336" width="936" alt="Slides" /></li>
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/2.jpg" height="336" width="936" alt="Slides" /></li>
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/3.jpg" height="336" width="936" alt="Slides" /></li>
</ul>
<div id="cyclePager"></div>
</div><!-- end of #slider -->
Inside #slider we've three image links, which are our slides. And a div#cyclePager for the pager or slider navigation.
<ul class="promo-col-4">
<li class="">
<a href="#" title="Unlimited Columns With 960 Grid">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/blueprint.png" height="48" width="48" alt="Blueprint" />
</a>
<h5><a href="#" title="Unlimited Columns With 960 Grid">Unlimited Columns With 960 Grid</a></h5>
</li>
<li class="">
<a href="#" title="Unlimited Colors (Change CSS Hex)">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/colouralt.png" height="48" width="48" alt="Colors" />
</a>
<h5><a href="#" title="Unlimited Colors (Change CSS Hex)">Unlimited Colors (Change CSS Hex)</a></h5>
</li>
<li class="">
<a href="#" title="Display Images With A Unique Flair">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/photos.png" height="48" width="48" alt="Photos" />
</a>
<h5><a href="#" title="Display Images With A Unique Flair">Display Images With A Unique Flair</a></h5>
</li>
<li class="">
<a href="#" title="Supports All Modern Browsers">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/safari.png" height="48" width="48" alt="Browsers" />
</a>
<h5><a href="#" title="Supports All Modern Browsers">Supports All Modern Browsers</a></h5>
</li>
</ul><!-- end of .promo-col-4 -->
<hr />
This is a 4 column promotional item named ul.promo-col-4 and we'll see how to position them according to our design in the CSS portion. Its structure is pretty simple -- just place every column's elements inside a li of ul.promo-col-4.
Currently, our page renders in the browser like this
<ul class="promo-col-3">
<li class="">
<a href="#" title="Using Clone Stamp Tool">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/1.jpg" class="border" height="138" width="298" alt="Promo Picture" />
</a>
<h4><a href="#">Using Clone Stamp Tool</a></h4>
<p>
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting.
</p>
<a href="#" class="btn" title="Read More">Read More</a>
</li>
<li class="">
<a href="#" title="Using Clone Stamp Tool">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/2.jpg" class="border" height="138" width="298" alt="Promo Picture" />
</a>
<h4><a href="#">Using Clone Stamp Tool</a></h4>
<p>
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting.
</p>
<a href="#" class="btn" title="Read More">Read More</a>
</li>
<li class="">
<a href="#" title="Using Clone Stamp Tool">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/3.jpg" class="border" height="138" width="298" alt="Promo Picture" />
</a>
<h4><a href="#">Using Clone Stamp Tool</a></h4>
<p>
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting.
</p>
<a href="#" class="btn" title="Read More">Read More</a>
</li>
</ul><!-- end of .promo-col-3 -->
This promotional section is the same as ul.promo-col-4, the only difference being that it has 3 columns. And it render in browsers as follows:
<div class="testimonial">
<div class="inner">
<blockquote>
A color management system reconciles color differences among devices so that you can be reasonably certain of the colors your system ultimately produces. Viewing color accurately allows you to make sound color decisions throughout your workflow, from digital capture through final output. Color management also allows you to create output based on ISO, SWOP, and Japan Color print production standards.
</blockquote>
<span class="arrow"><!-- blockquote box arrow --></span>
</div>
<cite>
<strong>Thomas Miller</strong> CEO, envato
</cite>
</div><!-- end of .testimonial -->
This is the featured testimonial box in the homepage. Inside the div.testimonial parent element, we place a blockquote element within a div.inner element. This div.inner element is for the inner darker stroke of the testimonial box. We'll use some techniques in the CSS portion to design the testimonial box.
<div id="recentProjects">
<div class="bar">
<h5>
Recent Projects
</h5>
</div><!-- end of .bar -->
<ul class="">
<li class="">
<a href="#" >
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/1.jpg" class="border" height="158" width="218" alt="Recent Project" />
</a>
</li>
<li class="">
<a href="#" >
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/2.jpg" class="border" height="158" width="218" alt="Recent Project" />
</a>
</li>
<li class="">
<a href="#" >
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/3.jpg" class="border" height="158" width="218" alt="Recent Project" />
</a>
</li>
<li class="">
<a href="#" >
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/4.jpg" class="border" height="158" width="218" alt="Recent Project" />
</a>
</li>
</ul><!-- end of .projects -->
</div><!-- end of #recentProjects -->
div#recentProjects has two children: div.bar for the heading and a ul element with four li children for the recent project's items. Check out the browser preview:
Step A - 6: Populate the Footer
As usual, inspect the design and trace out the HTML parts in the footer section. Use the image A - 6a as a guideline.
After inspecting the footer section in the design we can plan our HTML sub-sections inside the #footer section as shown below.
<div id="footer" class="">
<div class="inner">
<div class="top">
</div><!-- end of .top -->
<ul class="content">
</ul><!-- end of .content -->
<div class="bottom">
</div><!-- end of .bottom -->
</div><!-- end of .inner -->
</div><!-- end of #footer -->
Copy the following code into your html document.
<div class="top">
<div id="twitter" class="">
<!-- Twitter plugin jQuery.getTwitter will automatically fillup this div -->
</div><!-- end of #twitter -->
<ul class="social">
<li><h5>Get Social</h5></li>
<li>
<a href="#" title="RSS">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/rss.png" height="32" width="32" alt="RSS" />
</a>
</li>
<li>
<a href="#" title="Flickr">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/flickr.png" height="32" width="32" alt="Flickr" />
</a>
</li>
<li>
<a href="#" title="Facebook">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/facebook.png" height="32" width="32" alt="Facebook" />
</a>
</li>
<li>
<a href="#" title="Twitter">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/twitter.png" height="32" width="32" alt="Twitter" />
</a>
</li>
</ul><!-- end of .social -->
</div><!-- end of .top -->
There are two immediate children inside div.top:, one for our lovely twitter plugin named div#twitter and another one for our social links- ul.social.
<ul class="content">
<li class="">
<h5>About ICONIFY</h5>
<p>
Creating themes to give away or sell is great, but not everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options page makes it easier for non-technical users to make theme changes without getting their hands dirty with code. I'll show you how to make one from scratch!
</p>
</li>
<li class="">
<h5>Categories</h5>
<ul class="list">
<li><a href="#" title="Graphics Design">Graphics Design</a></li>
<li><a href="#" title="Web Graphics">Web Graphics</a></li>
<li><a href="#" title="User Interface Designing">User Interface Designing</a></li>
<li><a href="#" title="3D Graphics">3D Graphics</a></li>
<li><a href="#" title="Web Development">Web Development</a></li>
<li><a href="#" title="Programming">Programming</a></li>
<li><a href="#" title="Scripting">Scripting</a></li>
<li><a href="#" title="Wordpress">Wordpress</a></li>
<li><a href="#" title="Cartooning">Cartooning</a></li>
<li><a href="#" title="Object Oriented Development">Object Oriented Development</a></li>
<li><a href="#" title="Information Architecture">Information Architecture</a></li>
</ul><!-- end of .cat -->
</li>
<li class="">
<h5>Recent Posts</h5>
<ul class="blogList">
<li>
<a href="#" title=""><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" class="border" height="78" width="78" alt="Blog Post" /></a>
<h5><a href="#">Developing Future Web Apps</a></h5>
<p>
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options <a href="#" title="Read More">Read More</a>
</p>
</li>
<li>
<a href="#" title=""><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" class="border" height="78" width="78" alt="Blog Post" /></a>
<h5><a href="#">Developing Future Web Apps</a></h5>
<p>
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options <a href="#" title="Read More">Read More</a>
</p>
</li>
</ul><!-- end of .blogList -->
</li>
</ul><!-- end of .content -->
The ul.content is a three column section and each li element is a column. We'll use some tricks in the CSS portion to properly style and position them out.
<div class="bottom">
<a href="#" id="toTop" title="Scroll To Top"></a>
<hr />
<p class="copyright">
Copyright © <a href="#" title="ICONIFY">ICONIFY</a> 2011-2015, All Rights Reserved.
<span style="float: right;">
Template By: <a href="http://themeforest.net/user/palpaldal/" title="palpaldal's Themeforest Profile">palpaldal</a>
</span>
</p>
</div><!-- end of .bottom -->
div.bottom should be self explanatory. And this is the browser preview:
Final Index Page HTML
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" />
<meta name="description" content="A brief description of this website or your business." />
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" />
<title>ICONIFY :: Welcome</title>
<!-- Favorites icon -->
<link rel="shortcut icon" href="assets/favicon.ico" />
</head>
<body>
<div id="header">
<div class="inner">
<ul class="top">
<li><a href="#">Downloads</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Login</a></li>
<li>
<form action="#" method="get">
<fieldset>
<legend>Search Form</legend>
<label for="searchTerm">Search</label>
<input type="text" name="searchTerm" id="searchTerm" size="40" maxlength="150" />
<input type="submit" value="Search" />
</fieldset>
</form>
</li>
</ul><!-- end of .top -->
<div id="nav">
<div id="logo">
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/images/logo.png" height="48" width="138" alt="ICONIFY" /></a>
</div><!-- end of #logo -->
<ul id="menu">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a href="#">Features</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blogs.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul><!-- end of #menu -->
</div><!-- end of #nav -->
</div><!-- end of .inner -->
</div><!-- end of #header -->
<div id="content">
<div class="inner">
<div id="slider">
<ul id="cycle">
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/1.jpg" height="336" width="936" alt="Slides" /></li>
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/2.jpg" height="336" width="936" alt="Slides" /></li>
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/3.jpg" height="336" width="936" alt="Slides" /></li>
</ul>
<div id="cyclePager"></div>
</div><!-- end of #slider -->
<ul class="promo-col-4">
<li class="">
<a href="#" title="Unlimited Columns With 960 Grid">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/blueprint.png" height="48" width="48" alt="Blueprint" />
</a>
<h5><a href="#" title="Unlimited Columns With 960 Grid">Unlimited Columns With 960 Grid</a></h5>
</li>
<li class="">
<a href="#" title="Unlimited Colors (Change CSS Hex)">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/colouralt.png" height="48" width="48" alt="Colors" />
</a>
<h5><a href="#" title="Unlimited Colors (Change CSS Hex)">Unlimited Colors (Change CSS Hex)</a></h5>
</li>
<li class="">
<a href="#" title="Display Images With A Unique Flair">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/photos.png" height="48" width="48" alt="Photos" />
</a>
<h5><a href="#" title="Display Images With A Unique Flair">Display Images With A Unique Flair</a></h5>
</li>
<li class="">
<a href="#" title="Supports All Modern Browsers">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/safari.png" height="48" width="48" alt="Browsers" />
</a>
<h5><a href="#" title="Supports All Modern Browsers">Supports All Modern Browsers</a></h5>
</li>
</ul><!-- end of .promo-col-4 -->
<hr />
<ul class="promo-col-3">
<li class="">
<a href="#" title="Using Clone Stamp Tool">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/1.jpg" class="border" height="138" width="298" alt="Promo Picture" />
</a>
<h4><a href="#">Using Clone Stamp Tool</a></h4>
<p>
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting.
</p>
<a href="#" class="btn" title="Read More">Read More</a>
</li>
<li class="">
<a href="#" title="Using Clone Stamp Tool">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/2.jpg" class="border" height="138" width="298" alt="Promo Picture" />
</a>
<h4><a href="#">Using Clone Stamp Tool</a></h4>
<p>
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting.
</p>
<a href="#" class="btn" title="Read More">Read More</a>
</li>
<li class="">
<a href="#" title="Using Clone Stamp Tool">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/3.jpg" class="border" height="138" width="298" alt="Promo Picture" />
</a>
<h4><a href="#">Using Clone Stamp Tool</a></h4>
<p>
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting.
</p>
<a href="#" class="btn" title="Read More">Read More</a>
</li>
</ul><!-- end of .promo-col-3 -->
<div class="testimonial">
<div class="inner">
<blockquote>
A color management system reconciles color differences among devices so that you can be reasonably certain of the colors your system ultimately produces. Viewing color accurately allows you to make sound color decisions throughout your workflow, from digital capture through final output. Color management also allows you to create output based on ISO, SWOP, and Japan Color print production standards.
</blockquote>
<span class="arrow"><!-- blockquote box arrow --></span>
</div>
<cite>
<strong>Thomas Miller</strong> CEO, envato
</cite>
</div><!-- end of .testimonial -->
<div id="recentProjects">
<div class="bar">
<h5>
Recent Projects
</h5>
</div><!-- end of .bar -->
<ul class="">
<li class="">
<a href="#" >
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/1.jpg" class="border" height="158" width="218" alt="Recent Project" />
</a>
</li>
<li class="">
<a href="#" >
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/2.jpg" class="border" height="158" width="218" alt="Recent Project" />
</a>
</li>
<li class="">
<a href="#" >
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/3.jpg" class="border" height="158" width="218" alt="Recent Project" />
</a>
</li>
<li class="">
<a href="#" >
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/4.jpg" class="border" height="158" width="218" alt="Recent Project" />
</a>
</li>
</ul><!-- end of ul -->
</div><!-- end of #recentProjects -->
</div><!-- end of .inner -->
</div><!-- end of #content -->
<div id="footer">
<div class="inner">
<div class="top">
<div id="twitter" class="">
<!-- Twitter plugin jQuery.getTwitter will automatically fillup this div -->
</div><!-- end of #twitter -->
<ul class="social">
<li><h5>Get Social</h5></li>
<li>
<a href="#" title="RSS">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/rss.png" height="32" width="32" alt="RSS" />
</a>
</li>
<li>
<a href="#" title="Flickr">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/flickr.png" height="32" width="32" alt="Flickr" />
</a>
</li>
<li>
<a href="#" title="Facebook">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/facebook.png" height="32" width="32" alt="Facebook" />
</a>
</li>
<li>
<a href="#" title="Twitter">
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/twitter.png" height="32" width="32" alt="Twitter" />
</a>
</li>
</ul><!-- end of .social -->
</div><!-- end of .top -->
<ul class="content">
<li class="">
<h5>About ICONIFY</h5>
<p>
Creating themes to give away or sell is great, but not everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options page makes it easier for non-technical users to make theme changes without getting their hands dirty with code. I'll show you how to make one from scratch!
</p>
</li>
<li class="">
<h5>Categories</h5>
<ul class="list">
<li><a href="#" title="Graphics Design">Graphics Design</a></li>
<li><a href="#" title="Web Graphics">Web Graphics</a></li>
<li><a href="#" title="User Interface Designing">User Interface Designing</a></li>
<li><a href="#" title="3D Graphics">3D Graphics</a></li>
<li><a href="#" title="Web Development">Web Development</a></li>
<li><a href="#" title="Programming">Programming</a></li>
<li><a href="#" title="Scripting">Scripting</a></li>
<li><a href="#" title="Wordpress">Wordpress</a></li>
<li><a href="#" title="Cartooning">Cartooning</a></li>
<li><a href="#" title="Object Oriented Development">Object Oriented Development</a></li>
<li><a href="#" title="Information Architecture">Information Architecture</a></li>
</ul><!-- end of .cat -->
</li>
<li class="">
<h5>Recent Posts</h5>
<ul class="blogList">
<li>
<a href="#" title=""><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" class="border" height="78" width="78" alt="Blog Post" /></a>
<h5><a href="#">Developing Future Web Apps</a></h5>
<p>
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options <a href="#" title="Read More">Read More</a>
</p>
</li>
<li>
<a href="#" title=""><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" class="border" height="78" width="78" alt="Blog Post" /></a>
<h5><a href="#">Developing Future Web Apps</a></h5>
<p>
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options <a href="#" title="Read More">Read More</a>
</p>
</li>
</ul><!-- end of .blogList -->
</li>
</ul><!-- end of .content -->
<div class="bottom">
<a href="#" id="toTop" title="Scroll To Top"></a>
<hr />
<p class="copyright">
Copyright © <a href="#" title="ICONIFY">ICONIFY</a> 2011-2015, All Rights Reserved.
<span style="float: right;">
Template By: <a href="http://themeforest.net/user/palpaldal/" title="palpaldal's Themeforest Profile">palpaldal</a>
</span>
</p>
</div><!-- end of .bottom -->
</div><!-- end of .inner -->
</div><!-- end of #footer -->
</body>
</html>
Part B Presentation
We've finished the markup portion of this tutorial, let's move on to the CSS.
First, create some blank CSS files inside your css folder. You'll also need to download and link prettyPhoto.css file and 960.css file from the Nomarginsforerroe and 960 website respectively. Create and link your CSS style sheets from inside your document head as shown below:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" />
<meta name="description" content="A brief description of this website or your business." />
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" />
<title>ICONIFY :: Welcome</title>
<!-- Favorites icon -->
<link rel="shortcut icon" href="assets/favicon.ico" />
<!-- CSS Files -->
<!-- Resetting all default browser markups and styles.-->
<link rel="stylesheet" type="text/css" href="files/codes/css/reset.css" media="all" />
<!-- 960 Grid ( 12+16 cols) System for easy and flexible markups.-->
<link rel="stylesheet" type="text/css" href="files/codes/css/960.css" media="all" />
<!-- Default and template specific styles. -->
<link rel="stylesheet" type="text/css" href="files/codes/css/default.css" media="all" />
<!-- prettyPhoto jQuery plugin's CSS styles-->
<link rel="stylesheet" type="text/css" href="files/codes/css/prettyPhoto.css" media="all" />
<!-- Weird IE specific codes -->
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="files/codes/css/ie7.css" media="all" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="files/codes/css/ie8.css" media="all" />
<![endif]-->
</head>
In the bottom portion, we've linked two style sheet documents specifically for IE browsers. We've placed them inside a conditional comments block which only IE browsers understand.
Step B - 1: Resetting Default Styles
You may have noticed by this time, that though we haven't applied any CSS style to our document, our contents are not completely unstyled. These are the default browser styles and they're applied to every page loaded. To properly position and design our page, we must apply some basic styles to reset these default styles, thus creating a blank slate to apply our own styles and positioning. We're going to do that from inside our reset.css document.
Open reset.css document in your text editor. Then copy the following into the document:
@charset "utf-8";
/* CSS Document */
/*
~"~"~ ICONIFY ~"~"~ XHTML Template by palpaldal
TABLE OF CONTENTS ------------------
1. Style resetting codes (using Eric Meyer's resetter)
http://meyerweb.com/eric/tools/css/reset/
v1.0 | 20080212
2. Default styles of some common XHTML tags/elements.
*/
/* ----------------- Resetting browser defaults ------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body{
background: #e7e7e7;
color: #7c7c7c;
font: normal 12px/18px Arial, Helvetica, sans-serif;
}
ol, ul{list-style: none;}
ol li, ul li{
display: inline;
line-height: 0;
}
blockquote, q{quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after{
content: '';
content: none;
}
:focus{outline: 0;}
/* ----------------- Applying default styles to common XHTML elements ------------------- */
a{
color: #eaa000;
text-decoration: none;
}
a:hover, a:focus{border-bottom: 1px solid;}
abbr{
border-bottom: 1px dotted;
letter-spacing: 0.2em;
}
acronym{
border-bottom: 1px solid;
letter-spacing: 0.1em;
}
h1, h2, h3, h4, h5, h6{
color: #2e5bc3;
font: bold 100%/1.2 Arial, Helvetica, sans-serif;
margin: 18px 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: #2e5bc3;}
h1{font-size: 32px;}
h2{font-size: 28px;}
h3{font-size: 24px;}
h4{font-size: 20px;}
h5{font-size: 16px;}
h6{
font-size: 13px;
text-transform: uppercase;
}
p{
font-size: 12px;
line-height: 18px;
margin: 18px 0;
}
pre{
font-family: consolas, "Courier New", Courier, monospace;
font-size: 14px;
line-height: 18px;
}
blockquote{
font-size: 12px;
font-style: italic;
line-height: 18px;
margin: 18px 0;
padding-top: 6px;
}
blockquote+blockquote{
background: none;
padding: 0;
text-indent: 0;
}
cite{
display: block;
font-style: normal;
line-height: 18px;
margin: 18px 0;
text-align: right;
}
cite strong{display: block;}
strong,
b{font-weight: bold;}
em,
i{font-style: italic;}
del,
strike{text-decoration: line-through;}
small{font-size: .8em;}
big{font-size: 1.2em;}
code{
font-family: consolas, "Courier New", Courier, monospace;
padding: 2px 4px;
}
input[type="text"],
input[type="password"],
textarea{
background: #e7e7e7;
border: 1px solid #dbdbdb;
font-size: 12px;
line-height: 12px;
margin: 0;
padding: 8px 10px 7px;
}
input[type="text"]{
color: #666666;
font: normal 12px/1 Arial, Helvetica, sans-serif;
}
input[type="password"]{
color: #666666;
font: normal 12px/1 "Courier New", Courier, monospace;
}
textarea{
color: #666666;
font: normal 12px/18px Arial, Helvetica, sans-serif;
overflow: auto;
}
input[type="text"]:focus,
input[type="text"]:hover,
input[type="password"]:focus,
input[type="password"]:hover,
textarea:focus,
textarea:hover{
background-color: #dedede;
border-color: #bbbbbb;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
background: #fcfcfc;
border: 1px solid #b6b6b6;
color: #7c7c7c;
cursor: pointer;
display: block;
font-size: 12px;
height: 32px;
line-height: 12px;
padding: 0 20px 3px 20px;
}
button:focus,
button:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover{
background-color: #b6b6b6;
color: #fff;
}
hr{
background: #cdcdcd;
border: none;
border-bottom: 1px solid #f6f6f6;
border-top: 1px solid #f6f6f6;
display: block;
padding-top: 1px; /* Chrome having trouble with height larger than 1px*/
height: 0;
margin: 18px 0;
}
/* tables still need 'cellspacing="0"' in the XHTML markup */
table{
border: 1px solid #cecece;
border-right: none;
border-top: none;
border-collapse: collapse;
border-spacing: 0;
}
table caption{
caption-side: top;
font-style: italic;
padding: 2px;
text-align: right;
}
td,
th{
border: 1px solid #cecece;
border-bottom: none;
border-left: none;
padding: 4px;
}
First, we're declaring our character set UTF8 as the same we've used for our HTML.
In the resetting section, we're resetting default browsers styles and positioning. We're also applying our default body and text colors and details to the body selector. Now, if you preview your document in any browser you'll notice that our theme is slowly coming to life with our own colors and some styles we're applying from reset.css file.
Step B - 2: Position And Design Elements
We're going to use the grid960 library for easy positioning. And we'll use default.css file from now on to design and position our contents. Make sure you have properly linked 960.css file inside your index.html head section. We don't need to touch the 960.css file, we'll just use some classes from the 960.css library to easily position our contents.
Open default.css file in your text editor. Now copy paste the following into your default.css file.
@charset "utf-8"; /* CSS Document */ /* ~"~"~ ICONIFY ~"~"~ XHTML Template by palpaldal TABLE OF CONTENTS ------------------ 1. Common Theme Elements (usually inline elements) 2. Theme Structure 3. Pages Common Content's Styles a. Header b. Menu c. Breadcrumbs d. Footer e. Sidebar f. Pagination 4. Pagewise Styles a.Home b. Portfolio i. Column 2 ii. Column 3 iii.Column 4 c. Blog ii. Comments iii.Comment Form d. Contact i. Contact Form 5. Others */ /* <<<<<<<<<< 1. Common Theme Elements (usually inline elements) >>>>>>>>>> */ /* <<<<<<<<<< 2. Theme Structure >>>>>>>>>> */ /* <<<<<<<<<< 3. Pages Common Content's Styles >>>>>>>>>> */ /* <<<<<<<<<< a. Header >>>>>>>>>> */ /* <<<<<<<<<< b. Menu >>>>>>>>>> */ /* <<<<<<<<<< c. Breadcrumbs >>>>>>>>>> */ /* <<<<<<<<<< d. Footer >>>>>>>>>> */ /* <<<<<<<<<< e. Sidebar >>>>>>>>>> */ /* <<<<<<<<<< f. Pagination >>>>>>>>>> */ /* <<<<<<<<<< 4. Pagewise Styles >>>>>>>>>> */ /* <<<<<<<<<< a.Home >>>>>>>>>> */ /* <<<<<<<<<< b. Portfolio >>>>>>>>>> */ /* <<<<<<<<<< a. Column 2 >>>>>>>>>> */ /* <<<<<<<<<< b. Column 3 >>>>>>>>>> */ /* <<<<<<<<<< c. Column 4 >>>>>>>>>> */ /* <<<<<<<<<< c. Blog >>>>>>>>>> */ /* <<<<<<<<<< i. Comments >>>>>>>>>> */ /* <<<<<<<<<< ii. Comment Form >>>>>>>>>> */ /* <<<<<<<<<< d. Contact >>>>>>>>>> */ /* <<<<<<<<<< i. Contact Form >>>>>>>>>> */ /* <<<<<<<<<< 5. Others >>>>>>>>>> */
Step B - 2a: Three Main Sections
First, we're going to position the three main horizontal sections- #header, #content, and #footer of our theme. We'll do this by applying class .container_16 to every section as shown here:
<div id="header" <strong>class="container_16"</strong>>
<div class="inner">
...
</div><!-- end of .inner -->
</div><!-- end of #header -->
<div id="content" <strong>class="container_16"</strong>>
<div class="inner">
...
</div><!-- end of .inner -->
</div><!-- end of #content -->
<div id="footer" <strong>class="container_16"</strong>>
<div class="inner">
...
</div><!-- end of .inner -->
</div><!-- end of #footer -->
Now our three main sections are floating in the center of the page. .container_16 is the grid 16 of grid960. The total width of all our three sections is now exactly 940px. Our design, however, is 980px wide so we're going to apply (left+right: 20+20)px padding around our sections. We'll also apply some other styles to our sections. Type these rules inside your default.css file's 2. Theme Structure section or copy and paste them.
/* <<<<<<<<<< 2. Theme Structure >>>>>>>>>> */
#header{
background: #f1f1f1;
border: 1px solid #cdcdcd;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
padding: 0 10px;
margin-bottom: 20px;
}
#header .inner{
border: 1px solid #f9f9f9;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
margin: 0 -10px;
padding: 0 20px;
}
#content{
background: #f1f1f1;
border: 1px solid #cdcdcd;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom: 20px;
margin-top: 20px;
padding: 0 10px;
}
#content .inner{
border: 1px solid #f9f9f9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 -10px;
padding: 40px 20px;
}
#footer{
background: #f1f1f1;
border: 1px solid #cdcdcd;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom: none;
margin-top: 20px;
padding: 0 10px;
}
#footer .inner{
border: 1px solid #f9f9f9;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom: none;
margin: 0 -10px;
padding: 1px 20px;
}
All the rules for these three sections are pretty much the same. To #header, we're applying a background color and the outer border color (get these color values from your design with the eye dropper tool). And .inner elements for the inner white glow. Check your progress in your browser to make sure everything is being styled appropriately. Here our document's browser preview:
Step B - 2b: The Header Section
Slice and save the header's divider horizontal ruler graphic from your index.psd file. Use the following image as a guideline and use image slicing techniques as described in the Step A - 4. We'll use this bdr-bg.png image in numerous places throughout our theme.
/* <<<<<<<<<< a. Header >>>>>>>>>> */
#header .top{
background: transparent url(../../images/bdr-bg.png) left bottom repeat-x;
overflow: hidden;
padding: 10px 0 13px 552px;
}
#header .top li{
color: #ababab;
display: block;
float: left;
line-height: 24px;
margin-right: 10px;
}
#header .top li a{
border: none;
border-left: 1px solid #d0d0d0;
color: #ababab;
padding: 0 0 0 10px;
}
#header .top li:last-child{margin: 0;}
#header .top li:first-child a{border: none; padding:0;}
#header .top li a:focus,
#header .top li a:hover{color: #eaa000;}
#header .top form{
margin-left: 10px;
position: relative;
}
#header .top legend{display: none;}
#header .top input[type="text"]{
background: #d8d8d8;
border: 1px solid #bdbdbd;
height: 14px;
width: 160px;
padding: 4px;
font-size: 12px;
line-height: 12px;
}
#header .top label{
display: none;
left: 8px;
position: absolute;
top: 0px;
}
#header .top input[type="submit"]{
background: transparent url(../../images/srch-btn.png) 0 0 no-repeat;
border: none;
display: block;
font-size: 0;
height: 15px;
padding: 0;
position: absolute;
right: 4px;
text-indent: -999px; /* some browser shows 1px height texts like Safari even with font-size: 0 */
top: 4px;
width: 19px;
}
#header .top input[type="submit"]:focus,
#header .top input[type="submit"]:hover{background-position: -19px 0;}
#nav{padding: 20px 0;}
#logo a{border: none;}
Here's our recently styled header section:
OK, a summary of the most important code blocks or tricks, sequentially from top to bottom.
- #header .top - we're using this element to apply the divider image.
-
#header .top li - this applies a different text color for this block. And its large
line-heightwill help our text stay in the middle of the block. - #header .top li a - overriding the default link element's styling and applying a unique style for this block.
- #header .top li:last-child - selecting the last child of #header .top element and zeroing out its margin for perfect positioning.
- #header .top li:first-child a - overriding the styling of #header .top first child.
-
#header .top form - setting form's
positiontorelativefor itslabelto float appropriately . -
#header .top legend - hiding
legendelement from displaying - #header .top label - we're positioning the label to act like a field value for visitors to easily define why this field is for. By default we're hiding it, but we'll display it using JS.
- #header .top input[type="submit"] - for this button please slice and save our magnifier icon with the guideline shown in image B - 2bb.
Step B - 2c The Menu
First copy the following into your menu section. You can see what's changed by what's been highlighted:
<div id="nav" class="container_16 clearfix">
<div id="logo" class="grid_5 alpha">
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/images/logo.png" height="48" width="138" alt="ICONIFY" /></a>
</div><!-- end of #logo -->
<ul id="menu" class="grid_11 omega">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a href="#">Features</a>
<ul>
<li><a href="#">Home Pages</a></li>
<li><a href="#">Portfolio Pages </a> <span>»</span>
<ul>
<li><a href="portfolio.html">Column 2</a></li>
<li><a href="portfolio-col-3.html">Column 3</a></li>
<li><a href="portfolio-col-4.html">Column 4</a></li>
</ul>
</li>
<li><a href="#">Blog Pages</a> <span>»</span>
<ul>
<li><a href="blogs.html">Blog List</a></li>
<li><a href="blog-page.html">Blog</a></li>
</ul>
</li>
<li><a href="#">Fake Link 1</a></li>
<li><a href="#">Fake Link 2</a></li>
<li><a href="#">Fake Link 3</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blogs.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul><!-- end of #menu -->
</div><!-- end of #nav -->
We're applying class names container_16 and clearfix to the div#nav element to properly position our #logo and #menu. We're applying .grid_5 and .alpha to div#logo to give it a space equal to 5 grids and removing its left margins with the class .alpha. We're also applying .grid_11 and .omega to the ul#menu to give it a space equal to 11 grids and removing its right margins with the class .omega. Finally, we take care of the dropdown or multi-level menus. We'll design and position menu and multi-level menus with CSS.
Now slice and save your dropdown menu item's arrow inside your files->images folder as shown in image B - 2ca
Copy or type the following code inside your default.css file's menu section.
/* <<<<<<<<<< b. Menu >>>>>>>>>> */
#menu{
padding: 16px 0 0 290px;
width: 350px;
z-index: 999;
}
#menu li{
color: #0f5193;
font-size: 14px;
font-weight: bold;
margin-left: 14px;
position: relative;
}
#menu li.active a,
#menu li a:focus,
#menu li a:hover{border-bottom: 1px solid #88afd5;}
#menu>li.dropdown>a{
border: none;
background: transparent url(../../images/drop-arrow.png) right center no-repeat;
padding-right: 10px;
}
#menu>li.dropdown.active>a{border-bottom: 1px solid #88afd5;}
#menu li a{color: #0f5193;}
#menu ul{
background: #e4e4e4;
border: 1px solid #b7b7b7;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
top: -999px;
margin: 0;
padding: 1px 11px;
left: 0;
width: 100px;
z-index: 999;
}
#menu ul li{
background: #d5d5d5;
display: block;
font-size: 12px;
font-weight: normal;
line-height: 1.6;
margin: 0 -10px;
padding: 4px 10px 0;
}
#menu ul li span{font-size: 14px;}
#menu ul li:first-child{padding-top: 8px;}
#menu ul li:last-child{padding-bottom: 6px;}
#menu li:hover ul{top: 16px;}
#menu li:hover li ul,
#menu li li:hover li ul,
#menu li li li:hover li ul,
#menu li li li li:hover li ul{top: -999px;}
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li li li li:hover ul,
#menu li li li li li:hover ul{
left: 121px;
top: -2px;
}
#menu li li:hover ul{margin-left: 37px;}
#menu li li li:hover ul,
#menu li li li li:hover ul,
#menu li li li li li:hover ul{margin-left: 21px;}
#menu li li:hover>a{border-bottom: 1px solid #88afd5;}
What have we done here?
- #menu - extra padding to push menu items to the right.
-
#menu li - setting its
positiontorelativeto properly position the multi-level menus. - #menu>li.dropdown>a - applying the multilevel menu's arrow and giving its some extra padding for arrow graphic to fit perfectly inside the menu item.
-
#menu>li.dropdown.active>a - applying a fixed border to the
.activemulti-level menu item. - #menu ul - this is the actual multi-level menu element. So, we're applying some styles to decoration and position our multi-level menu items.
-
#menu ul li - its
backgroundcolor is showing as the actualbackgroundcolor of the multi-level menu. -
#menu ul li span - giving it a larger text size as the arrows look a little odd with
12px.
Note: our multi-level menus have extra margins on their left. Everything will be fine when we apply the superfish jQuery dropdown menu plugin a little later.
Step B - 2d: The Content Area
Now we're going to deal with our #content section's contents.
The image slider (jQuery.cycle plugin)
Position, slice and save your image slider's radios inside your files->images folder as shown in image B - 2da
Copy the following to your default.css file's a.Home subsection.
/* <<<<<<<<<< a.Home >>>>>>>>>> */
#slider{
background: #b5b5b5;
border: 1px solid #f8f8f8;
height: 336px;
margin-top: 10px;
padding: 1px;
width: 936px;
overflow: hidden;
position: relative;
}
#cyclePager{
position: absolute;
height: 18px;
overflow: hidden;
right: 20px;
bottom: 20px;
z-index: 99;
}
#cyclePager a{
background: transparent url(../../images/cycle-pager.png) 0 0 no-repeat;
display: block;
float: left;
height: 18px;
margin-left: 10px;
text-indent: -9999px;
width: 18px;
}
#cyclePager a:hover,
#cyclePager a.activeSlide{background-position: -18px 0;}
The styles are very simple. #slider's background color needs to be shown as the dark inner glow color. We'll achieve this by applying a 1px padding inside the #slider element. We apply position: relative to our #cyclePager so that it floats inside the #slider and on top of the slides. a.activeSlide is a class of current active slide, jQuery cycle plugin will automatically apply this class.
The 4 Column Promotional Items
Apply these class names to your .promo-col-4 element and its children:
<ul class="promo-col-4 <strong>container_16 clearfix</strong>">
<li <strong>class="grid_4 alpha"</strong>>
...
</li>
<li <strong>class="grid_4"</strong>>
...
</li>
<li <strong>class="grid_4"</strong>>
...
</li>
<li <strong>class="grid_4 omega"</strong>>
...
</li>
</ul><!-- end of .promo-col-4 -->
Here we're applying a width to every column equal to grid 4 and clearing the floating bug with the class clearfix.
Copy or type the following styles after your #slider code inside the a.Home section.
.promo-col-4{margin: 30px 0 40px;}
.promo-col-4 li{
display: block;
overflow: hidden;
}
.promo-col-4 li img{
display: block;
float: left;
margin-right: 10px;
}
.promo-col-4 li h5{margin: 4px 0;}
At this point your document should to render in browsers like the image shown below:
The 3 Column Promotional Items
Apply these class names to your .promo-col-3 element and its children:
<ul class="promo-col-3 <strong>container_12 clearfix</strong>">
<li <strong>class="grid_4 alpha"</strong>>
...
</li>
<li <strong>class="grid_4"</strong>>
...
</li>
<li <strong>class="grid_4 omega"</strong>>
...
</li>
</ul><!-- end of .promo-col-3 -->
..and copy this CSS rule after your #promo-col-4 codes inside a.Home section.
.promo-col-3{margin: 40px 0;}
We have two borders in our images: an inner glow and a darker border. We can apply these styles directly from Photoshop but it's far more flexible to achive the effect using CSS. We'll apply the inner glow from Photoshop and apply a class of .border to our images for those two borders. As an example, follow these guidelines on how I slice, apply the styles, then save them.
Our .promo-col-3 images' dimensions are 300x140. We'll start by creating a new document in Photoshop measuring 298x138px (we're leaving 1px from around image to fill those 1px with CSS). Now place your image, reduce its size by using transform. Hit Ctrl+A to select the entire canvas, goto Image->Crop. Now copy the layer styles from any one of our images, now apply that layer style to this new image. After doing all that all you should see the glow effect. Now save your image in your assets folder. Apply the same techniques for our future images using the following image as a reference.
Now apply a class of .border to the images, and paste this code inside your default.css file's 1. Common Theme Elements (usually inline elements) section.
/* <<<<<<<<<< 1. Common Theme Elements (usually inline elements) >>>>>>>>>> */
.border{border: 1px solid #b9b9b9;}
The Testimonial
Slice and save testi-arrow.png image inside your files->images folder as shown in image B - 2db.
Paste the following code after your #promo-col-3 codes inside the a.Home section.
.testimonial{margin: 40px 0;}
#content .testimonial .inner{
border: 1px solid #f3f3f3;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
position: relative;
margin: 0;
}
.testimonial blockquote{
background: #e5e5e5;
border: 1px solid #d9d9d9;
margin: 0;
padding: 20px;
}
.testimonial .arrow{
background: transparent url(../../images/testi-arrow.png) 0 0 no-repeat;
bottom: -10px;
display: block;
height: 12px;
position: absolute;
right: 20px;
width: 16px;
}
Here we are..
- #content .testimonial .inner - overriding some styles of .inner element.
- >.testimonial blockquote - setting the background and inner border color of the testimonial box.
- >.testimonial .arrow - linking testi-arrow.png image and positioning it appropriately.
Let's again check how things are rendering in the browser:
The Recent Projects Box
Apply these class names to your #recentProjects element's children:
<div id="recentProjects">
<div class="bar">
...
</div><!-- end of .bar -->
<ul <strong>class="container_16 clearfix"</strong>>
<li <strong>class="grid_4 alpha"</strong>>
...
</li>
<li <strong>class="grid_4"</strong>>
...
</li>
<li <strong>class="grid_4"</strong>>
...
</li>
<li <strong>class="grid_4 omega"</strong>>
...
</li>
</ul><!-- end of .container_16 -->
</div><!-- end of #recentProjects -->
Copy the following rules after your .testimonial codes inside a.Home section.
#recentProjects .bar{
border: 1px solid #e5e5e5;
margin: 0 0 18px 0;
}
#recentProjects h5{
color: #7c7c7c;
background: #f3f3f3;
border: 1px solid #f9f9f9;
margin: 0;
height: 38px;
text-align: center;
font-size: 14px;
line-height: 36px;
}
We've just finished designing and positioning our #content section's elements. In the browser our #recentProjects element should to render perfectly as shown below.
Step B - 2e: The Footer Area
Let's tackle the footer..
The #footer's .top Portion
Apply these class names to your .top element and its children:
<div class="top <strong>container_12 clearfix</strong>">
<div id="twitter" <strong>class="grid_8 alpha"</strong>>
...
</div><!-- end of #twitter -->
<ul class="social <strong>grid_4 omega</strong>">
...
</ul><!-- end of .social -->
</div><!-- end of .top -->
Paste the following code inside your default.css file's d. Footer subsection.
/* <<<<<<<<<< d. Footer >>>>>>>>>> */
#footer .top{
background: transparent url(../../images/bdr-bg.png) left bottom repeat-x;
overflow: hidden;
padding-bottom: 33px;
width: 940px;
}
#twitter{
background: transparent url(../../images/twitter-bird.png) 0 center no-repeat;
margin-top: 30px;
padding-left: 50px;
width: 570px;
}
#twitter h2,
#twitter .profileLink{display: none;}
#twitter li{
display: block;
line-height: 18px;
}
.social{
background: transparent url(../../images/v-bdr-bg.png) 1px 0 repeat-y;
height: 32px;
margin: 30px 0 0 0;
padding: 0 0 0 10px;
overflow: hidden;
}
.social li{
display: block;
float: left;
line-height: 18px;
margin-right: 10px;
}
.social li:last-child{margin-right: 0;}
.social h5{
color: #7c7c7c;
font-size: 14px;
font-weight: normal;
line-height: 32px;
margin: 0 0 0 62px;
width: 70px;
}
.social a{border: none;}
Here we are..
- #footer .top - using its background property to apply our border.
- #twitter - applying our twitter bird as a background image. We're also overriding some styles and hiding them (our twitter jQuery plugin will append them in our document).
- .social - we're applying vertical border with this element. For your vertical border, slice and save this graphic from our index.psd file as shown in image B - 2ea.
At this point our document should to render as follows. Please note that our twitter section is empty as we've not applied any scripts to our document.
The #footer's .content Portion
Apply these class names to your .content element and its children:
<ul class="content <strong>container_12</strong>">
<li <strong>class="grid_4 alpha"</strong>>
...
</li>
<li <strong>class="grid_4"</strong>>
...
</li>
<li <strong>class="grid_4 omega"</strong>>
...
</li>
</ul><!-- end of .content -->
Paste the following code after your .top rules inside d. Footer section.
#footer .content{
margin-top: 30px;
width: 940px;
overflow: hidden;
}
#footer .content .grid_4{
background: transparent url(../../images/v-bdr-bg.png) right top repeat-y;
width: 287px;
padding-bottom: 500px;
padding-right: 20px;
margin-bottom: -500px;
}
#footer .content li:last-child{
padding-right: 0;
background: none;
width: 286px;
}
#footer .content h5{
color: #7c7c7c;
margin-top: 0;
}
#footer .blogList li{
display: block;
line-height: 18px;
margin-bottom: 20px;
}
#footer .blogList li:last-child{margin: 0;}
#footer .blogList img{
display: block;
float: left;
margin: 0 10px 4px 0;
}
#footer .blogList h5{
color: #2e5bc3;
margin: 0;
}
#footer .blogList p{margin: 10px 0;}
#toTop{
background: transparent url(../../images/to-top.png) 0 0 no-repeat;
border: none;
cursor: pointer;
display: block;
height: 10px;
margin: 20px auto;
width: 11px;
}
#toTop:focus,
#toTop:hover{background-position: -11px 0;}
#footer .content .grid_4 overrides the default .grid_4 width and applies some other styles.
For #toTop's arrow slice, save the arrow from our Photoshop file as shown in image B - 2eb.
Copy the following code inside your default.css file's 1. Common Theme Elements (usually inline elements) section.
/* <<<<<<<<<< 1. Common Theme Elements (usually inline elements) >>>>>>>>>> */
.border{border: 1px solid #b9b9b9;}
.list{margin: 18px 0;}
.list li{
display: block;
line-height: 18px;
margin-bottom: 4px;
}
.list li a{color: #7c7c7c;}
.list li a:focus,
.list li a:hover{color: #eaa000;}
.btn{line-height: 18px;}
You may have noticed that we've applied a class of .list to our Categories item inside .content section. This .list is a common inline class and we can use it to display other list items in any other pages. And our final footer element looks like this:
Final Touches
We've successfully designed our homepage, and our theme works fine in all the modern browsers except IE. For IE, we need some special CSS since they don't support some CSS pseudo classes. We're going to write some IE specific code to handle these issues.
If you preview your document by this point in IE8 then you'll find this misrendering:
To solve these misrenderings copy or type the following rules inside your ie8.css file.
/* as IE8 having trouble supporting CSS pseudo class ":last-child" */
#header .top li+li+li+li{margin: 0;}
#footer .inner .content li+li+li{
padding-right: 0;
background: none;
width: 286px;
}
.social li+li+li+li+li{margin-right: 0;}
.popularPost ul li+li{margin-right: 0;}
If you preview your document in IE7 you'll find some browser misrenderings as in IE8 + more
To solve these please copy or type the following rules inside your ie7.css file.
/* as IE7 having trouble supporting CSS pseudo class ":last-child" */
#header .top li+li+li+li{margin: 0;}
#footer .inner .content li+li+li{
padding-right: 0;
background: none;
width: 286px;
}
.social li+li+li+li+li{margin-right: 0;}
#menu ul li:last-child{padding-bottom: 6px;}
#footer .content .grid_4{
padding-bottom: 0;
margin-bottom: 0;
}
hr{
background: #cdcdcd;
border: none;
border-bottom: 1px solid #f6f6f6;
border-top: 1px solid #f6f6f6;
display: block;
padding: 0;
height: 3px;
margin: 18px 0;
}
.popularPost ul li+li{margin-right: 0;}
#commentForm input[type="text"],
#commentForm textarea,
#contactForm input[type="text"],
#contactForm textarea{margin-left: -80px;}
Note: we're targeting some elements which don't exist, yet. We'll use these selectors/elements later.
Step - C Defining Interactions with JavaScript
Download and link these JavaScript libraries. jQuery JavaScript Library v1.4.2, jQuery.prettyPhoto v-2.5.6, and jQuery.cycle v-2.80.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" />
<meta name="description" content="A brief description of this website or your business." />
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" />
<title>ICONIFY :: Welcome</title>
<!-- Favorites icon -->
<link rel="shortcut icon" href="assets/favicon.ico" />
<!-- CSS Files -->
<!-- Resetting all default browser markups and styles.-->
<link rel="stylesheet" type="text/css" href="files/codes/css/reset.css" media="all" />
<!-- 960 Grid ( 12+16 cols) System for easy and flexible markups.-->
<link rel="stylesheet" type="text/css" href="files/codes/css/960.css" media="all" />
<!-- Default and template specific styles. -->
<link rel="stylesheet" type="text/css" href="files/codes/css/default.css" media="all" />
<!-- prettyPhoto jQuery plugin's CSS styles-->
<link rel="stylesheet" type="text/css" href="files/codes/css/prettyPhoto.css" media="all" />
<!-- JavaScript Files -->
<!-- jQuery JavaScript Library Scripts -->
<script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery-1.4.2.min.js"></script>
<!-- cycle plugin jQuery library -->
<script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery.cycle.all.min.js"></script>
<!-- prettyPhoto library -->
<script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery.prettyPhoto.js"></script>
<!-- This codes starts/initializes all js functionalities throughout this template. It's also some mini third party js libraries. -->
<script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/codes/js/init.js"></script>
<!-- Weird IE specific codes -->
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="files/codes/css/ie7.css" media="all" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="files/codes/css/ie8.css" media="all" />
<![endif]-->
</head>
Now open your init.js file and copy the source from the following plugins:
- jQuery.easing plugin
- jQuery.scrollTo plugin
- jQuery.supersubs dropdown menu plugin
- jQuery.superfish dropdown menu plugin
- jQuery.twitter plugin
- jQuery.scrollToTop plugin
- custom jQuery.tinyValidator validates form fields
- Theme Script initialization function/codes
All the above libraries are third party. We're combining them into a single file for fewer HTTP requests. Among them tinyValidator is a mini validation plugin which I've developed. Now we're going to actually start/initialize our scripts. Copy the following code inside your init.js file's Site Initialization JavaScript Codes section.
/* <<<<<<<< Site Initialization JavaScript Codes >>>>>>>> */
;(function($){
$(document).ready(function(){
$('.border').parent('a').css('border', 'none');
});
/* jQuery ScrollToTop plugin */
$(function() { $("#toTop").scrollToTop({speed:1000,ease:"easeInOutQuad",start:600}); });
/* cycle plugin function declarations using 'cycle.js' jquery plugin */
$(document).ready(function(){
if ($('#cycle').length > 0){
$('#cycle').cycle({
fx: 'scrollLeft',
speed: 500,
timeout: 8000,
randomizeEffects: false,
easing: 'easeInOutQuad', //jquery.easing library/plugin is required for this functionality
next: '',
prev: '',
pager: '#cyclePager',
cleartypeNoBg: true
});
}
});
/* altering search form label and using it's label as field's value */
$(document).ready(function(){
var $searchTerm = $('#searchTerm');
if($searchTerm.val() == ''){
$('label', '#header').css('display', 'inline');
}
$searchTerm.focus(function(){
$searchTerm.siblings('label').hide();
})
.blur(function(){
if($searchTerm.val() == ''){
$searchTerm.siblings('label').show();
}
});
});
/*
* dropdown menu function using 'superfish.js' and 'supersubs.js' jquery plugin
*/
$(document).ready(function(){
if(jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7){
$('ul', '#nav').superfish({
delay: 1000,
animation: {opacity: 'show'},
speed: 800,
autoArrows: false
})
}
else{
$('ul', '#nav').supersubs({
minWidth: 8,
maxWidth: 10,
extraWidth: 0
}).superfish({
delay: 1000,
animation: {opacity: 'show'},
speed: 800,
autoArrows: false
})
}
});
/*
* initializting twitter plugin
* change 'userName' variable with yours and you are done.
* you can also alter other settings as you need them.
*/
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "jquery",
numTweets: 1,
loaderText: "Loading tweets...",
slideIn: true,
slideDuration: 750,
showHeading: true,
headingText: "",
showProfileLink: true,
showTimestamp: true
});
});
})(jQuery);
We're placing all our site initialization codes inside an anonymous function.
-
In the first block we're removing hover state border from images with a class
.border. - Initializing jQuery scrollToTop plugin with our #toTop element.
- Making sure #cycle is available and then initializing the cycle plugin.
- Altering search form label and using its label as field's value.
- Initializing dropdown menu function using 'superfish.js' and 'supersubs.js' jquery plugin
- Initializing twitter plugin. You can show your tweet by only changing the userName variable.
Conclusion
Phew! We've finsihed the most substantial part of our coding phase. You may notice that some practices or techniques have been exaggerated, but these were only for demonstration purposes and little else. We'll work on finishing up this theme in the next part. Thank you so much for reading!
