Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign in to follow this  

    Who's Who List with user's Avatar

       (0 reviews)

    Pretty basic Who's Who list with user's avatar and the ability to color each character name row with the characters colors. Can be used on both dark and light themes without problems. All colors can be changed and so can the font.


    Actual Template Responsive

    Template code

    <style>
    .whoClearfix::after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    .whovilleOuter {
    width: 547px;
    margin: 0 auto;
    color: #fff;
    background: rgba(0,0,0,.5);
    border: 1px solid #FFF;
    border-radius: 5px;
    padding: 15px;
    }
      .whovilleInner {
        margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: space-around;
    flex-flow:wrap;
      }
    .whovilleOuter a {
    color: #fff;
    text-decoration: none;
    }
    .whovilleOuter a:hover {
    color: #ccc;
    }
    .whovilleOuter h2 {
    text-align: center;
    font-size: 20px;
    font-family: "Special Elite";
    text-transform: uppercase;
    }
    .whovilleMember {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    margin-right: 15px;
    background: #000;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
      display: inline-block;
    flex: content;
      font-family: "Special Elite";
    }
    .whovilleMember:nth-child(even) {
    margin-right: 0;
    }
    .whovilleMember ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .whovilleMember li {
    padding: 5px;
    }
      li.memberName {
        text-align:center;
        font-size: 1.5em;
        padding: 15px 5px;
        word-wrap: break-word;
      }
    
    .whovilleMember li.charColor1 {
    background: #66596A;
    }
    .whovilleMember li.charColor2 {
    background: #3F2E36;
    }
    .whovilleMember li.charColor3 {
    background: #424D0B;
    }
    @media only screen and (max-width: 767px) {
    .whovilleOuter {
    width: 280px;
    }
      .whovilleMember:nth-child(odd) {
    margin-right: 0;
    }
    }
      .whoCopy {
        text-align: right;
      }
    
    </style>
    
    <div id='whoville' class='whovilleOuter whoClearfix'>
    <h2>Who's Who List</h2>
    <div class='whovilleInner'>
    <div class='whovilleMember'>
    <img src='https://via.placeholder.com/250x400' />
    <ul>
    <li class='memberName'>Member Name</li>
    <li class='charColor1'><a href='#'>Character 1</a></li>
    <li class='charColor2'><a href='#'>Character 2</a></li>
    <li class='charColor3'><a href='#'>Character 3 with a really long ass name</a></li>
    </ul>
    </div>
    
    <div class='whovilleMember'>
    <img src='https://via.placeholder.com/250x400' />
    <ul>
      <li class='memberName'>Member Name is super long</li>
    <li class='charColor1'><a href='#'>Character 1</a></li>
    <li class='charColor2'><a href='#'>Character 2</a></li>
    <li class='charColor3'><a href='#'>Character 3 with a really long ass name</a></li>
    </ul>
    </div>
    
    <div class='whovilleMember'>
    <img src='https://via.placeholder.com/250x400' />
    <ul>
      <li class='memberName'>MemberNameissuperlongwithnospaces</li>
    <li class='charColor1'><a href='#'>Character 1</a></li>
    <li class='charColor2'><a href='#'>Character 2</a></li>
    <li class='charColor3'><a href='#'>Character 3 with a really long ass name</a></li>
    </ul>
    </div>
    
    </div>
      <div class='whoCopy'>
      	<a href='https://rpginitiative.com/'>Made by Morrigan of RPG Initiative.</a>
      </div>
    </div>
    
    
    <!-- Delete these instructions before you post this on your site. -->
    <!-- This is the code to put in a Code Box for your members to add their Member section
    
    	<div class='whovilleMember'>
    		<img src='https://via.placeholder.com/250x400' />
    		<ul>
    			<li class='charName'>Member Name</li>
    			<li class='charColor1'><a href='#'>Character 1</a></li>
    		</ul>
    	</div>
    
    -->
    <!-- This is the code to put in a Code Box for your members to add characters
    
    <li class='charColor1'><a href='#'>Character 1</a></li>
    
    -->
    
    <!-- To add or change character colors copy this code in the CSS and edit to your desire. Make sure each class is unique:
        .whovilleMember li.charColor {
        background: #HEXCOLR;
        }
    -->
    <!-- END Delete these instructions -->
    
    <!-- Leave everything below here alone but you can delete this line -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
    <script  src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet"> 
    Morrigan

    Edited by Morrigan

    Sign in to follow this  


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest



×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.