ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

http://webdesign.tutsplus.com/tutorials/shutterpress-design-...

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: HTML/CSS)
Brandon Jones on May 6th 2011 with 30 comments

Tutorial Details
Difficulty: Intermediate Program: Photoshop CS5, Coda, Firefox with Firebug plugin Estimated Completion Time: 4 hours View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.

Final Product What You'll Be Creating

Today we’re continuing the tutorial series for creating the ShutterPress design by converting it from a raw PSD to a functional website using HTML and CSS. By now, we’ve created the initial site design and gathered the required assets for coding. Now we’re going to actually code it so it’ll work in all major browsers!

Intro: Day 3, HTML/CSS Conversion
Today is all about converting our PSD design into a fully working HTML site! We’ll walk you through the markup step by step, until we have a site that looks great on all major browsers. We’ll be approaching this from an intermediate level of understanding, so if we move too quickly past any of the basic steps, feel free to ask any specific questions in the Comments section below. A special shoutout goes to CodeMyConcept, who has graciously provided the code and tutorial for this day of the series!

1 of 18

09/09/2013 04:06 PM

although some people do a section of HTML and CSS at the same time and then move on to the next section.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>ShutterPress</title> <meta http-equiv="Content-Type" content="text/html. such as Javascript or PHP includes. an “images” folder and a “js” (Javascript) folder once the HTML and CSS is complete so we can add the slider.com/tutorials/shutterpress-design-.END WRAPPER BOTTOM --> </div> <!-.END RIGHT CONTENT --> <div id="wrapper-bottom"> </div> <!-. with our goals now clearly defined. We also need to nest another unordered list on the third li tag fo our submenu.w3.. we’re going to need a “css” folder with our main css file. and do the same with some dummy items on the second li tag just so we can see our javascript accordion working later on. Step 2 Left Menu HTML So we start by coding the left side menu.END WRAPPER --> </body> </html> We actually prefer to create the HTML before writing any CSS. If you missed the previous two days of this series. Here. lightbox and accordion plugins. Also the index.tutsplus. check them out here: Day One: Design Day Two: Pre-flight Ok. we’re going to need an h1 tag and a link for our logo.html file in the root folder Then we create the Basic HTML structure of the layout with the Left and Right sections.0 Strict//EN" "http://www.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS. which we definitely need to have to keep assets well structured and organized. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. as well as a div at the top and bottom of the wrapper to help us with the rounded corners while keeping the layout flexible.. All I add at this point is my CSS Reset. We’re going to be using a wrapper div to contain and center everything and our Left and Right containers inside.. We also need to add some “opened” and “closed” classes to the links and the submenu so we can control the icons and which submenu is opened by default. We have found that doing the whole HTML first helps us think of the CSS in advance and everything else that might be needed. <h1 class="logo"><a href="#">ShutterPress</a></h1><!-. and the active class to highlight the page we’re currently viewing.END LOGO --> <ul class="menu"> <li><a href="#">Home</a></li> 2 of 18 09/09/2013 04:06 PM . In this case.END WRAPPER TOP --> <div id="left"> LEFFT MENU HERE </div> <!-.w3. and an unordered list for our menu items. http://webdesign. we start out by creating the basic folder structure for our project.END LEFT MENU --> <div id="right"> RIGHT CONTENT HERE </div> <!-.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www..css" media="screen" /> </head> <body> <div id="wrapper"> <div id="wrapper-top"> </div> <!-.charset=utf-8" ></meta> <link rel="stylesheet" type="text/css" href="css/all. let’s begin! Step 1 Basic Folder Structure and Layout First.

