IMVU Client Replica HomePage

User avatar
by DataMine · 7 posts
7 years ago
Posted 7 years ago · Author
This is a homepage design that mimics the home tab of the IMVU Client. It's built using JQuery, HTML, Css and a webfont.

You can see a live demo here: https://www.imvumafias.org/staff/datamin ... esign.html

Image Lightbox

You can put a picture of your own avatar on it. Just modify this part of the code:
[code=css file=Untitled.txt]/* Client Homepage Main Page */
#chp-pg1 {
background-image: url("userm.png");
background-position: 83px 50px;
background-repeat: no-repeat;
left: 0px;
padding: 100px 50px 100px 300px;
position: absolute;
text-align: center;
top: 31px;
}[/code]

Replace "userm.png" with your own picture from IMVU. Make sure the image is no larger than 131x477 pixels.


You can customize it with your own images for the buttons. Here's the template: https://www.imvumafias.org/staff/datamin ... mplate.png

You'll need to uncomment this part of the code to customize the buttons:
[code=css file=Untitled.txt]<!-- #cBtn1 { background-position: 0px 0px;}
#cBtn2 { background-position: 144px 0px; }
#cBtn3 { background-position: 0px -112px; }
#cBtn4 { background-position: -144px -112px; }
#cBtn5 { background-position: 0px -224px; }
#cBtn6{ background-position: -144px -224px; }

#cBtn1:hover { background-position: 0px -336px;}
#cBtn2:hover { background-position: 144px -336px; }
#cBtn3:hover { background-position: 0px -448px; }
#cBtn4:hover { background-position: -144px -448px; }
#cBtn5:hover { background-position: -0px -560px; }
#cBtn6:hover { background-position: -144px -560px; } -->[/code]


You'll have to know a little css to make this homepage design usable if you want to use the tabs. I did not position the container that holds the different tab content so you can put whatever you want in it and style the container to suit your needs.


