March 29th, 2009 in PSD Sitebuilds by Richard Carpenter
PSD to CSS to Wordpress PT.2
14 Votes, Rating: 4.71
Loading ...
Hello welcome to part #2 of the “mywordpress” tutorial, today were going to be converting our PSD file into a working CSS template ready for when we convert it over to wordpress.
You can download the CSS template for FREE by using the button above. Right lets get started, create a folder on your desktop called “mywordpress” inside this folder create another folder called “images”. Open up a blank notepad document then goto “file > save as” then save the blank file as “style.css” inside the “mywordpress” folder. Open up dreamweaver and start a new HTML document.
Once the new blank HTML document has loaded goto “file > save as” then save it as “index.html” into your “mywordpress” folder on your desktop. Select the code view tab to view the code to the index.html file.
Inside the “code view” edit the TITLE TAG to display what ever you want in your title bar of the browser. “MYWORDPRESS – fancy wordpress slogan here – Welcome…”.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MYWORDPRESS - fancy wordpress slogan here - Welcome...</title> </head> <body> </body> </html>
On the far right side of the dreamweaver window there should be a big box in which you can slide in and out.
If you cant see it, click the little black arrow. If you find there are loads of boxes open just collapse them the only window we need is the CSS window. In the CSS window we can attach our style sheet by clicking the little chain button. OR if you prefer type it out by hand.
Once you’ve clicked the chain button, you’ll be presented with a box like this.
Just click browse and select your .CSS file in your “mywordpress” folder. Then click ok. You’ll notice once you click ok the style sheet is attached and the code is automatically written for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MYWORDPRESS - fancy wordpress slogan here - Welcome...</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
You can also add and edit any styles linked to your HTML document in the CSS window. Although i prefer to write out my CSS then edit or tweak in the CSS window just for quickness. When you start to write your CSS styles they will be automatically added into the CSS window, all’s you need to do is just double click what ever style you want to edit then a box will pop up with loads of wonderfull options. Right lets start mocking up our DIV’s in our HTML document, we’ll start with the top half first. Were going to need a container DIV, a DIV for the topbar, header and navigation. The code looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MYWORDPRESS - fancy wordpress slogan here - Welcome...</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"><!--container starts-->
<div id="top-bar"><!--top bar starts-->
</div><!--top bar ends-->
<div id="header"><!--header starts-->
</div><!--header ends-->
<div id="navigation"><!--navigation starts-->
</div><!--navigation ends-->
</div><!--container ends-->
</body>
</html>
Notice all my DIV’s are commented, i cant stress enough how important it is that you should comment code, it will save bags of time when finding you DIV’s later on as things can get quite messy. Another thing i tend to do is always TAB in DIV’s that are inside other DIV’s, it just keeps things nice and neat. Right open up your style sheet inside dreamweaver, the first items we need to style is the body of our document.
/* MAIN BODY STYLES */
*{
padding:0;
margin:0;
}
body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-color: #f6f7f1;
font-family: Verdana, Arial, "Century Gothic";
font-size: 12px;
color: #878787;
}
Let me explain a little bit about the code above, firstly we dont want any of our document to have any padding or margin, setting the margins and padding to 0 will make the document sit flush at the top, sides and bottom of the browser. In the body style we have a background image which we’ll be creating in a moment, the background repeats along the x axis (horizontal). Then we have our document background color which is the color of the last pixel on the background image, then we have our font family, font size and default font color. Lets create our background image. Duplicate your PSD file (a backup is always good) open up your backup PSD file in photoshop, goto “layer > flatten image”. Select the rectangular marquee tool and make a 2 pixel wide selection spanning from the very top of your document down to the end of the last post. Keep the selection 1 pixel from the left side of the edge. If you start the selection from the edge you’ll get small inperfections on the image. as the last pixel on the navigation is slighly lighter. If you zoom in you’ll see. Once you’ve made the selection goto “image > crop” then save the image as “bg.png” inside your images folder. Once you’ve saved the image select the eye dropper tool, zoom right in to the bottom of the image and select the last pixel on the image, get the color code by clicking on your forground color, you’ll see the color code in the window that pops up.
The hex color code of the last pixel you need to paste into the “background-color” style in your CSS file. If you view you HTML document in your browser you should see your background in action. Now lets style the container, topbar and header.
#container {
margin: auto;
width: 900px;
}
#top-bar {
float: left;
height: 24px;
width: 900px;
padding-top: 8px;
}
#header {
float: left;
height: 125px;
width: 900px;
}
For the container we just want a 900px wide box which is centered, the 900px is what we created our PSD file at, you dont need a height as the container will increase or decrese depending on the amount of content. For the topbar we want to float it left, we also want it to be 900px wide. We also need to set a height, to determine the height i measured it in photoshop, the topbar was actually 32px in height, but we have to minus the padding 32 – 8 = 24. So we set the height to 24px. We also want abit of padding as we dont want the text in our topbar to be stuck right underneath our URL bar in the browser. If you find your text isnt quite centered due to you using a bigger size or something just adjust the padding. The header is pretty much the same as the top bar, 900px wide, floated left and a measured height of 125px. Now we need to fugure out how were going to display our elements inside our divs.
As you can see from the image above its pretty straight forward, the topbar will have 2 lists inside of it, the header DIV will have to more DIV’s inside it one for the website title and slogan and another for the search fields. We write this in our HTML document like this.
<div id="container"><!--container starts--> <div id="top-bar"><!--top bar starts--> <ul class="nav1"> <li><a href="#">Login</a></li> <li><a href="#">Wordpress.org</a></li> </ul> <ul class="nav2"> <li><a href="#">Sitemap</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!--top bar ends--> <div id="header"><!--header starts--> <div id="site-title"><!--site title starts--> </div><!--site title ends--> <div id="search"><!--search starts--> </div><!--search ends--> </div><!--header ends-->
Inside the topbar there is two unordered lists one with class of nav1 and the other with a class of nav2, then we’ve simply added two more DIV’s inside our header DIV. Lets style our topbar lists first, head over to your style sheet and add this code underneath your “top-bar” DIV.
#top-bar a{
color: #FFFFFF;
text-decoration: none;
}
#top-bar a:hover{
color: #323232;
text-decoration: none;
}
.nav1 li {
display: inline;
list-style-type: none;
margin-right: 20px;
color: #FFFFFF;
float: left;
}
.nav2 li{
display: inline;
list-style-type: none;
color: #FFFFFF;
float: right;
margin-left: 20px;
}
The first two styles refer to the list’s links. “top-bar a” sets the links to have a color of white and the text-decoration removes the line underneath the link. The next one is the hover state of the link, when you hover over a link in the list the color will change to #323232. Then we have out two lists, we display our links inline oppsosed to vertically, list style type is set to none, this removes the bullet points from the list. nav1 is floated left and nav2 is floated right. The list that is floated left will have a right margin of 20px spacing the links apart by 20px then vise-versa for nav2. If you view your document in your browser you should see your lists active. Now lets add our website title and slogan, add the following code inside your “site-title” DIV.
<div id="site-title"><!--site title starts--> <h1>your<span class="blue-title">wordpress</span><span class="slogan"> "your wordpress slogan here"</span></h1> </div><!--site title ends-->
First we wrap out website title and slogan inside a H1 tag, because one of our words is blue in our title we need to add a span class before the word. So we add a span class of “blue-title” before the word “wordpress”. Then because our slogan will look different again we need to add another span class. A span class of slogan. Now we can style the word “wordpress” and the whole slogan sentance though css. You could just use an image but why mess about with images when the effect can be pulled off with CSS. We style our website title and slogan like this.
#site-title{
height: 80px;
float: left;
padding-top: 45px;
}
#site-title h1{
color: #FFFFFF;
text-transform: uppercase;
font-size: 24px;
font-style: italic;
font-weight: bold;
}
.blue-title {
color: #309dcf
}
.slogan {
font-size: 12px;
font-weight: normal;
text-transform: none;
}
Our site-title DIV has the same height as our header box “125px” but also has 45px padding to the top so we have to do 125px – 45px = 80px. We also want our text to the left so we float it left. Next we style our H1 tag, the H1 tag has a color of white (#ffffff), the text has to be uppercase in italic and bold, then the font size is a nice big 24px. Then we had a span class of “blue-title” which was our word “wordpress” we just wanted to change the color so we set a new color. Then the slogan inherits the H1 tags color (#ffffff) we just need to set a different font size so we set a smaller 12px. The slogan will also inherit the H1 tags uppercase and font weight style so we just set the slogan style to normal and none. Thats our title and slogan out the way now for our search field, add the following code to your search DIV.
<div id="search"><!--search starts--> <form action="" method="get"> <input type="text" class="search-field" value="Search..." size="30" /> <input name="Submit" type="submit" class="search-button" value="Go!" /> </form> </div><!--search ends-->
Here we have a simple form mockup, we have a text field which will be our search field, the search field has a class of “search-field” allowing us to style it in CSS. Then we have our go button with a class of “search-button”. We style our search field and button like this.
#search {
float: right;
padding-top: 45px;
}
.search-field {
margin-right: 10px;
padding: 4px;
background-color: #494949;
border: 1px solid #666666;
color: #FFFFFF;
}
.search-button {
background-color: #494949;
border: 1px solid #666666;
color: #FFFFFF;
padding: 2px;
}
.search-button:hover {
background-color: #707070;
}
We set our main search DIV to float right with the same top padding as our website title. Our search field had a class of “search-field” in this style we add a 10px right margin will push the go button over by 10px, we set 4px padding all the way around the search field. The search field has a background color of #494949 and a 1px border all the way around it in the color #666666. Finally the text inside the search field we want to be white so we add our color: #ffffff. The search button has a class of “search-button” and has the same styles as the search field part from the padding is 2px and it has no margin. The last style is optional really, i always find its better to have a hover effect on buttons. We just want the color of the go button to change slightly once hovered over it. Test your HTML document to reveal the search field iin action. Obviously it doesnt work yet. The next part we need to create is our navigation, we mock this up like this.
</div><!--header ends--> <div id="navigation"><!--navigation starts--> <ul class="nav_links"> <li> <a href="#">Home</a></li> <li class="withdiv"><a href="#">Page #1</a></li> <li class="withdiv"><a href="#">Page #2</a></li> <li class="withdiv"><a href="#">Page #3</a></li> <li class="withdiv"><a href="#">Page #4</a></li> <li class="withdiv"><a href="#">Page #5</a></li> <li class="withdiv"><a href="#">Page #6</a></li> <li class="withdiv"><a href="#">Page #7</a></li> <li class="withdiv"><a href="#">Page #8</a></li> <li class="withdiv"><a href="#">Page #9</a></li> </ul> </div><!--navigation ends--> </div><!--container ends-->
Inside our navigation DIV we add a simple unordered list and within that unordered list i have 10 links. You might not get 10 links across if the words are longer. Ive just done page 1 – 9 for an example, in the wordpress template these links will be our pages which will load up dynamically. You’ll also notice links 1-9 has a class of “withdiv”, this basically means with divider, we’ll be creating the divider in a moment. The CSS for our navigation looks like this.
#navigation {
height: 42px;
float: left;
width: 900px;
}
.nav_links ul {
margin: 0px;
padding: 0px;
}
.nav_links li {
list-style:none;
display:block;
float: left;
}
.nav_links a {
text-decoration: none;
color: #5f5f5f;
display: block;
height: 27px;
padding-right: 17px;
padding-left: 17px;
padding-top: 15px;
}
.withdiv {
background-image: url(images/nav_divider.png);
background-repeat: no-repeat;
}
.nav_links a:hover {
color: #FFFFFF;
background-image: url(images/nav_hover.png);
background-repeat: repeat-x;
}
Our first style is our navigation DIV, it has a height of 42px which is the height of the actuall navigation in photoshop. The navigation is floated left and is 900px wide. The unordered list has no margin or padding, the list has no list style, this removes the bullet points from the list, its floated left and is displayed as a block. All the navigation links have no text decoration, 15px padding at the top. The links also have two identical padding of 17px. If your pages have longer words then you might want to reduce the size of the padding. Next up is our class “withdiv” this class basically place a small divider to the left of each link, we’ll be creating the divider in moment. Finally the navigation hover, when we mouse over each button or link we want the text to change to white and have a background image called nav_hover show up. Lets create these image now open up your duplicated PSD file in photoshop if you havent already flattern your PSD FILE, and make a selection like this.
Goto “image > crop” then save the file as “nav_divider.PNG” into your images folder. Next create a new document 200×43 pixels. You need to create an image like the image below.
The image above is exactly the same as our blue bar at the very top of our website you can refer to our PSD file for the layer styles. Once you’ve replicated the image above make a 2 pixel wide selection and crop it. Save the file as “nav_hover.PNG” save the file into the images folder. Test your HTML file in your browser to see if it works. You should have a working navigation with a nice hover, just make sure all the hovers look the way there surposed to. Now its time for our content, before we start were going to make the background images for our sidebar and content boxes or dummy posts. Open up photoshop with your PSD file HIDE all the layers apart from the background layer and the content box in which our wordpress posts will be. Double click your post content box and adjust the inner shadow layer style.
Change the size to 2pixels, the reason why we’ve done this is because when we add our border in CSS it will overlap our white line and it wont be visable. Now we have a 2 pixel line so the border will cover up the 1st 1 pixel white border on our content box background image, leaving the 2nd white border visable. Make a selection like this.
Only select the rectangle dont include the stroke on the box, we’ll be adding the border through CSS. Flattern your PSD file then goto”image > crop” save the image as “post_bg.PNG” Do exactly the same to the sidebar image, the sidebar image should be 280px wide. and the same height as the “post_bg.PNG” save the sidebar image as “sidebar_bg.PNG” You should have two images like this.
We mockup our content area like this.
We’ll be doing the left content first, the HTML looks like this.
</div><!--navigation ends--> <div id="content"><!--content starts--> <div id="content-left"><!--content left starts--> </div><!--content left ends--> </div><!--content ends--> </div><!--container ends--> </body> </html>
The CSS styling for our two content DIV’s are.
#content {
float: left;
width: 900px;
margin-top: 20px;
padding-bottom: 40px;
}
#content-left {
float: left;
width: 602px;
}
Our DIV “content” will basically be the container which holds all our content, we float this DIV left, we make it 900px wide. We also need to space it out abit so we add a 20px top margin and 40px padding. The reason why we added the 40px padding instead of margin was because for some reason in Internet Explorer the content seemed to sit on top of the footer. Adding a 40px padding to the bottom instead of a margin seemed to fix it. The content left DIV will be the container which holds our posts. We have to make the box 602px wide as we’ll be adding a border to the box, a left and right border makes up an extra 2px, 1px each side. Again we float it left. Now we need to start mocking up what our dummy post will look like. The code looks like this.
<div id="content"><!--content starts--> <div id="content-left"><!--content left starts--> <div class="a-post"><!--wordpress post starts--> <div class="post-img"> <img src="images/post_thumbnail.png" alt="Test Image" /> </div> <div class="post-title"> <h1>This is a post title...</h1> <p>Posted on 25/03/2009 By "admin"</p> </div> <div class="post-desc"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div><!--wordpress post ends--> </div><!--content left ends-->
Inside our content-left DIV we have a number of classes. (remember DIV’s should be unique and never repeated. Classes can be repeated as often as you like). The code above starting from the class “a-post” will be repeated everytime you make a post in the wordpress theme, so its important to use classes not DIV’s. The first class is “a-post” this will be the box which holds our background image and will also contain all other elements of a wordpress post. Inside the class “a-post” we have a class of “post-img” this will be our wordpress thumbnail for the posts. We then have “post-title” this class contains our post title and meta data. Finally we have our “post-desc” which is post description this class will contain our post content before the wordpress MORE tag. The CSS styles for each of the classes looks like this.
.a-post {
background-color: #FFFFFF;
background-image: url(images/post_bg.png);
background-repeat: no-repeat;
border: 1px solid #bababa;
width: 580px;
padding: 10px;
float: left;
margin-bottom: 20px;
}
.a-post h1{
color: #309DCF;
font-size: 24px;
font-weight: bold;
line-height: 34px;
}
.a-post img{
border: 1px solid #d4d4d4;
padding: 5px;
float: left;
}
.post-img {
float: left;
height: 198px;
width: 234px;
margin-right: 10px;
}
.post-title {
float: left;
width: 336px;
margin-bottom: 10px;
}
.post-title p {
color: #FFFFFF;
background-color: #90c6df;
float: left;
}
.post-desc {
float: left;
width: 336px;
text-align: justify;
font-style: italic;
line-height: 16px;
}
The class which we style is the “a-post” class this has a background color of #FFFFFF and a background image post_bg.png which is our image we created in photoshop. We then set our 1px border around the whole class, we also give the box 10px padding all the way around which then makes the width 580px. 580px + 10px padding left + 10px padding right + 1 px border left + 1 px border right = 602px wide. The next class is our H1 tag for our post, we want a nice big blue font then we use line height of 34px to space the title out abit. For every image in a post we want a nice little border, so we add a class for all images in “a-post img”. We then give each thumbnail its own container “post-img” the width and height set in these styles matches my thumbnail which i created in the PSD file. We then space out the thumbnail by giving it a margin to the right of 10px, this will push the post title and content 10px away from the thumbnail. The next class is the “post-title” class, this is the container which holds our post title and meta data. The class “post-title p” refers to our meta data which is the bit of text underneath our post title. Finally we have “post-desc” which relates to our content within the post. You should now have 1 single post in your CSS template, to create more posts we just need to duplicate everything inbetween the “a-post” class. Test your index.html file to see how it looks in your browser. Now lets mockup the sidebar. Inbetween the ending div “content left ends” and “content ends” mockup our sidebar which looks like this.
</div><!--content left ends--> <div class="side-bar"><!--sidebar starts--> <div class="side-bar-content"> <img src="images/ad.png" alt="Your AD Here" class="side-bar-ads" /><img src="images/ad.png" alt="Your AD Here" class="side-bar-ads" /><img src="images/ad.png" alt="Your AD Here" class="side-bar-ads" /><img src="images/ad.png" alt="Your AD Here" class="side-bar-ads" /> </div> <div class="side-bar-content"> <h1>Some Text</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <div class="side-bar-content"> <h1>Categories</h1> <ul> <li><a href="#">Categorie #1</a></li> <li><a href="#">Categorie #2</a></li> <li><a href="#">Categorie #3</a></li> <li><a href="#">Categorie #4</a></li> <li><a href="#">Categorie #5</a></li> </ul> </div> </div><!--sidebar ends--> </div><!--content ends-->
The sidebar is pretty simple we just have 2 classes of which one is repeated. The class “sidebar” is our sidebar container which will hold our sidebar elements. Then the “side-bar-content” class holds our content, each bit of content is contained within the “side-bar-content” class. Think of each element in your sidebar as a seperate item, so for example you have 4 125×125px ads at the top thats one item, then you have your categories thats another item and so on and so forth. If you look at the code above you can easily look at it and determine what each item is. The CSS for our sidebar looks like this.
.side-bar {
background-color: #FFFFFF;
border: 1px solid #bababa;
float: right;
width: 260px;
background-image: url(images/sidebar_bg.png);
background-repeat: no-repeat;
padding: 10px;
}
.side-bar-content {
width: 260px;
float: left;
margin-bottom: 20px;
}
.side-bar-ads {
margin-left: 3px;
margin-bottom: 3px;
}
.side-bar h1{
color: #309DCF;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
.side-bar p {
text-align: justify;
line-height: 16px;
}
.side-bar li {
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e1e1e1;
margin-left: 15px;
margin-top: 10px;
display: block;
}
The first thing to style is our sidebar class, this class contains our background image that we created in photoshop. The styles are pretty much similar to our post styles. We then have a class of “side-bar-content” this is our little container for each sidebar item. We then have a few classes which relate to our sidebar content, “side-bar-ads” are the styless for my little 125×125px ads, the “side-bar h1″ tag refers to each header that we have in our sidebar, if we have any plain text in our sidebar or paragraphs then these would be styled though the “side-bar p” style. Then finally we have our “side-bar li” style which we’ll use for any lists that we have in our sidebar. You can go ahead and test your template in your browser. Everything should be in order, you may need to copy the “ad image” from the images folder from my template unless you create your own. Finally we need to mockup our footer which looks like this.
</div><!--container ends--> <div id="footer"><!--footer starts--> <div id="footer-topbar"> <h1>mywordpress<span> "Your fancy wordpress slogan here"</span></h1> </div> <div id="footer-content"> <p>Copyright &copy; mywordpress.co.uk | All Rights Reserved<br /> Design By <a href="http://www.hv-designs.co.uk">HV-Designs.co.uk</a></p> </div> </div><!--footer ends--> </body> </html>
Make sure you add your footer outside of the container DIV as we want our footer to span across the browser just like our header and top-bar does. We first add a DIV of footer and a DIV of footer-topbar this will be our footer container DIV a DIV for our topbar pretty much similar to our header and top-bar. We then add another DIV which will be for some copyright text so we add a DIV of “footer-content”. We need to make a background for our footer, we do this in the same way as we did when we created the top half of our template. You need to make a 2 px selection of your footer background in your PSD file. Then the image will be repeated through CSS. The CSS for our footer looks like this.
#footer {
background-image: url(images/footer_bg.png);
background-repeat: repeat-x;
clear: both;
height: 147px;
}
#footer-topbar {
height: 33px;
width: 900px;
margin: auto;
}
#footer-topbar h1 {
color: #FFFFFF;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
font-style: italic;
padding-top: 3px;
}
#footer-topbar span {
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
}
#footer-content {
height: 113px;
width: 900px;
margin: auto;
}
#footer-content p {
color: #FFFFFF;
padding-top: 45px;
text-align: right;
}
We style our footer DIV first as you can see we’ve added our background which is repeated along the x axis. The height is the same height as a background image and importantly you have to clear the floats eles footer background will be 900px instead of spanning the entire browser width. We then have our footer top-bar, this is pretty much the same as when we created the header, our footer top-bar has a width of 900px, margin is set to auto to center everything so it matches the rest of our template, we then have a height of 33px which is the actual height of the blue bar, which i measured in photoshop. We then have a H1 tag and a span, this is exactly the same as when we created the website title. The copyright text is put inside the DIV “footer-content” and styled through a P tag. All thats left to do now is style our default H tags for headers that aint styled through another DIV, and also we need to style our links.
h1,h2 {
color: #309DCF;
font-weight: bold;
}
h1 {
font-size: 24px;
line-height: 34px;
}
h2 {
font-size: 18px;
line-height: 34px;
}
h3 {
color: #333333;
font-size: 18px;
line-height: 34px;
}
a:link {
color: #309DCF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #309DCF;
}
a:hover {
text-decoration: none;
color: #333333;
}
a:active {
text-decoration: none;
color: #309DCF;
}
All done, hope you enjoyed this tutorial, sorry its so long, to be honest it could of been longer if i went into more detail. In the next tutorial we’ll be converting it into wordpress. Dont forget to subscribe via RSS & twitter. You can also share my tutorials by using the “share & enjoy” buttons at the bottom. Till next time, cya.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
35 Responses to “PSD to CSS to Wordpress PT.2”