All posts tagged Wordpress

Install WordPress locally in Windows XP – (with WampServer)

by The Web Squeeze on January 4, 2010 in Tutorials with 20 Comments

The most effective way of managing your website or blog is to be able to perform, update, troubleshooting for errors and optimizing images, codes and scripts in an efficient way.  What I do with all the websites that I design and maintain is to have all that process done locally on my PC instead of directly from the hosting server.  Not only is the access time faster and convenient, you can also do thorough testing of your website before putting them live online. For that, I created this tutorial on “How to install WordPress locally in Windows XP”.

Requirements

Before we start, lets check to see what the basic requirements are that we need for this tutorial?

Setting up WampServer

The great thing about WampServer is it makes our job easier by installing Apache server, MySQL database and PHP all at the same time. Don’t worry about installing or how these will interact with each other.

  • Download the latest version of Wamp Server- as of this writing it is of Version 2.0i. (Approximately 16 MB)
  • Run the setup process by double clicking the downloaded WampServer2.0i.exe file.

  • Click on “Next” and check the radio selection “I accept the agreement” and press “Next”.

  • The default path for WampServer is “C:\wamp“. You can change it if you want by clicking the “Browse” button but I do suggest you leave this in the default setting and press “Next“.

  • Select both “Create a Quick Launch Icon” and “Create a Desktop Icon” and press “Next“.

  • Click “Install” to begin with the installation.

  • A popup box will appear and ask you to choose your default browser. Please choose your default browser to which the wamp server will be associated. I do suggest that you use Mozilla Firefox as there are so many plugins that you can add to this browser to make your programming world become more interesting and efficient. Click “Yes” to continue.

  • “Unblock” the Windows Security Alert if it asks you.
  • Just leave the default values as such for the “PHP Mail Parameters” and click “Next“.

  • Click “Finish” to exit the setup (Make sure that the “Launch WampServer 2 now” option is checked)

  • Now you will see a “speedometer- like icon” on the notification area of the taskbar (beside your taskbar clock).

  • Just wait until the speedometer is fully white (Represents its fully ready).
  • If your WampServer is fully ready, you can skip the next step and continue reading “Setting Up phpMyAdmin“.
  • If it is not, that means some other server service is running in the background and the service with WampServer is clashing.  Most probably you have windows web server (Internet Information Services – IIS) running at the time of the WampServer installation. To solve this, we need to stop the IIS. Same things goes if you want to start IIS services, you must stop the WampServer services.
  • To stop the IIS service, go to Start > Run > and type services.msc and hit the enter button. This will opens up a services control panel.

  • On your right hand side, navigate and find a service called “IIS Admin“. Right click on it and select “Stop“. This will stop the IIS services.

  • Now you can restart your WampServer services by single clicking on the WampServer icon, and select “Restart All Services“.

  • You can now see your speedometer-like icon is a full white color (Represents its fully ready).

  • Your Wampserver is now ready.

Setting Up phpMyAdmin

Setting up your database password

  • Single click on the WampServer icon, and select phpMyAdmin.

  • Select “Privileges” from the top menu.
  • For experimental purposes, we will use the default user i.e. root/localhost.
  • Click on the edit privileges button for the user “root” with the “localhost” host. This will open up the “Global privileges” setting and navigate to the “Change password” portion.

  • Type in your preferred password and again to conform them. Click the “Go” button to apply the changes.

  • You have successfully set a password for your MySQL database. In order for you to access your database, you will need to supply/remember this password.

Setting up phpMyAdmin configuration setting

  • Once you have setup your database password, we need to enter  this information into phpMyAdmin as well. We do that by single clicking the WampServer icon and selecting phpMyAdmin, but you will get the following error.

  • Before we do that, we need to create a folder named “config” in phpMyAdmin top level directory (C:\wamp\apps\phpmyadmin3.2.0.1\config)

  • Once that folder is ready, navigate to: http://localhost/phpmyadmin/setup/ in your browser.
  • The page will inform you that “There are no configured servers” and ask you to create a new server. Click on the “Create Server” button.
  • This will bring you to the “Add New Server” configuration page. If you are not in the “Basic settings” menu, then select “Basic settings” from the top menu.
  • Don’t bother about other things on the form. We just need to set our database password that we created earlier in this tutorial. Find a field named “Password for config auth” and throw in your password in that field and click the save button.

  • This will bring you to the page where the config file will be automatically generated (in your C:\wamp\apps\phpmyadmin3.2.0.1\config) but first, you have to make sure you click the save button again to make sure the config file generated successfully.

  • Once you have saved it, go into your config folder that you created earlier (C:\wamp\apps\phpmyadmin3.2.0.1\config). There you will see a file named “config.inc“. What we are going to do with this file is to copy and paste it into our phpmyadmin root directory (C:\wamp\apps\phpmyadmin3.2.0.1). This will override the existing file on that directory. Just click “Yes” to replace them.

  • All right… we are almost there! Now let’s test our phpmyadmin. Single click on the WampServer icon, and select phpmyadmin. If you can see the phpmyadmin login page, that means you have successfully setup your phpmyadmin. Congratulation! You can now login with the username: root with your password.

  • Attention! For safety and security reasons, you need to delete the folder “config” (C:\wamp\apps\phpmyadmin3.2.0.1\config) that we created earlier. Just delete the entire folder as it will do you no harm. Go ahead and delete them.
  • The next step is setting up WordPress but before we do that, we need to prepare the database that will be used by WordPress. Let’s create a database called “wordpress”, and don’t bother about the table creation because WordPress will automatically create that for you in the WordPress setup process.

  • Ok, we are officially finished with WampServer and phpMyAdmin. Now it is time for us to run the “famous five minute WordPress installation” process. Yes, you’ve heard me! It takes only five minute of your time to install them.

