Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.
Today I am proud to bring you guys Pt. III of the HV-Tumblr Theme Series. This episode in the series we will finally begin coding up our document. In order to create the perfect Tumblr Theme you need to make sure that your HTML is full stable with filler content before starting to add the Tumblr tags and removing things we don’t need, which is what we will be doing today! Let’s get started…
So, first thing is first, I am going to save us a bunch of time. Instead of wasting your time by showing you what you need to slice up for our document I will just provide the images. It is pretty obvious, especially in this design, to see that we are only going to be slicing up a few images, and the rest we will do with CSS.
Download Image Files
Alright, let’s get started coding up our main page to HTML. The first thing we are going to want to do is set up our folder layout. Create a new folder on your desktop and name it whatever you want. Now, within the folder, we are going to set up an images folder. Copy and paste the images that you downloaded above into the images folder and we are ready to rock and roll.
Open up your favorite text editor, or the editor that you choose/have to use, and right away save your document as index.html. That get’s that out of the way and makes sure that we have at least our open document and saved.
As I said earlier this tutorial, since it’s not the most important part of why I am writing this series, will be a pretty quick tutorial. We are going to be hitting everything in series, and all the numbers that you need are provided in your PSD document (which are provided in Part 1 of this series) so I am not going to explain where the numbers come from to save us both time.
Now, let’s start our first section.
Header and Logo
Alright, for our logo we are going to want to set it up to use just a text based logo. In the conclusion of this series though I will show you a few tips for adding an image via Tumblr custom forms. Anyway, let’s set up our CSS for our header and logo.
body { background-color: #cecece; margin: 0px; } p, h1, h2, h3, h4, img, a { margin: 0px; padding: 0px; text-decoration: none; } .header_container { background-image: url(images/header_background.png); background-repeat: repeat-x; height: 100px; width: auto; } #header { height: 100px; width: 1024px; margin-right: auto; margin-left: auto; } #logo { float: left; height: 40px; width: 185px; margin-top: 20px; margin-left: 55px; } #logo h1 { font-family: "Francois One"; margin: 0px; color: #a2d9ff; font-size: 32px; } #logo h1 a { color: #a2d9ff; font-size: 32px; text-decoration: none; } #askme { background-image: url(images/ribbon.png); background-repeat: no-repeat; height: 54px; width: 37px; float: right; margin-right: 55px; }
We have, of course, set up a simple CSS reset and our body information, but we also set up our header and logo information, as well as the quick little CSS setup for the ask me ribbon we put in this design. The thing I want to point out quickly is the reason I have a header container and and then a header class. When you are working with a design like this, and using a background image, you want to split up anything that needs to be repeated, but still has areas that need to be contained, you want to make the repeatable background its own container.
Sweet! Now let’s move on to actually setting up the html. As you can guess we will have a bunch of div tags inside of the main header_container div.
<div class="header_container"> <div id="header"> <div id="logo"> <h1><a href="#">HV-Designs</a></h1> </div> <a href="#" id="askme"></a> </div> </div>
Content
Alright, let’s go ahead and set up our content now. We will have our content container, which will keep everything centered on the screen, and then we will be setting up our left content container, which will hold all of our posts.
.content { height: auto; width: 970px; margin-right: auto; margin-left: auto; clear: both; } .leftcontent { float: left; height: auto; width: 635px; border-right-width: 1px; border-right-style: solid; border-right-color: #c0c0c0; } .postcontainer { float: left; height: auto; width: 585px; margin-bottom: 45px; }
We have all our containers ready to set up, now we have to get them ready for our posts. The html will have open divs for now, until we finish the posts, so don’t freak out when I don’t close the tags I am providing you.
<div class="content"> <div class="leftcontent"> <div class="postcontainer">
Alright, time to set up the CSS for our first post type. We will be including the note and date ribbon CSS as well, which we will be using on every post. We will also be setting up our tags for the first time, but that will also be used in every single post.
.ribboncontainer { float: left; height: 100px; width: 70px; margin-top: 25px; } .dateribbon { background-image: url(images/date_timeribbon.png); background-repeat: no-repeat; height: 40px; width: 70px; float: left; } .dateribbon h2 { color: #a2d9ff; font-family: Oswald; font-size: 14px; text-align: center; margin-left: 7px; margin-top: 7px; } .noteribbon { background-image: url(images/date_timeribbon.png); background-repeat: no-repeat; height: 40px; width: 70px; float: left; margin-top: 20px; } .noteribbon h2 { color: #FFFFFF; font-family: Oswald; font-size: 9px; text-align: center; margin-left: 7px; margin-top: 10px; } #photopost { float: left; height: 415px; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; } #photo { float: left; height: 315px; width: 480px; margin: 14px; border: 1px solid #000; } #photocaption { float: left; height: auto; width: 480px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 16px; } #photocaption a { color: #de5400; text-decoration: none; } #photocaption a:hover { color: #1da3ff; } .tags { background-image: url(images/tags.png); background-repeat: no-repeat; background-position: left; float: right; height: 19px; width: 150px; padding-left: 25px; margin-top: 10px; margin-right: 15px; font-family: Verdana; color: #989797; font-size: 12px; clear: both; margin-bottom: 10px; }
Pretty simple stuff but you will notice that I put everything in its own container. I do it because it makes everything flow a little bit better, but I also do it because it’s just something I have to do (OCD) or I feel like my code is just random nonsense. If you are going to be using containers for everything I would recommend shorthanding your CSS and condensing it as much as possible. Don’t know how to do that? Don’t worry, we have a tutorial coming out for that pretty quick like.
Alright, now that I have shamelessy promoted a future post, it’s time to actually move into our HTML.
<div class="ribboncontainer"> <div class="dateribbon"> <h2>Jan 10</h2> </div> <div class="noteribbon"> <h2>129 Notes</h2> </div> </div> <div id="photopost"> <div id="photo"><img src="images/photopost.png" width="480" height="315" /></div> <div id="photocaption">This will be a photo caption here, with a <a href="#">link</a> included to wherever you want. Its also clickable.</div> <div class="tags">Photos, Beach, Sand</div> </div> </div>
Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.
So, we put in the exact text and photo from our PSD file and closed up the post container tag and are ready to rock and roll into the next step. Now that we have our staple CSS classes set up for each of our posts all we have to do is pull all the sizes, colors, borders, etc from our PSD document and basically transfer them over to our document. Be ready for a huge chunk of CSS:
#quotepost { float: left; height: 155px; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; background-image: url(images/quotes_background.png); background-repeat: no-repeat; } #quote { float: left; height: auto; width: 480px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 18px; font-weight: bold; color: #de5400; margin-top: 30px; } #quoteauthor { float: right; height: 25px; width: 200px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 18px; font-weight: bold; color: #000; margin-top: 10px; text-align: right; } #textpost { float: left; height: auto; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; } #text h1 { color: #DE5400; margin-bottom: 15px; font-size: 26px; } #text p { margin-bottom: 15px; } #text { float: left; height: auto; width: 480px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 14px; color: #000; margin-top: 30px; } #linkpost { float: left; height: auto; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; background-image: url(images/quotes_background.png); background-repeat: no-repeat; } #linkdescription { float: left; height: auto; width: 480px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 18px; font-weight: bold; color: #de5400; margin-top: 30px; } #link { float: left; height: 25px; width: 250px; margin-left: 14px; font-family: Verdana; font-size: 18px; font-weight: normal; color: #000; margin-top: 10px; text-align: right; } #audiopost { float: left; height: auto; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; background-image: url(images/quotes_background.png); background-repeat: no-repeat; } #albumart { float: left; height: 120px; width: 120px; margin: 10px; } #audio_container { float: left; height: auto; width: 500px; margin-right: 14px; font-family: Verdana; font-size: 13px; color: #000; margin-top: 10px; } .audioplayer { background-image: url(images/audioplayer.png); background-repeat: no-repeat; float: left; height: 35px; width: 210px; margin-top: 10px; } #audiotext { height: auto; width: 350px; float: left; margin-top: 20px; } #videopost { float: left; height: auto; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; } #videopost h1 { color: #DE5400; font-size: 26px; font-family: Verdana; margin-left: 15px; margin-top: 15px; } #video { float: left; height: 300px; width: 365px; margin-right: 72px; margin-left: 72px; font-family: Verdana; font-size: 14px; color: #000; margin-top: 30px; background-image: url(images/video.png); background-repeat: no-repeat; margin-bottom: 10px; }
And simply repeat the same process from our first post we set up and we are good to go:
<div class="postcontainer"> <div class="ribboncontainer"> <div class="dateribbon"> <h2>Jan 10</h2> </div> <div class="noteribbon"> <h2>129 Notes</h2> </div> </div> <div id="quotepost"> <div id="quote">You are part of the Rebel Alliance and a traitor. Take her away!</div> <div id="quoteauthor">-Darth Vader</div> <div class="tags">Photos, Beach, Sand</div> </div> </div> <div class="postcontainer"> <div class="ribboncontainer"> <div class="dateribbon"> <h2>Jan 10</h2> </div> <div class="noteribbon"> <h2>129 Notes</h2> </div> </div> <div id="textpost"> <div id="text"> <h1>This is a text post of some sort!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc nisi, viverra eu ultrices a, tincidunt et eros. Ut convallis malesuada imperdiet. Mauris interdum dapibus tristique. Phasellus nec diam massa. Donec pharetra pellentesque purus, nec consectetur turpis viverra vel. Sed dictum lobortis velit quis feugiat. Vivamus consectetur odio vel dolor vulputate pulvinar. Sed commodo porta volutpat. Cras varius elementum condimentum. </p> <p>Cras iaculis, sapien vel congue pellentesque, felis eros tincidunt neque, nec aliquam justo nibh vitae lorem. Nunc vulputate scelerisque accumsan. Nullam pellentesque, orci ut varius eleifend, eros neque mattis lorem, sed faucibus sem ipsum vulputate dui. Nulla consectetur urna id erat dictum non viverra eros pretium. Sed lobortis porttitor nisi vel elementum. Fusce accumsan massa quis sem eleifend quis condimentum lectus bibendum. Donec eget risus ligula, sit amet </p> </div> <div class="tags">Photos, Beach, Sand</div> </div> </div> <div class="postcontainer"> <div class="ribboncontainer"> <div class="dateribbon"> <h2>Jan 10</h2> </div> <div class="noteribbon"> <h2>129 Notes</h2> </div> </div> <div id="linkpost"> <div id="linkdescription">Awesome Photoshop Tutorials, Tips and Tricks!</div> <div id="link">- http://hv-designs.co.uk</div> <div class="tags" id="links">Photos, Beach, Sand</div> </div> </div> <div class="postcontainer"> <div class="ribboncontainer"> <div class="dateribbon"> <h2>Jan 10</h2> </div> <div class="noteribbon"> <h2>129 Notes</h2> </div> </div> <div id="audiopost"> <div id="audio_container"> <div id="albumart"><img src="images/albumart.png" width="118" height="118" /></div> <div class="audioplayer"></div> <div id="audiotext"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc nisi, viverra eu ultrices a, tincidunt et eros. Ut convallis malesuada imperdiet. Mauris interdum dapibus tristique. Phasellus nec diam massa</p> </div> </div> <div class="tags">Photos, Beach, Sand</div> </div> </div> <div class="postcontainer"> <div class="ribboncontainer"> <div class="dateribbon"> <h2>Jan 10</h2> </div> <div class="noteribbon"> <h2>129 Notes</h2> </div> </div> <div id="videopost"> <h1>This is your video caption </h1> <div id="video">Content for id "video" Goes Here</div> <div class="tags">Photos, Beach, Sand</div> </div> </div> </div>
That nice chunk of HTML was brought to you by filler content. Make sure all your div tags are closed off, which they are if you copied the html 
Right Container
Alright, let’s get started on the right container. The first thing we want to do is open up our Photoshop Document and get our CSS ready by pulling all the information we need from the PSD. Here is our css:
.rightcontainer { float: left; height: 830px; width: 310px; padding-left: 20px; } .authorinfo_container { float: left; height: 120px; width: 305px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; } #authorimage { float: left; height: 75px; width: 75px; border: 1px solid #c0c0c0; background-color: #FFF; padding: 5px; } #authorinformation { height: 55px; width: 175px; float: left; margin-left: 20px; font-family: Verdana; font-size: 12px; color: #1da3ff; } #authorinformation h1 { font-family: "Francois One"; color: #222333; font-size: 24px; margin: 0px; } #socialnetworkcontainer { float: left; height: 25px; width: 115px; margin-left: 40px; margin-top: 15px; } #facebook { background-image: url(images/socialmedia_sprite.png); background-repeat: no-repeat; background-position: left; float: left; height: 20px; width: 20px; margin-right: 5px; } #gowalla { background-image: url(images/socialmedia_sprite.png); background-repeat: no-repeat; background-position: -20px; float: left; height: 20px; width: 20px; margin-right: 5px; margin-left: 5px; } #twitter { background-image: url(images/socialmedia_sprite.png); background-repeat: no-repeat; background-position: -41px; float: left; height: 20px; width: 20px; margin-right: 5px; margin-left: 5px; } #wordpress { background-image: url(images/socialmedia_sprite.png); background-repeat: no-repeat; background-position: right; float: left; height: 20px; width: 20px; margin-right: 5px; margin-left: 5px; } .pages { float: left; height: 30px; width: 305px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; font-family: "Francois One"; font-size: 18px; color: #b5b5b5; text-align: center; padding-top: 5px; } .pages a { color: #b5b5b5; } .pages a:hover { color: #DE5400; } .search_container { height: 70px; width: 295px; float: left; margin-left: 10px; margin-top: 25px; background-image: url(images/dots_spacer.png); background-position: bottom; background-repeat: no-repeat; } #search { float: left; height: 45px; width: 225px; background-color: #afafaf; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; font-family: Verdana; font-size: 14px; color: #FFF; padding-left: 15px; } #button { background-image: url(images/search_button.png); background-repeat: no-repeat; float: left; height: 47px; width: 45px; text-indent: -999in; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; background-color: #AFAFAF; } .twitter_container { float: left; height: 330px; width: 305px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; margin-top: 20px; } #twitterheader { background-image: url(images/twitterbird_icon.png); background-repeat: no-repeat; background-position: left; width: 245px; height: 45px; float: left; padding-left: 60px; font-family: "Francois One"; color: #1da3ff; font-size: 22px; padding-top: 10px; margin-bottom: 15px; } #tweet { float: left; height: auto; width: 295px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; padding-bottom: 20px; font-family: Verdana; font-size: 12px; color: #000; margin-left: 5px; margin-bottom: 15px; } .followingcontainer { float: left; height: 155px; width: 305px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; margin-top: 20px; } .followingcontainer h1 { font-family: "Francois One"; color: #222333; font-size: 24px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; } .followimage { float: left; height: 32px; width: 32px; background-color: #232434; border: 3px solid #FFF; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; }
Great! Let’s go ahead now and start on our CSS for the Author Information area. We need to open up our right container DIV and then place our Author Information stuff in there. Here is our html:
<div class="rightcontainer"> <div class="authorinfo_container"> <div id="authorimage"><img src="images/ai_holder.png" width="76" height="76" /></div> <div id="authorinformation"> <h1>Aaron Nichols</h1> <p>Web and Graphic Designer</p> </div> <div id="socialnetworkcontainer"> <div id="facebook"></div> <div id="gowalla"></div> <div id="twitter"></div> <div id="wordpress"></div> </div> </div>
Now, we have used divs for our social networking right now because the code will change substantially as we move forward into coding this to Tumblr. If you are wanting to keep this as an HTML version template all you have to do is replace
withYou may need to change up a few things in the CSS and, of course, you will need to put in the right link and id for whatever social network you are using.
Ok, let;s move onto our pages and search area. In our HTML version this will again be very basic because as we move to Tumblr we will go into more detail and will need to change stuff up, but we can’t do anything until our HTML is stable.
Place this directly after our previous html:
<div class="pages"><a href="#">My Website</a> </div> <div class="pages"><a href="#">About Me</a> </div> <div class="search_container"> <label for="search"></label> <input type="text" name="search" id="search" /> <input type="submit" name="button" id="button" value="Submit" /> </div>
Now, let’s move forward onto our twitter area. In our HTML version this will consist, mostly, of filler content until we move forward into coding for Tumblr so I will provide you with the basic HTML.
<div class="twitter_container"> <div id="twitterheader">Keep Updated With Twitter</div> <div id="tweet">Posted a new snap to dribbble with a preview of next weeks freebie, check it out and be sure to check the full size -- http://drbl.in/biSW </div> <div id="tweet">Posted a new snap to dribbble with a preview of next weeks freebie, check it out and be sure to check the full size -- http://drbl.in/biSW </div> <div id="tweet">Posted a new snap to dribbble with a preview of next weeks freebie, check it out and be sure to check the full size -- http://drbl.in/biSW </div> </div>
And, finally, to finish off our tutorial we will be adding our following area. When you see this bit of code you will probably freak out because it’s ugly but don’t worry about it right now. We have to make this code look super ugly right now to get our html stable.
<div class="followingcontainer"> <h1>I'm Following These Guys</h1> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> <div class="followimage"></div> </div> </div> </div> </body> </html>
CONCLUSION
That finishes off the tutorial! I know that it was a long time coming and there was a lot to it, but just wait until we move forward onto coding this to a tumblr theme. You will see a huge messy bunch of code (this tutorial) become an amazing bunch of code transformed into a theme.
Let us know what you thought in the comments or on Facebook.
Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.