Jump to content
  • Who's Who List with user's Avatar

       (1 review)

    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




    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

    Arasnia

      

    Hey
    the idea is nice 😄 

    Here are some suggestions: 
    - maybe make a fixed size on the Avatar + Name + Character Slots under it, so even if there is a long named char the boxes on the same row will be inlined 
    - maybe add a scrollbar on the character slots so if the person have more than 3 characters for example his list wont be XXXX long so the page will be stretched out. For example on my private forum i have over 30 Characters (since its a 2player rpg) now imagine what this would look like xD
     

    Share this review


    Link to review

×
×
  • 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.