Setting up WordPress

  • Download the latest stable copy of WordPress (As of this writing it is WordPress 2.8.6)
  • After downloading, extract the files.
  • Copy and paste the WordPress folder into your www folder (C:\wamp\www).

  • Now, single click on the WampServer icon, and select localhost, or you could manually type this address in your browser address bar: http://localhost/
  • As you can see, you have a new project called wordpress (which is the extracted wordpress folder that we copied and pasted earlier). If you have more than one project inside the www folder, it will be listed here as well. So it is advisable to create a new folder for each of your projects for easy management.

  • Click on the “wordpress” project under “Your Projects” in order for us to continue with our wordpress setup. This will bring us to creating our wordpress configuration file.
  • Click on “Create a configuration file” and then click on “Let’s Go“.

  • Enter the value of database name, username and password (which you gave before in the PhpmyAdmin)

  • Please remember the database name is the one that we created earlier which is “wordpress” and the username is “root” which is the default user for MySQL database. Don’t touch the “Database Host” and “Table Prefix“. Leave it as such and press “Submit“.
  • Now click on “Run the Install“.

  • Enter your blog title and e-mail. No need to select the box which says “Allow my blog to appear in search engines like Google and Technorati” since this is a local install.
  • Now click on “Install WordPress“.

  • Note that password carefully! It is a random password that was generated for you. We will change this later on in the next step by logging in with the information given.

  • Now log into WordPress using the username “admin” and the password you got from the previous step.(don’t select “remember me“, because we are going to change this password later on)

  • Now you will see a reminder notice to change your password as below.

  • Now click on “Yes, Take me to the Profile Page“.
  • Here you can choose your own password (all the way down the form) along with color schemes, display names, email addresses, website addresses, biographies and many more. Once you have updated this information, click “update profile“.
  • Now you can use this WordPress Installation same as the one you have online.
  • You can write posts, install themes, test-drive plugins and most probably everything you can do in this local install of WordPress.
  • Enjoy blooging!

File Synchronization

Now you have the updated version of your website/wordpress blog in your localhost. It is time for you to synchronize them with the online version.

You could do that in various way, but the most effective, user-friendly way that I have found so far is by using FTP (provided you have web hosting that will allow FTP connection).
We are going to use the most popular FTP application amongst web designer/developer, so far as I know, which is FileZilla (Client).

  • Install FileZilla by double clicking the downloaded exe file. After successfully installing it, we need to do a
    little configuration in order for us to establish a connection to our FTP account/hosting site. We do that by going to File >
    Site Manager. This will open a “Site Manager” popup window setting.

  • Click on the “New Site” button and name your connection “WordPress” or whatever you like. On the right hand side,
    click on the “General” tab and put in your website information (Host, Logontype – set to normal, User and Password).
    Once done, click on the “Ok” button to save the configuration or “Connect” to start connecting to your FTP account.
    You can connect to your FTP account manually by going to the file menu and again selecting File > Site Manager, select your
    connection and click on the “Connect” button.

  • As you can see, the window is divided into two sections, left and right. Left column represents your local computer
    (localhost) and the right column represents your remote site (Hosting). All you need to do is drag your files from the left
    column to the right column and your file synchronization process is finished.

Bonus – Why aren’t my Permalinks working?

  • You probably used Permalinks, aka PreetyURLs, in your online version of your wordpress. (To learn more on PreetyURLs, I have created a tutorial specifically for learning basic htaccess. Click here to learn). Normally, this feature is automatically enabled by most web hosting but not local WampServer. In order for you to make sure the offline version of your wordpress (localhost) is functioning exactly like your online version of your wordpress, then this is the simple configuration that you should make into your Apache “httpd.conf” file.
  • Single click on the WampServer icon, and select Apache > httpd.conf (This is the main Apache HTTP server configuration file. It contains the configuration directives that give the server its instructions)

  • The file will be opened up in txt format (notepad). We need to make sure that mod_rewrite is enabled. We do this by searching for the text “mod_rewrite” or you can directly find this line of code: “LoadModule rewrite_module modules/mod_rewrite.so“.
  • At the moment, this line is commented and we need to throw away the commenting symbol which is “#” in order for our PreetyURLs to be working. Uncomment the line, save the file, restart all the WampServer services and we are done!

