Hi sonictrip,
thanks for your feedback.
The scrolling part on the startpage is driven by jQuery Cycle plugin
http://jquery.malsup.com/cycle/
you can also see how i used it in the free template BizBuzz
http://www.i-arts.eu/bizbuzz/ for the news section.
For the social icons i am also using jQuery and unordered list containing icons as background which is absolutely positioned on the page.
The CSS:
Code: Select all
/* Social Navigation */
ul#socialNav {
position: fixed;
top: 250px;
left: 0px;
list-style: none;
z-index: 100;
}
ul#socialNav li {
width: 100px;
}
ul#socialNav li a {
display: block;
margin-left: -85px;
margin-bottom: 2px;
width: 100px;
height: 20px;
line-height: 20px;
background-color: #c7c4bc;
background-repeat: no-repeat;
background-position: 87px 50%;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
padding: 2px 5px 2px 0;
color: #fff;
font-weight: bold;
text-indent: 15px;
}
ul#socialNav .facebook a {
background-image: url('http://img.ich-mach-das.at/facebook.png');
}
ul#socialNav .twitter a {
background-image: url('http://img.ich-mach-das.at/twitter.png');
}
ul#socialNav .linkedin a {
background-image: url('http://img.ich-mach-das.at/linkedin.png');
}
ul#socialNav .flickr a {
background-image: url('http://img.ich-mach-das.at/flickr.png');
}
ul#socialNav .google a {
background-image: url('http://img.ich-mach-das.at/buzz.png');
}
ul#socialNav .skype a {
background-image: url('http://img.ich-mach-das.at/skype.png');
}
ul#socialNav .xing a {
background-image: url('http://img.ich-mach-das.at/xing.png');
}
the jQuery
Code: Select all
$(function() {
$('#socialNav a').stop().animate({'marginLeft':'-85px'},1000);
$('#socialNav > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
the HTML:
Code: Select all
<ul id="socialNav">
<li class="facebook"><a href="#" target="_blank" title="Facebook">Facebook</a></li>
<li class="twitter"><a href="#" target="_blank" title="Twitter">Twitter</a></li>
<li class="linkedin"><a href="#" target="_blank" title="LinkedIn">LinkedIn</a></li>
<li class="flickr"><a href="#" target="_blank" title="Flickr">Flickr</a></li>
<li class="google"><a href="#" target="_blank" title="Google">Google</a></li>
<li class="skype"><a href="#" title="Skype">Skype</a></li>
<li class="xing"><a href="#" target="_blank" title="Xing">Xing</a></li>
</ul>
For the portfolio part i have used the News module, renamed to Portfolio and the overview with thumbnails is actually a summary template of news.
Images are being uploaded in through extra fields and resized with help of supersizer plugin by JeremyBass.
The hover effect is again being powered by jQuery look at this example
http://papermashup.com/jquery-image-zoom-effect/ and some css.
Very very nice, didnt think it was possible to make CMSMS look so professional!
This is exactly the beauty of CMSMS and why i love it, you can turn any css+xhtml code into CMSMS, faster and easier then with any other CMS.
and please do not try Printing it, i didn't add Print stylesheet yet, but try viewing it on iPhone 