END MENU --> Now. each with a class to help get the correct icon image and its respective hover state. <li> <a class="closed" href="#">About the Studio</a> <ul class="sub-menu closed"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> <!-.. Doing this rather than applying the styles directly to the inputs works a lot better to avoid cross-browsing issues with line heights and text indentation.. we’ll be creating a container div for the bottom section and separate [divs] for each of the two parts inside that container. we’ll create a form and divs containing the corresponding inputs to help float them and add the backgrounds and icons. For the Search section.. <div id="left-bottom"> <div class="social"> <span>Social:</span> <ul> <li><a class="tumblr" href="#">tumblr</a></li> <li><a class="picasa" href="#">picasa</a></li> <li><a class="vimeo" href="#">vimeo</a></li> <li><a class="flickr" href="#">flickr</a></li> <li><a class="twitter" href="#">twitter</a></li> <li><a class="facebook" href="#">facebook</a></li> <li><a class="rss" href="#">rss</a></li> </ul> </div> <!-.. For the Social icons we’ll need a span for the text and a list for the icons. <a class="opened" href="#">Image Galleries</a> <ul class="sub-menu"> <li><a class="active" href="#">4X4 Gallery</a></li> <li><a href="#">Portrait Gallery</a></li> <li><a href="subpage. So.END SOCIAL --> <div class="search"> <form action="#" method="get"> <fieldset> <div class="left"> <input type="text" value="" /> </div> <div class="right"> <input type="submit" value="" /> </div> </fieldset> </form> </div> <!-.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.END SEARCH --> </div> <!-.END SUB MENU --> </li> <li> http://webdesign.html">Slider Gallery</a></li> </ul> <!-.END SUB MENU --> </li> <li><a href="#">Contact</a></li> </ul> <!-. right after that come the social icons and search field in our Left section located at the bottom.tutsplus.com/tutorials/shutterpress-design-.END LEFT BOTTOM --> So here’s how it looks in our browser along with the CSS Reset 3 of 18 09/09/2013 04:06 PM .

jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.com/tutorials/shutterpress-design-.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb4. Step 3 Right Content HTML Now that we have completed our left menu.cloudfront.cloudfront.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb2.cloudfront. we need to start slicing the thumbnails and saving them with their corresponding name from the HTML so we can have some inline images showing.net/136_ShutterPress/code_phase/images/gallery/thumb11.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.net/136_ShutterPress/code_phase/images/gallery/thumb13.cloudfront.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront..net/136_ShutterPress/code_phase/images/gallery/thumb16.net/136_ShutterPress/code_phase/images/gallery/thumb15. So first we create an unordered list of images inside links so they’re click-able for our lightbox plugin.tutsplus.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.net/136_ShutterPress/code_phase/images/gallery/thumb9.cloudfront.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o. <ul class="thumbnails"> <li><a href="#"><img src="http://d3pr5r64n04s3o..jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.net/136_ShutterPress/code_phase/images/gallery/thumb14..net/136_ShutterPress/code_phase/images/gallery/thumb8.net/136_ShutterPress/code_phase/images/gallery/thumb3. and after that we create a div to contain our previous and next buttons.cloudfront.END NAVIGATION --> At this point.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.net/136_ShutterPress/code_phase/images/gallery/thumb7. we can start coding the Right content part for the thumbnail gallery.net/136_ShutterPress/code_phase/images/gallery/thumb1.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb10.cloudfront. http://webdesign.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront. 4 of 18 09/09/2013 04:06 PM .jpg" alt="thumbnail" width="1 </ul> <!-.net/136_ShutterPress/code_phase/images/gallery/thumb12.cloudfront.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o..cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb6.net/136_ShutterPress/code_phase/images/gallery/thumb5.cloudfront.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.END THUMBNAILS --> <div class="navigation"> <a href="#" class="prev">Previous</a> <a href="#" class="next">Next</a> </div> <!-.

. text and links colors and background image 5 of 18 09/09/2013 04:06 PM .. Here’s how all our HTML should be looking in Firefox Step 4 CSS Reset and Wrapper Now for some styling we set up some general settings for the fonts. http://webdesign...tutsplus.com/tutorials/shutterpress-design-.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.