From Photoshop to WordPress – Part II – Coding

by The Web Squeeze on October 19, 2009 in Tutorials with 29 Comments

Here is Part II of our “From Photoshop to WordPress” series. In Part I – Design, we looked at how to make a nice grungy-looking blog design in Photoshop. Today, we’ll be looking at slicing that design and coding it in HTML.

The great thing about Photoshop (and most high-end graphics programs) are the layers. Putting elements on different layers will help you tremendously when comes the time to slice that design up for the web. And so here we go. Let’s get this thing rolling.

Laying down the mark-up

So, let’s start off with some default code for a basic 2 column layout with header and footer. Our layout will be a fixed layout, meaning that it will not stretch depending on the visitors’ browsers’ resolution.

<!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" lang="en-CA" xml:lang="EN-CA">

<head>
	<title>Some title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<div id="header">
        <div id="navigation"></div>
        <div id="branding"></div>
        <div id="categories"></div>
</div>

<div id="content"></div>

<div id="sidebar"></div>

<div id="site-info"></div>

</body>
</html>

It can’t get more simple than that. It’s pretty bare-bone and that’s how we start the mark-up, just like we did in the tutorial A websites’ structure from A to Z, then we will go and put all our content in and then we will deal with styling it and adding backgrounds, colors and fonts.

<!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" lang="en-CA" xml:lang="EN-CA">

<head>
	<title>Some title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<!-- header -->
<div id="header">

<!-- navigation -->
<div id="navigation">
	<ul class="left">
		<li><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Archives</a></li>
		<li><a href="">Contact</a></li>
	</ul>
	<ul class="right">
		<li><a href="" class="rss-link">RSS</a></li>
	</ul>
</div>
<!-- END OF navigation -->

<!-- branding -->
<div id="branding"><h1>Eroded by Time</h1></div>

<!-- categories nav -->
<div id="categories">
	<ul>
		<li><a href="">CatOne</a></li>
		<li><a href="">CatTwo</a></li>
		<li><a href="">CatThree</a></li>
		<li><a href="">CatFour</a></li>
		<li><a href="">CatFive</a></li>
	</ul>
</div>
<!-- END OF catories nav -->

</div>
<!-- END OF header -->

<!-- content -->
<div id="content">

	<!-- post featured -->
	<div class="post featured">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p>Donec condimentum eros a tellus. Phasellus mauris. Aenean magna. Pellentesque enim ante, hendrerit
sed, luctus ut, tempor in, lacus. Aliquam erat volutpat. Nam semper enim et enim. Sed sagittis nisi a urna. Proin mattis
neque. Vivamus faucibus ipsum eu augue. Proin diam dui, posuere eu, posuere eu, elementum vel, diam.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post featured -->

	<!-- post -->
	<div class="post">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post -->

	<!-- post -->
	<div class="post">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post -->

	<!-- page-navigation -->
	<div class="page-navigation">
		<div class="left"><a href="">Older Posts</a></div>
		<div class="right"><a href="">Newer Posts</a></div>
	</div>
	<!-- END OF page-navigation -->
</div>
<!-- END OF content -->

<!-- sidebar -->
<div id="sidebar">

	<!-- sidebar-ads -->
	<div class="sidebar-ads">
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
	</div>
	<!-- END OF sidebar-ads -->

	<!-- sidebar-search -->
	<div class="sidebar-search">
		<form action="">
			<p><input type="text" name="search" /> <input type="submit" value="Search"/></p>
		</form>
	</div>
	<!-- END OF sidebar-search -->

	<!-- sidebar-tags -->
        <h4>Tags</h4>
	<div class="sidebar-tags">
		<ul>
			<li><a href="">Bloggers</a></li>
			<li><a href="">CSS</a></li>
			<li><a href="">Miscelaneous</a></li>
			<li><a href="">Standards</a></li>
			<li><a href="">Web Design</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-tags -->

	<!-- sidebar-pop-posts -->
        <h4>Popular Posts</h4>
	<div class="sidebar-pop-posts">
		<ul>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-pop-posts -->

	<!-- sidebar-comments -->
        <h4>Recent Comments</h4>
	<div class="sidebar-recent-com">
		<ul>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-comments -->

</div>
<!-- END OF sidebar -->

<!-- site-info -->
<div id="site-info">

	<div class="left">
		<p>Copyright 2008 - Karinne Legault</p>
		<p>Hosted by <a href="">Hosting Company</a> / Powered by <a href="http://www.wordpress.org">Wordpress</a></p>
	</div>
	<div class="right">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Archives</a></li>
			<li><a href="">Contact</a></li>
			<li><a href="">RSS</a></li>
		</ul>
	</div>
</div>
<!-- END OF site-info -->
</body>
</html>

There! Mark-up is pretty much done. We will probably come back to it to either adjust/change the names of some of our classes or ID’s, or even add some but for now, this has pretty much all the important components.

