Dashboard

Infobox

  • Little stat and info boxes which consist of .infobox-icon and .infobox-data and optional .stat arrows or .badges
    32
    comments
    8%
    
  
    
     
  
    
	
  
    
     32
     
    comments
    
  
    
 
  
    8%
  • Infobox colors are:
    1. .infobox-purple
    2. .infobox-purple2
    3. .infobox-pink
    4. .infobox-blue
    5. .infobox-blue2
    6. .infobox-blue3
    7. .infobox-red
    8. .infobox-brown
    9. .infobox-wood
    10. .infobox-light-brown
    11. .infobox-orange
    12. .infobox-orange2
    13. .infobox-green
    14. .infobox-green2
    15. .infobox-grey
    16. .infobox-black
  • Use .infobox-dark class for dark style:
  • Using .infobox-small class makes it smaller:
  • You can use .badge or .stat elements inside infobox: 
    
 ...
 
    +32%
    See badge section for more info about badegs 
    
 ...
 
    4%
    .stat can have .stat-success & .stat-important classes
  • When using Sparkline plugin wrap it inside a .infobox-chart: 
    
   
    
       
   
    
   
    
      6,251
      
    pageviews
  • When using Easy pie chart plugin wrap it inside a .infobox-progress: 
    
   
    
      
    
         42%
      
    
   
    
   
    
      traffic used
      
    ~ 58GB remaining

Conversation List

  • Conversations are inside a .dialogs element and each item is a .itemdiv.dialogdiv:
  • Each item has several optional parts, such as .body .user .time .tools etc: 
      
    
    User's Avatar
  
    

  
    
      
     2 min
    
      
    
         name
      
    
      
    message text
  • For more info please see
    mustache/app/views/pages/partials/index/conversations.mustache

Task List

  • Task list is an .item-list which contains several items with different border colors: 
      
  
    •  ... 
      • 
  
    •  ... 
      •
  • Available colors are:
    1. .item-orange
    2. .item-orange2
    3. .item-red
    4. .item-red2
    5. .item-green
    6. .item-green2
    7. .item-blue
    8. .item-blue2
    9. .item-blue3
    10. .item-pink
    11. .item-purple
    12. .item-black
    13. .item-grey
    14. .item-brown
    15. .item-default
  • For more info please see
    mustache/app/views/pages/partials/index/tasks.mustache

Member List

  • Member list is a .clearfix container with several .itemdiv.memberdiv items: 
    
  
    
    ....
  • Each item has several parts such as .user .body, etc : 
    
  
    
    Avatar
  
    

  
    
    
    Name
    
    
     20 min
  • For more info please see
    mustache/app/views/pages/partials/index/members.mustache

Comment List

  • Comments are inside .comments container with several .itemdiv.commentdiv items: 
    
  
    
   ...
  • Each item has several parts such as .user .body .text, etc: 
     
    
   
    
    Avatar
   
    
	
	
    
        
    Bob Doe
    
        
     6 min
    
        
    
            
            comment text
  • For more info please see
    mustache/app/views/pages/partials/index/comments.mustache