sup. h4. sans-serif.jpg") no-repeat scroll center top #FFFFFF. tfoot. q. min-height:100%.} h1. padding:0. h5.} Then we set up the wrapper styles so we can build the base of our layout.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.. dt. legend. img. } a {text-decoration:none. sub.com/tutorials/shutterpress-design-. fieldset. code. because once I float my Right and Left containers the wrapper is going to collapse. body { margin:0. padding:0. kbd.select{ font:11px Arial. var. color: #0285da. vertical-align:middle.} q:before. } 6 of 18 09/09/2013 04:06 PM ./images/bg. sans-serif. ins. button { margin:0. /*--------------------------*/ /* WRAPPER */ /*------------------------*/ #wrapper-top { background:url(". i. font: 12px/12px "Lucida Sans". ol. h6.} a:hover {text-decoration:none.jpg') repeat #fff. hr. background: url('./images/content-bg. del. h4. div.. em. background:url(". dfn. ul. li. height:61px. dl. outline:0. Helvetica.jpg") repeat-y scroll center center #FFFFFF. we set up background images and the required dimensions to create our top and bottom rounded corners. center. clear: both. form. li {line-height:100%. big. } #wrapper { width: 994px. s. } #wrapper-bottom { background:url(".textarea.. h2. td. margin: 64px auto 0. label. p. ul {list-style:none.. textarea:focus { outline: none. table. span. margin:0. so we need to prevent this by clearing the floats. acronym. b.. strike. a. background:none. http://webdesign./images/content-bottom. caption. th.. abbr. which we begin todo by defining the width of our wrapper and center it with a margin: 0 auto. samp. padding:0. /*------------------------------*/ /* GENERAL RESET */ /*----------------------------*/ html. pre.. } ol. overflow: hidden. h3. cite. font. h6.. border-spacing:0. thead. h5. small. } /*---------------------------------*/ /* GENERAL SETTINGS */ /*-------------------------------*/ body { height:100%. tt. blockquote. height:18px. color: #000. dd. h2. border:0. tr. For the top and bottom divs that we defined earlier. width:994px. width:994px. strong. For the wrapper-bottom div we need to set up a clear:both. h1. "Lucida Grande". applet.} blockquote. color: #000.fieldset{border-style:none. } form.tutsplus.jpg") no-repeat scroll center top #FFFFFF. font-size:100%. body. h3. address./images/content-top. and for the wrapper we set up a background image repeated in the Y axis that will cover our content containing the division line between the Left and Right Content. object.} html. q:after {content: ''. } input:focus.} table {border-collapse:collapse. q {quotes:none. u. tbody. iframe. vertical-align: baseline.} input.

Here’s the result in our browser: 7 of 18 09/09/2013 04:06 PM ..tutsplus.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...com/tutorials/shutterpress-design-.. http://webdesign.

Step 5 Left Menu CSS Now that we have our wrapper ready we can move on with the content: first.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS... http://webdesign. float: left.tutsplus. } /*------------------------------*/ /* RIGHT CONTENT */ /*----------------------------*/ /* Thumbnail Gallery Content*/ #right { width: 758px. /*--------------------------*/ /* LEFT MENU */ /*------------------------*/ /* Main Menu */ #left { width: 235px. float: right. } 8 of 18 09/09/2013 04:06 PM .com/tutorials/shutterpress-design-... we set up the width of both the Right and Left containers so we can float them to the right position.

text-indent:-999999px.. height:32px. The sub-menu with a class ‘closed’ is set to display: none. /*--------------------------*/ /* LEFT MENU */ /*------------------------*/ /* Main Menu */ #left { width: 235px.png") no-repeat scroll 0 0 transparent. float: left.menu li a { display: block. position: relative. } #left .. width:190px. } #left .ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.logo a { background:url(". } #left . margin:8px auto 0.menu { width: 100%. margin-top: 30px. buttons and icons on the design. Now we start styling the navigation by creating a sprite image for the logo. height: 35px. display:block.tutsplus../images/sprite.. but we still want to keep things flexible just in case there’s a future need of adding more elements to the navigation. so only the default one is showing. So we set up the Left container with a minimum height so the left-bottom div can be absolutely positioned without having to use a huge margin to push it down. 9 of 18 09/09/2013 04:06 PM . min-height: 615px. border-top: 1px solid #eaeaea. This particular layout doesn’t seem like it’s going to grow in height.com/tutorials/shutterpress-design-.. We also set up the links in the navigation to be displayed as blocks so the whole area can be clickable and not just the text and add the open and close backgrounds using their respective clases and adjusting the position of our sprite. http://webdesign. this way if new elements are added the layout will still keep its original dimensions.

search .social ul li a:hover { background-position: -5px -80px. height: 34px. bottom: 0.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.png") no-repeat scroll 46px -257px transparent.com/tutorials/shutterpress-design-. border-right: 1px solid #fff. } #left-bottom . } #left . this goes as well for the hover status./images/sprite. /* Search */ #left-bottom .menu li a.social ul li a.tutsplus. } #left-bottom .opened { background:url(". } #left-bottom . float:left. } #left-bottom .social ul li a { background:url(". } #left . } #left-bottom . padding-left:25px.social ul li a. /* Social */ #left-bottom .social ul li { float: left.social ul li a. } And for the search part.sub-menu li a { padding-left: 38px. height:27px. } #left-bottom { position: absolute..png") no-repeat scroll -5px -50px transparent. text-indent: -999999px. } #left-bottom . } For the bottom social icons we set up the images using the respective clasess and setting up the background images using postions. } #left-bottom . border-top: 1px solid #eaeaea..search { overflow: hidden..closed { display: none. } #left .social ul { float:left. border-bottom: 1px solid #eaeaea. padding-left: 22px. } #left-bottom .left { background:url(". margin-top: 12px. line-height: 35px.menu li a.. display:block. border-bottom: 1px solid #eaeaea. width: 100%.menu . height: 34px./images/sprite..social { overflow: hidden.picasa:hover { background-position: -26px -80px. we’re basically floating the input container divs and setting the syles to them rather than to the input.active { color: #0285DA./images/sprite.vimeo { background-position: -47px -50px..social span { float: left. height:16px.png") no-repeat scroll 46px -231px transparent. line-height: 34px. 10 of 18 09/09/2013 04:06 PM . margin: 0 5px 0 0.png") no-repeat scroll -5px -203px transparent./images/sprite.menu li . margin:9px 0 0 10px. width:16px.. } #left . } #left-bottom .sub-menu.social ul li a..menu li a. } #left .picasa { background-position: -26px -50px. } #left-bottom .vimeo:hover { background-position: -47px -80px. http://webdesign.closed { background:url(".

search .ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.search .right input { background:none repeat scroll 0 0 transparent. width:27px. border:medium none. height:27px. background: transparent.search .right { background:url(". padding: 6px 0 0 10px. } #left-bottom . float:left.. width: 100%. http://webdesign.. } #left-bottom ./images/sprite.com/tutorials/shutterpress-design-. margin-left:20px.. cursor:pointer.png") no-repeat scroll -173px -203px transparent. } So here’s what we have right now in firefox Step 6 Right Content CSS 11 of 18 09/09/2013 04:06 PM ..left input { border: none. } #left-bottom . height:27px.tutsplus. width:158px..

} #right . width:21px.navigation . Finally. Here we’re just floating the list items to get a grid display. we add padding. width: 50px.html or inner. } #right . } #right . display: block..prev { background-position: -159px -75px. } Heres our first page finished in firefox! Step 7 Second Page HTML Moving on to our subpage. float:left.navigation .thumbnails li a { border: 1px solid #eaeaea. } #right . 12 of 18 09/09/2013 04:06 PM . background color and borders to get a frame for each thubmnail and also add margins for separation.thumbnails { overflow: hidden.html. } #right ...html and name it something like subpage. overflow: hidden.navigation { margin: -10px auto 0. height:21px. padding:10px 0 0 32px.next { background-position: -186px -75px. float: right. then we take out all the content in our #right container and start building the html needed for our slider gallery and the 3 modules below. we have our buttons with a container div that is centered and both links are floated..com/tutorials/shutterpress-design-. what we do is duplicate our index. } #right .ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.tutsplus. http://webdesign. } #right . display:block./images/sprite. /*------------------------------*/ /* RIGHT CONTENT */ /*----------------------------*/ /* Thumbnail Gallery Content*/ #right { width: 758px. text-indent:-999999px. margin: 0 8px 0 0.thumbnails li { float: left. padding: 2px. margin: 0 21px 18px 0. background: #f2f2f2.png") no-repeat scroll 0 0 transparent.navigation a { background:url("..

Then right-clicked the layer called “1720729_high”.jpg" alt="slideshow 3" width="71 </ul> <!-.net/136_ShutterPress/code_phase/images/slideshow/slide3. augue vel venenatis commodo.cloudfront.jpg" alt="slideshow 2" width="71 <li><img src="http://d3pr5r64n04s3o. Inside I have and h2 tag for the title and a paragraph for the text.END GALLERY NAVIGATION --> </div> <!-. vehicula quis </div> </div> <!-.. semper rhoncus diam justo in ante. Went back to the layer “Shape 90″ and set the opacity to 50%.. Cras rhoncus diam et sem gravida sagittis. we can just add any image without having to photoshop the rounded corners and shadows before hand.END MODULES HOLDER --> Step 8 Second Page CSS In this particular design. so here’s what we did: We took the layer called “Shape 90″ and dropped the fill to 0%. Cras lorem lectus.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.. We’re also setting a blank div that will be absolutely positioned on top of the images to function as a frame in case this layout ever needs to be implemented into a CMS to get some dynamic content. Ut tempor sapien in neque ultrices </div> <div class="module"> <h2 class="module-two">Module Two</h2> <p>Pellentesque lacinia. And finally for the slideshow we need to create a navigation div with a couple of links for our “previous” and “next” gallery navigation. selected both “Shape 90″ layers and merged them. ante neque tempor augue.. If this happens. <div id="modules-holder"> <div class="module"> <h2 class="module-one">Module One</h2> <p>Sed korem sit feugiat erat at ante vestibulum auctor.END SLIDESHOW --> <div class="slideshow-frame"></div> <div class="navigation"> <a href="#" class="prev">Previous</a> <a href="#" class="next">Next</a> </div> <!-. viverra sit amet semper quis.tutsplus. Now you can save the frame as a separate transparent . a list of images that will be the slides and we’ll also be using 3 diferent versions of the images so we can see some action later on with the jQuery Cycle plugin. selected release clipping mask and then hid the layer.png and just add some white background in the corners so it covers the images on the back. http://webdesign. getting the frame for the slides was a bit tricky.jpg" alt="slideshow 1" width="71 <li><img src="http://d3pr5r64n04s3o. 13 of 18 09/09/2013 04:06 PM .cloudfront.cloudfront. We need a div to hold the entire markup for my slideshow.END GALLERY HOLDER --> Our last block of content has our 3 modules set in their own container.com/tutorials/shutterpress-design-.net/136_ShutterPress/code_phase/images/slideshow/slide2. each module being a div on its own that I will float so they’re next to one another. Right clicked the layer and made a duplicate. Aliquam in ultrices e </div> <div class="module"> <h2 class="module-three">Module Three</h2> <p>Suspendisse porta sem vel enim molestie suscipit elementum leo porta.net/136_ShutterPress/code_phase/images/slideshow/slide1. <div id="gallery-holder"> <ul class="slideshow"> <li><img src="http://d3pr5r64n04s3o.

slideshow-frame { background:url(".slideshow li { height:442px.. z-index: 10. top:0.navigation a { height:92px. width:719px. width: 719px. /* Slideshow Gallery Content*/ #gallery-holder { position: relative. we will add the functionality after the whole thing is ready.. } #gallery-holder . width:719px } #gallery-holder .png") no-repeat scroll 0 0 transparent. margin-top:-44px.com/tutorials/shutterpress-design-. http://webdesign. after that we set up the styles along with the sprite as background image for the icons. margin:20px auto 0. left:0. height:442px./images/slideshow-frame. height: 442px. We set the list items from the slider to have a position: absolute. top:0.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.. with relation to the ul so they’ll collapse and look as just one image so we can get the real look of the layout.. } #gallery-holder . We set the dimensions for the modules and floated them to get them inline. 14 of 18 09/09/2013 04:06 PM .tutsplus. position:absolute. position:absolute. The previous and next buttons are also positioned absolutely so we can get them centered vertically.. left: 0.

.navigation a. font-weight:normal..} a:hover {text-decoration:none. padding-left:25px. width: 204px./fonts/museo700-regular-webfont.module h2 { font-family:'Museo700'. font-weight:normal. position:absolute. font: 12px/12px "Lucida Sans".eot?#iefix') format('embedded-opentype'). } #modules-holder .png") no-repeat scroll -128px -140px transparent./fonts/museo700-regular-webfont. margin-top: 24px. right:0.ttf') format('truetype').next { background-position:-65px -103px.module-one { background:url("..module { float: left.module p { color: #6a6a6a.com/fontface/generator) and placed the fonts in their own fonts folder in the root of our Project and set up the CSS in our general settings using the right paths for the fonts./images/sprite. url('. } #modules-holder . we can see that the module titles have a Museo font on them which is not a web-safe font. So we ran the font through Font Squirrel (http://www. url('. /*---------------------------------*/ /* GENERAL SETTINGS */ /*-------------------------------*/ body { height:100%.png") no-repeat scroll -128px -110px transparent.. } #modules-holder .. #modules-holder .tutsplus../images/bg.svg#Museo700') format('svg').fontsquirrel.module h2. src: url('. } After all this./fonts/museo700-regular-webfont.module-three { background:url(". color: #000. font-style: normal./fonts/museo700-regular-webfont.jpg') repeat #fff.. width:47px.} @font-face { font-family: 'Museo700'. top:50%.. http://webdesign. url('.navigation a. left:auto. margin-bottom:5px. color: #0285da. } #modules-holder .png") no-repeat scroll -128px -170px transparent. } 15 of 18 09/09/2013 04:06 PM . margin-right: 40px.module h2..module-two { background:url(". "Lucida Grande".. so we’re going to need to set this up with @font-face. } #gallery-holder . background: url('.module h2 { font-size:18px. } #modules-holder . margin-top:-44px.eot'). z-index:15./fonts/museo700-regular-webfont. font-weight: normal./images/sprite. sans-serif... margin-bottom:5px.woff') format('woff'). color: #000.com/tutorials/shutterpress-design-. padding-left:25px. } #gallery-holder . } #modules-holder { overflow: hidden. src: url('./images/sprite.module h2. font-size:18px. line-height: 15px. and now our second page is complete. } #modules-holder .prev { background-position:-6px -103px. margin-left: 20px. } a {text-decoration:none.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS. } So all we need to do now is set the font family to our h2 tags..

jpg" alt="thumbnail" width="150" height="121" /></a></li> And finally. $(this).css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/prettyPhoto.hasClass('closed') ) { $(this).toggleClass('opened closed').toggleClass('opened closed'). So.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.org/TR/xhtml1/DTD/xhtml1-strict. </body> <script <script <script <script </html> type="text/javascript" type="text/javascript" type="text/javascript" type="text/javascript" src="http://ajax.all.cycle. We’ll also create a main.siblings(). $(this).prettyPhoto.ready(function() { //prettyPhoto LIGHTBOX $("a[rel^='prettyPhoto']").org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>ShutterPress</title> <meta http-equiv="Content-Type" content="text/html. $(this). If it’s “closed”.js"></script> src="js/jquery. then it opens the respective submenu and collapses all others and changes the class of the links so the right icon is displayed.css" media="screen" /> </head> We also reference our javascript files at the bottom of our document just before the closing html tag.opened'). Make sure you read the plugins’ documentation so you can find out exactly how they work and what options you have to customize them.charset=utf-8" ></meta> <link rel="stylesheet" type="text/css" href="css/all.js file and start configuring our plugins. 16 of 18 09/09/2013 04:06 PM .js"></script> src="http://cloud.js file in our JS folder where we can put our custom function and plugin configuration. then it just closes it and changes the icon.slideDown().sub-menu').2/jquery.github. we reference our stylesheet in the header of the html files <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1... the cycle plugin can be linked from Github and jQuery can be linked from Google APIs.tutsplus.gif" rel="prettyPhoto"><img src="images/gallery/thumb1.0 Strict//EN" "http://www.menu li a').parent().. Make sure you download the prettyPhoto plugin and copy the necessary assets to their respective folders (javascript in the “js” folder.js"></script> src="js/main.com/ajax/libs/jquery/1.com/projects /prettyphoto-jquery-lightbox-clone/ ) and then weÕll create a custom function for our menu accordion.parent().click(function(){ if ( $(this).com/cycle/ ) and prettyPhoto for our lightbox gallery ( http://www. $(document). For our accordion we need to set up a click function that checks if the link has a class of “opened” or “closed”.w3.min.googleapis.5.slideUp().malsup.next(). We also have the links pointing at a place holder 500×500 image so we can display something on our lightbox <li><a href="images/500X500.siblings().no-margin-for-errors.find('.w3.latest..dtd"> <html xmlns="http://www.com/tutorials/shutterpress-design-.find('a.com/downloads/malsup/cycle/jquery. Step 9 jQuery Magic Now to add some functionality and animation to our Project we’re going to be using two plugins: jQuery Cycle for our slideshow (http://jquery. If the one that’s being clicked has a class of “open”.js"></script> Now we go back to our thumbnail list and set up the links with the rel attribute for our lightbox gallery to work. //MENU ACCORDION $('#left . etc. stylesheets to the “css” folder. http://webdesign. we go over to our main.prettyPhoto(). ).

} }) //SLIDER GALLERY $('. but if you’re interested in having a WordPress version of this template made available at ThemeForest. $(this).. return false.hasClass('opened') ){ $(this). next: '#gallery-holder .toggleClass('opened closed').cycle({ fx: 'fade'. From dark.tutsplus.. End of Day 3: Review And now we have a 100% finished Project with working galleries and submenu animations. }). prev: '#gallery-holder .ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.navigation a. Check out their site at CodeMyConcept. grungy styles to modern metallic effects.slideshow').slideUp(). let me know in the comments section! Coding Credits The coding and tutorial for this phase of the series was all provided by CodeMyConcept. we’re going to walk you through how to create your own custom variations of this template using just a couple quick edits.next().prev' }).next'. Enjoy! In the final day of our tutorial series.com/tutorials/shutterpress-design-.. which offers a wide range of coding services for designers – from PSD>HTML conversions to Email templates and WordPress theme conversions. http://webdesign.. you won’t want to miss the final day! Oh! And we mentioned this on the first day of the tutorial. return false.navigation a.com! Brandon Jones is MDNW on Themeforest 17 of 18 09/09/2013 04:06 PM . } else if ( $(this).

http://webdesign.tutsplus. drawing. but even more. photographing. Tags: codeconversiondesignphotographyportfolioPSD>HTMLsitetemplateweb designwebsitewordpress By Brandon Jones Brandon Jones is the old Wptuts+ Editor. Brandon has been designing.. Not content to pick one media and stick with it has left Brandon with a broad range of talents that have allowed him to work on projects ranging from grungy digital art kits to Fortune 500 software prototyping. He loves design.ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS.com/tutorials/shutterpress-design-. Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. From sunny Southern California.. and coding the world around him for the past several years. Check out Brandon's work at ThemeForest. Find out more 18 of 18 09/09/2013 04:06 PM . he loves the passion and creative spirit that embodies the design community...