Slicing it up

Back in the days when tables for layout were everybody’s business, we could go in Photoshop and use the Generate HTML with the slicing tool. But then that generates an insane amount of images and deprecated code so we will be staying well clear of that and instead, we’ll do it by hand.

I can hear the exasperated sigh’s from here. The way I look at it, we only need to slice/copy/cut 6 images. Yep… not 50, like the generator would normally give you, but 6, six, seis. One for the main grungy background (1), one for the top navigation (2), one for the header (3), one for the logo (4), one for the category menu (5) and one for the footer (6). That’s it. The rest are icons that we have already downloaded from pinvoke so we don’t need to touch those.

Ready? Let’s get started!

Our main background

As I previously stated, the great things about Photoshop (and most advanced graphics programs) is the layers and the ability to hide/show them at will. So in order to get out background, we’ll hide pretty much everything in our document.

Now it’s just a matter of flattening the layers and saving it to main-bg.jpg

Header

Now we need to get that checkered background. And we want it as a transparent file so the grunge from our main background image will show through. So, like we did with the main background, we’ll hide all the layers except those making the grungy checkered image.

So you’ll end up with something like this

To get our image, we’ll change the Canvas Size to 1000px x 235px

And save that image as a Transparent PNG named header-bg.png

Top navigation

Since our top navigation has a slight gradient effect, we need a background image for that as well. We don’t need a big image for this. Only 5px x 55px will suffice.

So you would end up with this and save it as top-nav-bg.jpg

Branding

Here want simply the title to show up against a transparent background. So what we will do is open up a new document of 350px x 60px

and put our title in there using the same font (Times New Yorker – 48px) and save that as branding.png

Category menu

Pretty simple now that we’ve done a few already. Here we’ll hide everything except our image that makes up that grungy background.

Now, by hitting Command+Mouse click (ctrl+right mouse-click in Windows) on that Layer 7 copy, it automagically hightlights everything I need.

Then I copy, create new file, paste and voilà, my category background. I just need to set the Opacity to 65% and I’m off to the races. Let’s save that one as cat-nav-bg.png

Footer

For our footer, we’ll be using the same technique we used for our category navigation background. So ctrl+right-click on the footer layer, and paste in a new file, change the opacity to 15% and we’re done. We’ll save this last one as footer-bg.png.

And now we’ve got all our images so we’re ready to go ahead and put it all together.

Creating the stylesheet and putting it all together

First thing we need to take into consideration is that our original canvas was 1000 pixels in width so we will want to contain certain parts of our content in a 960 pixels space. We will make adjustments to our mark-up as we go along and add wrapper div’s.

First things first, let’s add a link to our stylesheet in the our mark-up:

<head>
	<title>Some title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<link rel="stylesheet" media="screen" href="css/styles.css" />

</head>

Now let’s remove the default borders around the page. We’ll also go ahead and add our main background to the body element as well as font sizes and family, and text colors.

html, body {
	margin: 0;
	padding: 0;
}

body {
       font: 12px/16px Verdana, Geneva, sans-serif;
       color: #000;
       background: url(../i/main-bg.jpg) repeat 0 0;
}

Header

For our header, all we need to set here is the grungy checkered background and we’ll center it to stay in our 960px width with the rest of the content.

/*** header
****************************************/
#header {
	background: url(../i/header-bg.png) no-repeat top center;
	height: 235px;
	overflow: hidden;
}

Notice that we’ve set a height (235px) as well as the overflow: hidden property to clear the floats from our navigation.

Navigation

Our top navigation has a slight gradient which we have sliced up from our Photoshop file and we have one part of our navigation on the left and one to the right. Not sure if you’ve notice in the mark-up but those 2 classes that I have used in there (.left and .right), I also use them in a few more spots so we’ll set up a “Common class and ID” section in our CSS where we will put those 2 classes as well as styles for links, etc….

/*** common styles
****************************************/
.left {
	float: left;
}

.right {
	float: right;
}

Since we will want to contain our navigation in a 960px space, we will add a wrapper div to our navigation.

<!-- navigation -->
<div id="navigation">
<div id="navigation-wrapper">
	<ul class="left">
		<li><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Archives</a></li>
		<li><a href="">Contact</a></li>
	</ul>
	<ul class="right">
		<li><a href="" class="rss-link">RSS</a></li>
	</ul>
</div>
</div>
<!-- END OF navigation -->

Our black bar with the gradient we want to have it stretch the width of the browsers’ viewport so it’s only the links that we want to contain.

/*** navigation
****************************************/
#navigation {
	background: #2c2c2c url(../i/top-nav-bg.jpg) repeat-x 0 0;
	height: 55px;
}

#navigation-wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 15px 0 0 0;
}

#navigation-wrapper .left {
	width: 400px;
}

#navigation-wrapper .right {
	width: 80px;
	text-align: right;
}

