free layouts and styles for virb.com
I changed this:
To this:
Just because i could. And you can too. Here’s a little guide and some freebie layouts for you to get started.
The Dark One
So here it is, a little virb layout for your pleasure. It’s a dark one. As it’s my first layout, I’ll walk you through it. All future layouts will be available in ZIP format with README files to follow. Check out the bottom of this page for all other available layouts I’ve produced. Like them? Send me some feedback if you use them, i might add a comments section to add them into. If you do contact me, let me know the address of your virb so I can see what you’ve done with it. I’ve included a credit to myself in the designs with a link back here, so please do not remove that if you use one of these layouts. That’s all I ask!
The standard virb profile is very white background and dark foreground. This is totally the opposite. To use the layout, log in to your profile, go to customize, and paste the following code into the HTML Layout box:
<div id="header">
<module>$VIRB_Meta()</module>
</div>
<div id="profile_container">
<div id="left_side">
<module>$VIRB_About()</module>
<module>$VIRB_PhotosFlickr(5)</module>
<module>$VIRB_blogRecentFull(3)</module>
<module>$VIRB_PersonalityTags(Music)</module>
<module>$VIRB_PersonalityTags(Movies)</module>
<module>$VIRB_PersonalityTags(Television)</module>
<module>$VIRB_PersonalityTags(Interests)</module>
<module>$VIRB_TopFriends(+5 Random)</module>
<module>$VIRB_Groups(5)</module>
</div>
<div id="right_side">
<module>$VIRB_Blogs()</module>
<module>$VIRB_orgMembershipsRandom(5)</module>
<module>$VIRB_PlayerPersonal(White)</module>
<module>$VIRB_virbTunesRecentSongs(5)</module>
<module>$VIRB_virbTunesTopArtists(3)</module>
<module>$VIRB_Comments()</module>
<module>$VIRB_Connect()</module>
</div>
<hr class="clear" />
</div>
<div id="bottomblock">
<p>© Design by <a href="http://www.1ncu8u5.co.uk" title="incubus: random stuff">incubus: random stuff, web design</a></p>
</div>
Then, paste the following code into the CSS styles box.
* { padding:0; margin:0; font: normal 12px Arial, verdana, helvetica, sans-serif; }
p { }
img { border:0; }
hr { height:0; width:0; border:0; }
ul,li { list-style-type:none; }
ul li { margin: 0 0 8px 0; line-height: 1.3; }
table,tr,td { border:0; border-collapse:collapse; vertical-align:top; }
.tagline { margin: 0 0 4px 0; }
textarea { clear: both; width: 380px; height: 140px; margin: 10px auto; padding: 2px; background: ; }
h1 { font-size: 28px; font-weight: normal; color:#333333; letter-spacing:-1px; margin: 0 0 10px 0; }
h2 { font-weight: 28px; font-weight: normal; line-height: 100%; margin: 0 0 .2em 0; letter-spacing: 0; }
h3 { font-size: 24px; color: #444444; font-weight: normal; letter-spacing:0; padding:0 0 1em 0; margin:0; }
h4 { font-size: 20px; color: #666666; padding-bottom:10px; }
h5 { position: absolute; top: 88px; left: 360px; width: 135px; height: 12px; font: normal 9px "Lucida Grande",Tahoma,sans; color: #99ea00; line-height: 12px; }
#comments { padding-right: 0; margin: 20px 0 10px 0; }
a,a:link,a:visited { color:#666666; text-decoration: underline; }
a:hover { color:#dddddd; text-decoration: none; }
div#header { margin: 0 auto; width: 960px; clear: both; }
div#bottomblock { margin: 0 auto; width: 960px; clear: both; }
div#body_container, div#profile_container { color: #444444; text-align: center; }
div#body_container{ margin: 0 auto; padding: 20px; background: #000000; }
div#profile_container { clear: both; background: #000000; width: 960px; margin: 0 auto; }
div.profile_meta { float: left; padding: 15px; }
div.profile_meta h2 { color: #999999; font-size: 12px; }
div.profile_photo { float: left; width: auto; padding: 10px; text-align: center; border: 1px solid #dddddd; }
.profile_photo img { position: relative; display: block; }
img.virb_image { border: 1px solid #dddddd; float:left; padding: 4px; margin:0 15px 15px 0; }
a:hover img.virb_image { background:#dddddd; }
div.module { border: 0px solid #dddddd; padding: 10px; margin: 0 0 10px 0; display:block; text-align:left; line-height:150%; }
div#left_side { float:left; width: 520px; margin:0 30px 35px 0; }
div#right_side{float:left; width: 400px; margin:0 0 35px 0; }
#connect { padding-right:0; }
#meta, #meta_music, #connect{ border:0; }
.clear{position:relative; clear:both; }
Once done, press save and go take a look at your profile. If everything looks like this:
Congratulations. You got it spot on, otherwise, try the instructions again.
Groovy. I’ve included in the layout the flickr module, so if you have that and your account is authorised through virb, you’ll be able to see your flickr photos in this layout too. beaut. I’ll add some more styles, maybe a few more fancy ones too with the graphics to download too in the near future.
You’re free to take the code and do what you like wth it, but you must link back to credit me in your design. Thanks! :-)
New addition: IE7 style for virb.
It’s like having internet explorer inside your browser with your virb page inside that. Quality. There’s a readme in the zip. I might make a Firefox one soon too, as I much prefer it
Here’s a screenshot:
There are no comments. Be the first!
You must be logged in to post comments