Jump to content
  • Simple Who's Who List

       (0 reviews)

    For the admin that wants something easily customisable and likes a list that's just that, a list.

     

    Edit to match your theme!


    Actual Template Not Responsive

    • Name

      • Name stuff and things
      • Name stuff and things
    • Name

      • Name stuff and things
      • Name stuff and things
    • Name

      • Name stuff and things
      • Name stuff and things

    Template code

    <ul id="kit-whoswho">
      <li class="player">
        <h2>Name</h2>
        <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/100x100.png.e1cfed5cb473a0f45279c7ef48bf9cfb.png">
        <ul>
          <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
          <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
        </ul>
      </li>
      <li class="player">
        <h2>Name</h2>
        <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/100x100.png.e1cfed5cb473a0f45279c7ef48bf9cfb.png">
        <ul>
          <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
          <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
        </ul>
      </li>
      <li class="player">
        <h2>Name</h2>
        <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/100x100.png.e1cfed5cb473a0f45279c7ef48bf9cfb.png">
        <ul>
          <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
          <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
        </ul>
      </li>
    </ul>
    
    <style>
      
    /******** WHO'S WHO LIST - EDIT AS YOU LIKE. ********/
    
    ul#kit-whoswho {
      list-style-type: none;
      margin: 2px auto; /* center the box */
      margin-block-start: 0em; /* ditch annoying browser style */
      padding-inline-start: 0px; /* ditch annoying browser style */
      padding: 10px;
      background: #f2f2f2; /* CHANGE COLOUR TO MATCH YOUR THEME! */
      width: 90% /* adjust as necessary */
    }
    
    ul#kit-whoswho li:first-child > h2 {
      margin-block-start: 0em /* ditch annoying browser style */
    }
    
    ul#kit-whoswho li.player {
      border-bottom: 1px solid rgba(0,0,0, .025) /* CHANGE COLOUR TO MATCH YOUR THEME! */
    }
    
    ul#kit-whoswho li.player > h2 {
      text-align: right;
      margin-block-start: 5px;
      margin-block-end: 0; /* ditch annoying browser style */
      color: #000; /* CHANGE COLOUR TO MATCH YOUR THEME! */
      border-bottom: 1px solid #ccc /* CHANGE COLOUR TO MATCH YOUR THEME! */
    }
    
    ul#kit-whoswho li.player img {
      position: relative;
      top: 5px; /* push the image down from the border */
      float: left /* put the image onto the left, next to the text */
    }
    
    ul#kit-whoswho li.player ul {
      padding-inline-start: 0; /* ditch annoying browser style */
      margin-block-start: 0; /* ditch annoying browser style */
      list-style-type: none;
      border-left: 1px solid #ccc; /* CHANGE COLOUR TO MATCH YOUR THEME! */
      margin-left: 105px; /* push the list right of the image, change this value to be image width + 5px */
      padding: 5px 0 5px 5px;
      min-height: 100px /* ensure list is at least the height of the image, change this value to match image height */
    }
    
    ul#kit-whoswho li ul li:last-child {
      padding-bottom: 5px
    }
    
    ul#kit-whoswho li.player a {
      text-decoration: none;
      color: #000 /* CHANGE COLOUR TO MATCH YOUR THEME! */
    }
    
    ul#kit-whoswho .details {
      font-style: italic;
      color: #121212 /* CHANGE COLOUR TO MATCH YOUR THEME! */
    }
    
      /***************** END WHO'S WHO LIST ********************/</style>



    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.