#navigation-wrapper ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation-wrapper ul li {
	float: left;
	display: inline;
	margin: 0 20px 0 0;
	padding: 0;
}

#navigation-wrapper ul li a {
	color: #fff;
	font: 14px Georgia, serif;
	text-decoration: none;
	text-transform: uppercase;
}

#navigation-wrapper ul li a:hover {
	text-decoration: underline;
}

#navigation-wrapper ul li a.rss-link {
	background: url(../i/icons/feed.png) no-repeat 0 0;
	padding: 0 25px;
}

Branding

Our heading has that square tiled background as well as the custom font so we’ll be using an image for this. We’ll set our image in an &ht;h1<>/h1< for SEO purposes and for the visually impaired, the text we will put in the >img alt="text" /< will be read.

So let’s go ahead and change this line here:

<!-- branding -->
<div id="branding"><h1>Eroded by Time</h1></div>

…to incorporate our logo and a link back to the home page as well.

<!-- branding -->
<div id="branding"><h1><a href=""><img src="i/branding.png" width="350" height="60" alt="Eroded by Time" />&amp;l;/a></a></h1></div>

Category menu

This is where our categories for our blog posts will be showing up on our pages. In our “Slicing up” section, we created a jagged background that we’ll be repeating horizontally. Like our navigation at the top, we will want to contain this in a 960px zone and for this we’ll need to add a wrapper div to do this.

<!-- categories nav -->
<div id="categories">
<div id="categories-wrapper">
	<ul>
		<li><a href="">CatOne</a></li>
		<li><a href="">CatTwo</a></li>
		<li><a href="">CatThree</a></li>
		<li><a href="">CatFour</a></li>
		<li><a href="">CatFive</a></li>
	</ul>
</div>
</div>
<!-- END OF categories nav -->

We’ll use much of the same code as with our nav.

/*** cateogies
*******************************/
#categories {
	background: url(../i/cat-nav-bg.png) repeat-x 0 0;
	height: 80px;
}

#categories-wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}

#categories-wrapper ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#categories-wrapper ul li {
	float: left;
	display: inline;
	margin: 0 20px 0 0;
	padding: 0;
}

#categories-wrapper ul li a {
	color: #363636;
	font: bold 18px Verdana, Geneva, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
}

#categories-wrapper ul li a:hover {
	text-decoration: underline;
}

And that concludes our header section! Hooray!

On to the next section: content

Content

Before we start diving into our content, we’ll need to add another wrapper div around the content and sidebar to contain both those elements in a 960px area.

<!-- END OF header -->

<!-- content-wrapper -->
<div id="content-wrapper">

<!-- content -->
<div id="content">

	<!-- post featured -->
	<div class="post featured">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p>Donec condimentum eros a tellus. Phasellus mauris. Aenean magna. Pellentesque enim ante, hendrerit
sed, luctus ut, tempor in, lacus. Aliquam erat volutpat. Nam semper enim et enim. Sed sagittis nisi a urna. Proin mattis
neque. Vivamus faucibus ipsum eu augue. Proin diam dui, posuere eu, posuere eu, elementum vel, diam.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post featured -->

	<!-- post -->
	<div class="post">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post -->

	<!-- post -->
	<div class="post">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post -->

	<!-- page-navigation -->
	<div class="page-navigation">
		<div class="left"><a href="">Older Posts</a></div>
		<div class="right"><a href="">Newer Posts</a></div>
	</div>
	<!-- END OF page-navigation -->

</div>
<!-- END OF content -->

<!-- sidebar -->
<div id="sidebar">

	<!-- sidebar-ads -->
	<div class="sidebar-ads">
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
	</div>
	<!-- END OF sidebar-ads -->

	<!-- sidebar-search -->
	<div class="sidebar-search">
		<form action="">
			<p><input type="text" name="search" /> <input type="submit" value="Search"/></p>
		</form>
	</div>
	<!-- END OF sidebar-search -->

	<!-- sidebar-tags -->
	<div class="sidebar-tags">
		<ul>
			<li><a href="">Bloggers</a></li>
			<li><a href="">CSS</a></li>
			<li><a href="">Miscelaneous</a></li>
			<li><a href="">Standards</a></li>
			<li><a href="">Web Design</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-tags -->

	<!-- sidebar-pop-posts -->
	<div class="sidebar-pop-posts">
		<ul>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-pop-posts -->

	<!-- sidebar-comments -->
	<div class="sidebar-pop-posts">
		<ul>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-comments -->

</div>
<!-- END OF sidebar -->

</div>
<!-- END OF content-wrapper -->

<!-- site-info -->
<div id="site-info"></div>

And our CSS for our content-wrapper is basically like our navigation and categories menus.

#content-wrapper {
	margin: 20px auto 20px;
	width: 960px;
}

Notice the margin: 20px auto 20px;? I’m applying a 20px margin to the top and bottom but the left and right have auto so it will center.

Now we are ready to style the content area. Nothing very complicating is happening to this apart from floating the whole thing to the left. If you’ve never use the float property in CSS, no better time like the present to dive right in.

