How to Convert a Slick PSD Design to XHTML/CSS
Making the slider work
We are on the very last step! The final thing we need to do to make this site fully functional is add a little css to our global.css file and then add a small inline script after our nivo-slider.min.js import.
Adding the CSS
At the end of your global.css file add the following code (This is the default code for Nivo-Slider).
/*
* jQuery Nivo Slider v2.1
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
NOTE: While it is not required, it is best to keep their copyright and such.
Adding the Inline Script
Now we are going to add the short little inline script right after our Nivo-Slider.min.js import. The options are mainly default except all controls are disabled so that they don’t get into the way.
<script type="text/javascript">
$(window).load(function() {
// Slider
$('#slider .slides').nivoSlider({
effect: 'random',
directionNav: false,
controlNav: false
});
});
</script>
We are done!
Finally we have done it, you should now have a fully functional XHTML web page that validates and everything (NOTE: Browser specific CSS3 won’t validate, it’s okay!). We took the PSD, sliced it up, created the hardcode HTML, then styled it to look like the PSD. Thats a load of work you just did, I hope everything turned out okay and please feel free to ask questions!
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14
This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Wow) this is a great tutorial!
Brilliant tutorial I will have to try it out asap.
Thanks alot ^^
Awesome Tutorial.
Thanks you for share.
Good tutorial for beginner like me, thank you 🙂
Very good tutorial, It covered a lot of things, thanks
Nice Tut 🙂
Dude, charset before title. 🙂
i’m going to have to take time on this one.thanks for sharing
Thanks you for share, great tutorial!
useful info. thanks..soon:)