Full Code:
Code
<html>
   <head>
                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $(document).on('click', '.chp-tab', function(event) {
               $('.chp-tab').removeClass('active-tab');
               $(this).addClass('active-tab');
            });

            $(document).on('click', '#chp-bbar > i', function(event) {
               $('#chp-bbar').css('padding','0px').css('height','2px');
            });               

            $(document).on('click', '.chp-tab', function(event) {
               var pageid = '#chp-pg' + $(this).attr('id').substring('7','8');
               $('#chp-pg1').hide();
               $('.chp-pg').hide('fast', function() {                  
                  $(pageid).show();
               });
            });            
         });         
      </script>
      <style type="text/css">
         body,html {
            background-color:rgb(2,2,2);
            font-family: Arial,Verdana,sans-serif;
         }

         <!-- #cBtn1 { background-position: 0px 0px;}
         #cBtn2 { background-position: 144px 0px; }
         #cBtn3 { background-position: 0px -112px; }
         #cBtn4 { background-position: -144px -112px; }
         #cBtn5 { background-position: 0px -224px; }
         #cBtn6{ background-position: -144px -224px; }
         
         #cBtn1:hover { background-position: 0px -336px;}
         #cBtn2:hover { background-position: 144px -336px; }
         #cBtn3:hover { background-position: 0px -448px; }
         #cBtn4:hover { background-position: -144px -448px; }
         #cBtn5:hover { background-position: -0px -560px; }
         #cBtn6:hover { background-position: -144px -560px; } -->


         /* Client Homepage Wrapper */
         #chp-wrap {
            position: relative;
            width: 900px;
         }
         
         
         /* Client Homepage Tabs */
         #chp-tabs {
            color: #FFFFFF;
            display: block;
            left: 50px;
            position: absolute;
            text-shadow: 1px 1px #000000;
            top: 0px;
            width: 100%;
         }
         
         .chp-tab {
            background-color: rgb(99,99,99);
            cursor: pointer;
            display: inline-block;
            font-weight: bold;
            height: 23px;
            margin-left: 5px;
            min-width: 47px;
            position: relative;            
            text-align: center;            
         }
         
            .chp-tab > span:first-child {
               background-color: rgba(180, 180, 180, 0.4);               
               display: block;
               height: 50%;
               top: 0px;
            }
         
            .chp-tab > span:nth-child(2) {
               bottom: 12px;
               display: block;
               padding: 3px 10px 3px 10px;
               position: relative;
            }
            
            .active-tab {
               background-color: rgb(242, 196, 0);
               color: #000000;
               text-shadow: none;
            }
            
               .active-tab > span:first-child {
                  background-color: rgba(251, 237, 128, 0.6);
               }
         
         /* Client Homepage Blue Bar */
         #chp-bbar {
            background-color: rgb(242, 196, 0);
            height: 31px;
            padding: 7px 7px 0px 7px;
            position: absolute;
            top: 23px;
            width: 100%;
         }
         
            #chp-bbar > i {
               cursor: pointer;
               position: absolute;
               right: 5px;
               top: 11px;
            }
                           
         /* Client Homepage Main Page */
         #chp-pg1 {
            background-image: url("userm.png");
            background-position: 83px 50px;
            background-repeat: no-repeat;
            left: 0px;
            padding: 100px 50px 100px 300px;
            position: absolute;
            text-align: center;
            top: 31px;
         }
         
            #chp-pg1 * {
               color: rgb(196, 196, 196);
            }
            
         .chp-mbtn {
            background-color: rgb(60, 60, 60);
            background-image: url("tempBtn.png");
            border-radius: 15px;
            cursor: pointer;
            display: inline-block;
            height: 112px;
            margin: 10px;
            overflow: hidden;
            position: relative;
            text-decoration: none;
            width: 144px;
         }

            .chp-mbtn:hover { background-color: #8E6100; }
            
            .chp-mbtn > span:first-child {
               background-color: rgba(255, 255, 255, 0.1);
               border-radius: 150px;
               display: block;
               height: 300px;
               left: -75px;
               position: relative;
               top: -245px;
               width: 300px;
            }

            .chp-mbtn > span:nth-child(2) {
               bottom: 10px;
               display: block;
               position: absolute;                  
               width: 150px;
            }

         .chp-pg {
            color: #FFFFFF;
            display: none;
            height: 100%;
            left: 0px;
            position: absolute;
            top: 61px;
            width: 100%;
         }
      </style>
   </head>
   <body>
      <div id="chp-wrap">
         <div id="chp-tabs">
            <span id="chp-tab1" class="chp-tab active-tab"><span></span><span>Home</span></span>
            <span id="chp-tab2" class="chp-tab"><span></span><span>Text</span></span>
            <span id="chp-tab3" class="chp-tab"><span></span><span>Long Text</span></span>
            <span id="chp-tab4" class="chp-tab"><span></span><span>Text</span></span>
         </div>      
         <div id="chp-bbar">
            <i class="fa fa-times"></i>
            Text
         </div>
         <div id="chp-pg1">
            <h2>Text</h2>
            <span class="chp-mbtn" id="cBtn1"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn4"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn5"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn6"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn2"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn3"><span></span><span>Text</span></span>
         </div>         
         <div class="chp-pg" id="chp-pg2">dffdfsdfs</div>
         <div class="chp-pg" id="chp-pg3">fdsfdsfs</div>
         <div class="chp-pg" id="chp-pg4">dsffsdfsdfsdf</div>         
      </div>
   </body>
</html>
Posted 7 years ago
Wow this is cool wish i knew how to make this work lmao

-- Thu Apr 16, 2015 1:01 am --

Wow this is cool wish i knew how to make this work lmao
Posted 7 years ago · Author
mvre wrote:
Wow this is cool wish i knew how to make this work lmao


I can help you get it set up.
Posted 7 years ago
Yo DM Great Work bro! im Digging the UI design alot :p 8) 8) :sm1: :sm0:
Posted 7 years ago
D.M wrote:
mvre wrote:Wow this is cool wish i knew how to make this work lmaoI can help you get it set up.
That would be cool whenever you have the time.
Posted 7 years ago
this is pretty cool

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT
Select a forum Protection     Help & Support     Introductions     Mafia News     IMVU News General Discussion     IMVU Lounge        IMVU Series / Roleplaying        Social Games     Mafia Market     Mafia Tools        Premium IMVU Tools        Off Topic Tools     Off Topic     Contests Creator Corner     Graphics Design        Photoshop        GIMP     Basic Creator Help     Catalog And Product Showcase     3D Meshing        3Ds Max        Sketchup        Blender Gangsters with Connections     White Hat Activities        Google Hacking        Trackers Programming Corner     Coding        Python        .Net (C#, VB, etc)        Flash        JAVA        Autoit        Batch        HTML & CSS        Javascript        PHP        Other        IMVU Homepage Codes           General           About me Panel           Messages Panel           Special Someone Panel           Visitors Panel           New Products Panel           Rankings Panel           Wishlist Panel           My Badges Panel           Outfits Panel           Url Panel           Groups Panel           Slideshow Panel           My Room Panel           Sandbox panel           Layouts     Help & Requests Free Credits     Approved Methods     Submit Methods Free Money     Approved Methods     Submit Methods Adult Corner     Get Mafia AP Here     AP Lounge        AP Social Games        Casual Dating Tips     IMVU Slave Market & Escorts