The total width of our content box is 655 but since we are adding a 1px border all around and 15px of padding, we’ll need to adjust the width.

/*** content
*******************************/
#content {
	background: #f4f1e2;
	border: 1px solid #b4b2aa;
	float: left;
	padding: 15px;
	width: 623px; /*655px - 1px - 1px - 15px - 15px = 623px */
}

Styling the posts

When creating our markup, we went ahead and assigned a class called post to each post sections. The first one (or latest entry) will be slightly different so we’ve added a second class (yes, you can do that) called featured.

Let’s start with the general posts then we’ll add the styles for the featured post.

/*** content - post
*******************************/
.post {
	border-bottom: 1px solid #ada997;
	padding: 20px 0;
}

.post h2 {
	font-size: 24px;
}

.post-date {
	background: url(../i/icons/calendar.png) no-repeat 0 0;
	color: #777777;
	font-size: 10px;
	padding: 0 0 0 25px;
}

img.post-thumb {
	border: 10px solid #fff;
	float: right;
	margin: 0 0 10px 10px;
}

.post-continue a {
	color: #b54646;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}</pre>
Now let's add our styles for the featured post
1.featured {
	background: #fefdf6;
	padding: 5px 15px;
}

.featured img.post-thumb {
	border-color: #000;
}

.featured .post-content {
	font-size: 14px;
}

Page navigation links

The page navigation links that the bottom of the page will enable the user to navigation through the archives.

/*** content - page navigation
*******************************/
.page-navigation {
	margin-top: 25px;
}

.page-navigation .left {
	background: url(../i/icons/arrow-180-medium.png) no-repeat 0 0;
	padding: 0 0 0 25px;
}

.page-navigation .right {
	background: url(../i/icons/arrow-000-medium.png) no-repeat right 0;
	padding: 0 25px 0 0;
}

.page-navigation a {
	color: #89835a;
	text-decoration: none;
}

Sidebar

The sidebar is very easy to do now that the content’s done. A few blocks here and there without too much styling.

/*** sidebar
*******************************/
#sidebar {
	float: right;
	margin-left: 10px;
	width: 295px;
}

Ads
For the ads, I usually have a stack of “dummy images” with different sizes already created. So for this I’ll just change the colors of one I already have on my computer to match the scheme of this site. I suggest you do the same. They are so easy to make: create a new 125×125 image, fill it up with color, add a nice 1px stroke (on the inside) and put the side of the ad. These are very helpful to simply just drop on your mock-ups for client work.

The ads as you can see are 2 x 2 and that will arrange itself in the browser due to the width we have given to our #sidebar so there really isn’t any need to add CSS to this.

<!-- sidebar-ads -->
<div class="sidebar-ads">
	<a href=""><img src="i/ads-blank.png" alt="Ad image" /></a>
	<a href=""><img src="i/ads-blank.png" alt="Ad image" /></a>
	<a href=""><img src="i/ads-blank.png" alt="Ad image" /></a>
	<a href=""><img src="i/ads-blank.png" alt="Ad image" /></a>
</div>
<!-- END OF sidebar-ads -->

If you are running this along with me and you check out the page right now, you’ll notice some big ugly borders around our ads. Eewwww! To fix this, we’ll set our images and linked images to have a border of 0.

/*** common styles
****************************************/
.left {
	float: left;
}

.right {
	float: right;
}

img, a img {
	border: 0;
}

Ahhh… That’s better!

Search

The only we will do here is add a little padding to this section so that it’s not stuck up to the ads.

/*** sidebar - search
*******************************/
.sidebar-search {
	margin: 20px 0 0;
}

Tags
Like the other 3 sections that will follow, we have to style the heading and the box.

#sidebar h4 {
	color: #776a23;
	font-size: 18px;
	font-weight: normal;
}

.sidebar-tags, .sidebar-pop-posts, .sidebar-recent-com {
	background: #f4f1e2;
	border: 1px solid #b4b2aa;
	padding: 8px;
}

The only thing (apart from the icons) that’s different with the tags is that the list is inline with no style.

/*** sidebar - tags
*******************************/
.sidebar-tags ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-tags ul li {
	display: inline;
	margin: 0;
	padding: 0 3px;
}

Popular Posts and Recent Comments

As we said above these three blocks are all very similar. So we’ll combine the last 2 together and reuse code to shorten our CSS.

/*** sidebar - popular posts / recent comments
*******************************/
.sidebar-pop-posts ul, .sidebar-recent-com ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-pop-posts ul li, .sidebar-recent-com ul li {
	background: url(../i/icons/bookmark-document.png) no-repeat 0 0;
	margin: 8px 0 10px;
	padding: 0 0 0 25px;
}

.sidebar-recent-com ul li {
	background: url(../i/icons/balloon.png) no-repeat 0 0;
}

Oh and let’s not forget changing the color of those links too

"]
/*** common styles
****************************************/
.left {
	float: left;
}

