Profile

  • Profile page consists of several sections and plugins.
    For more information about each plugin please refer to its relevant section.
  • Profile picture is .img-responsive inside a .profile-picture : 
    
    <img src="path/to/profile-pic.jpg" alt="Alex's Avatar" class="img-responsive" id="avatar" />
  • Profile contact info is inside .profile-contact-links which contains optional .profile-contact-links and .profile-social-links: 
    
  
    
     
        
        Add as a friend
  • Profile info fields are inside .profile-user-info with optional .profile-user-info-striped class:
  • Profile activity is inside .profile-feed with .profile-activity items: 
    
  
    
    
    
        user avatar
        
        Name
        
     Time
  • Profile friends list which is inside .profile-users and consists of .itemdiv.memberdiv items with .user, .body and .popover parts: 
    
  
    
   
    

       
    
          
             user avatar
          
       
    

       
    
          
    
            
              
              user name
            
          
    
       
    

       
    
         
    
         
    
            
    occupation
    With some javascript code, you can dynamically change the popover's direction to right or left: 
    $('.memberdiv').on('mouseenter touchstart', function(){
   var $this = $(this);
   var $parent = $this.closest('.tab-pane');//or other relevent parent

   var off1 = $parent.offset();
   var w1 = $parent.width();

   var off2 = $this.offset();
   var w2 = $this.width();

   var place = 'left';
   if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) 
         place = 'right';
		
   $this.find('.popover').removeClass('right left').addClass(place);
 })
 .on('click', function(e) {
    e.preventDefault();
 });
  • Skill progress bars are inside .profile-skills with following markup: 
    
   
    
     
    
	   PHP & MySQL
	   70%