.right {
	float: right;
}

img, a img {
	border: 0;
}

a:link, a:visited, a:active {
	color: #b54646;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

And the sidebar is done.

Site info (or footer)

Now if you look at the site in a browser, you’ll notice the footer stuff is tucked in the sidebar. Not good. So we’ll add a clearing div to clear the floats (see Extending the background around two floating div’s) and have the footer site nicely under all the content.

/*** common styles
****************************************/
.left {
	float: left;
}

.right {
	float: right;
}

img, a img {
	border: 0;
}

a:link, a:visited, a:active {
	color: #b54646;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.clear {
	clear: both;
}

And in our HTML

<!-- END OF sidebar -->

<div class="clear"></div>

<!-- END OF content-wrapper -->

Alright, now we start styling. When we started Part II, we cut up a few background/images we would need and now it’s time to use the last one, footer-bg.png. We’ll add that to our site-info div

/*** site-info
*******************************/
#site-info {
	background: url(../i/footer-bg.png) repeat-x 0 0;
	height: 61px; /*81px*/
	padding-top: 20px;
}

Notice I’ve added a bit of padding at the top and that’s because of the rough edge. We don’t want the text to just lie up there so that’s why our height is 61 instead of 81, we need to compensate for the padding.

Now, like our content area, we want our text in the footer to stay within our 960px boundaries. So we’ll add a site-info-wrapper div to help us achieve that.

<!-- site-info -->
<div id="site-info">
<div id="site-info-wrapper">

	<div class="left">
		<p>Copyright 2008 - Karinne Legault</p>
		<p>Hosted by <a href="">Hosting Company</a> / Powered by <a href="http://www.wordpress.org">Wordpress</a></p>
	</div>
	<div class="right">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Archives</a></li>
			<li><a href="">Contact</a></li>
			<li><a href="">RSS</a></li>
		</ul>
	</div>

</div>
</div>
<!-- END OF site-info -->

Bottom navigation

Let’s tackle the bottom navigation first. We’ll re-use much of the code we wrote for the tags box, except we’ll add border to the right of the menu item.

/*** site-info - navigation
*******************************/
#site-info .right ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-info .right ul li {
	border-right: 1px solid #000;
	display: inline;
	margin: 0;
	padding: 0 10px 0 5px;
}

If you look at this in your browser, you’ll notice the last menu item (RSS) has a border on the right which sort of look funny since there’s nothing after it. So let’s go ahead and add a class to that last item and remove the border.

<div class="right">
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Archives</a></li>
		<li><a href="">Contact</a></li>
		<li class="last"><a href="">RSS</a></li>
	</ul>
</div>

and the code to remove the border

"]
/*** site-info - navigation
*******************************/
#site-info .right ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-info .right ul li {
	border-right: 1px solid #000;
	display: inline;
	margin: 0;
	padding: 0 10px 0 5px;
}

#site-info .right ul li.last {
	border-right: none;
}
[/html]

<strong>Copyright and other info</strong>

Let's make the copyright and other info fit nice and snug together. In order to do this, we'll simply remove all margins and padding to the <code>&gt;p&lt;&gt;/p&lt;</code> tags

1"]
/*** site-info
*******************************/
#site-info {
	background: url(../i/footer-bg.png) repeat-x 0 0;
	height: 81px;
	padding-top: 20px;
}

#site-info-wrapper {
	margin: 20px auto 0;
	width: 960px;
}

#site-info p {
	margin: 0;
	padding: 0;
}

We’re done!

That’s it! We are done!

I hope this helps some of you in understanding how to slice a mock-up in Photoshop. Like anything else in Web Design, understand that this is merely one way of doing it. It’s how I’ve done it for the past 10 years and it’s worked great for me.

Download and Demo

From Photoshop to WordPress – Part I – Design

by The Web Squeeze on December 5, 2008 in Tutorials with 59 Comments

Over the coming weeks (months depending on time), we will be releasing a series of tutorials on how to create a website in WordPress starting from the very beginning: the design phase in Photoshop. This first part will show you how to create a grunge-style blog in Adobe Photoshop. Then a second part will follow that will show you how to slice the site in HTML/CSS. The third and final part will show you how to implement that code in WordPress.

Let’s begin this series with Part I – Design.

Laying out the grunge

Open up Photoshop and create a new document 1000px X 1300px. This is just to make sure we have ample space for a 920px wide site if we wish. It is very important to remember that Photoshop is just a tool like the Pen & Paper. Width can be changed once we start Part II which is the coding part.

Once that’s open, change the background to #ded6a9

Using the Heavy Scratches brushes from myPhotoshopBrushes.com, create a new layer and take the 2nd brush, change the width of the brush to 1400px and apply it to this new layer. Change the opacity to 7%.

Looking good! But we need more grunge stuff. Grab the Squares and Brackets brushes and let’s add some more. Create 3 new layers and apply 3 brushe.  Set the opacity to different levels to get a better effect. This part is really up to you and how you want it to look. Here’s what I did.

In the first layer, I used this brush and set the opacity to 8%

In the second layer, I used this one with opacity 11%

And the last one, this brush was used and the opacity of the layer is set to 21%

The result should be something like this

Creating the header

Next, lets create a navigation bar at the very top that will contain important pages/links such as: Home, About, Archives, Contact and RSS. Use the rectangle tool and create a rectangle 1000 x 55 and place it in the top left corner (0, 0). Apply a gradient overlay with the colors #2c2c2c and #5e5e5e and change the position of the color midpoint to 70%.

Then add the text HOME, ABOUT, ARCHIVES and CONTACT on the left hand side and RSS FEED on the right. To make the RSS link stand out more, I went to pinvoke and downloaded their fugue icons which look really great. Open up the feed.png icon and place it next to the RSS link.

For the title, I went to DaFont.com and downloaded the Times New Yorker font. A great grunge font with style that adds character to our design. The color used is #363636 at 48px.

Now on to a secondary navigation that will contain links to categories. Create a new layer and under the title make a selection 1000×80 and fill it with white (#ffffff). Then change the opacity of that layer to 65%. You should get something like this:

Now on to the fun part. Duplicate the layer you just created so you have a spare copy in case what you do next doesn’t look good so you can just start over. Hide the original and work on this duplicate layer. Grab the eraser tool and use this spatter brush…

… and start “erasing” parts of the box. Try not to go too close to the side edges so that when we cut this up for the XHTML, it will repeat smoothly. Remember that there is no right or wrong here so just have fun with this. Here’s what mine looks like.

PSD 13

Add some dummy text categories using the Verdana font set at 18px with the #363636 color.

On with the content

So now the header section is done. It’s looking great isn’t it? Let’s keep it up! Now we’ll go and get the content section ready. We’ll be creating a 2 column layout so one big column for the actual content and a smaller one as a sidebar.

Let’s start with the content. Create a new layer and make a selection 650px X 900px and fill it with this nice beige – #f4f1e2. Then add a 1px border on the inside with the color #b4b2aa.

Now we can add some dummy content with Lipsum text. All text will have text size of 12px. Titles will be 24px and the Continue Reading link will be 14px with color #b54646. The date is set to 10px with color #777777. To make the new entry in evidence we will put a white background and the content in 14px. The rest will remain the same.

The calendar image I took from the fugue icons from pinvoke. All the icons in the design will come from there so keep them handy.

Now at the bottom of those posts we’ll add some “previous” and “next” text to navigate between archives. Something simple, so let’s put Previous on the left and Next on the right and both with a nice arrow from the fugue set. Let’s use font size of 12px and color #89835a.

A sidebar

Our sidebar will have a series of boxes for the tags, popular posts and latest comments. We will also have ad space at the top. So let’s get cracking.

Creating the ad boxes is fairly simple. We’ll go with 145 x 145 boxes which is usually a pretty standard size. So create a 145×145 square using the rectangle tool (U). Fill it with #cbc189 color and add a 1px border on the inside with the color #a4974d. That will also be the color of the text we will use. Duplicate it 3 times so you have 4 boxes and put them 2 x 2 like so.

We then add some text “Advertising 145×145″ on 2 lines. Font size 12px with color #948532.

Next we add our Search feature. Using the rectangle tool again, create a box that’s 225px X 30px. Make it the same color and border as our big content box so: content color #f4f1e2, border color #b4b2aa. As for the button, since we will be using the browsers default button when creating the page in HTML, just use the rounded rectangle tool with any background color.

Next we’ll add our Tags, Popular Posts and Recent Comments boxes and titles. Since the content in those boxes will be dynamic (meaning long titles, short titles, etc…) we’ll make them all the same size for now just so we can get an idea of what it will look like. Our titles will have a font size of 18px and color #776a23. Our boxes will use the same background and border effect as the search box. Let’s make the boxes all 300px X 120px and we’ll fit content in accordingly.

We’ll go in those boxes now and add some dummy text. As bullets for the Popular posts, we’ll go back to the fugue icons from pinvoke and use the bookmark_document.png. And for the Recent Comments, let’s go with ballon.png. All our links throughtout the future site will be in red (#b54646), so we’ll do that in the sidebar as well.

Finishing off with the footer

For the footer, we will use the same technique as with the secondary navigation above meaning that we will be scrubbing off the background to make it nice and grungy.

Let’s start off by creating a new layer. Using the marquee tool (m), create a rectangle at about 1220px all the way to the bottom right corner of your canvas. Fill it with black and change the opacity of that layer to 15%. You should have something like this:

Now grab your eraser and start erasing the top edge. Remember to make a duplicate just in case and do not go too close to the sides so we can cut it up nicely later. Here’s what I came up with:

All that’s left to do now, is simply add a bottom navigation as well as copyright info.

And that’s it! Next up in this series, we’ll take this same design and turn it into a functional HTML/CSS page. Click to read Part 2!

Newer Entries →