WM templates

This is Welcome Message templates. You can copy below code to use my template. Constantly updated with new template.

Template 1

This template features Rules, Staff, Server news. It designed by simple white background and blockheads font. Here’s the screenshot of this WM.


This is the code. Paste it.

<style>
 @font-face {
   	font-family: 'BlockHeadsFont';
    src: url('https://binuball.github.io/BlockheadsFont-Regular.ttf');
  }
  p, h1, h2 {
    margin: 0;
    padding: 0;
    border: 0;
  }
  body center:first-of-type b {font-size: 1.3rem;}
  * {font-family: 'BlockHeadsFont', 'Open Sans', sans-serif;}
  body {line-height: 1.7; background: #fff;}
  body a {color: #cc990c!important;}
  body p {margin-bottom: .8rem;}
  body img {max-width: 100%; width: 100%; margin: 1rem 0;}
  #messageContent, .section {background: #fff; color: #333; padding: 1rem 2rem; word-spacing: -1px; margin: 1rem 0 1.5rem;}
  #spoilerButton {background: none; border: 1px solid #333; padding: .4rem 2rem; cursor: pointer; outline: 0; margin-top: 1rem;}
  #spoilerButton:active {border: none;}
  .title {text-align: center; margin: 2.5rem 0 .8rem; border: 2px solid #333;}
  .news {background: #eee; margin: 1rem 0; padding: .8rem;}
  .date {}
  ol {list-style: none; counter-reset: li; padding-left: 1.5rem;}
  ol li {position: relative;}
  ol li:not(:last-child) {margin-bottom: .8rem;}
  ol li::before {content: counter(li); counter-increment: li; position: absolute; left: -1.5rem; background: #eee; padding: .2rem; top: -0.2rem; min-width: 10px; text-align: center;}
</style>
<h1 class='title'>Welcome to [server name]!</h1>
<p>Hello friends, this server is designed for surviving and PVP. I hope you can enjoy this server and please consider join this server. This is server introduction section.</p>
<h1 class='title'>Rules</h1>
<ol>
  <li>Don't spamming</li>
  <li>Please do not grief</li>
  <li>Follow admins</li>
</ol>
<h1 class='title'>Staff</h1>
<ol>
  <li>BINUBALL</li>
  <li>BINUBALL</li>
  <li>BINUBALL</li>
  <li>BINUBALL</li>
</ol>
<h1 class='title'>Server news</h1>
<p>Server news, this is area for server news. You can write text on it to describe about server news.</p>
<div class='news'>
  <span class='date'>2021-07-07</span>
  <h2>Our server opened!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at interdum est. Proin vestibulum, tortor sit amet fermentum consequat, enim eros tincidunt tellus, sit amet maximus massa leo nec sapien. Quisque dapibus dolor sit amet euismod auctor. Praesent tincidunt libero vel iaculis ultrices.</p>
<p>Praesent non mi mi. Donec lacus enim, mollis aliquet mi quis, fringilla condimentum mauris. Maecenas vel sodales erat, nec malesuada metus. Nam posuere dui non lacinia tempus..</p>
</div>
<div class='news'>
  <span class='date'>2021-06-01</span>
  <h2>Preparing server..</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at interdum est. Proin vestibulum, tortor sit amet fermentum consequat, enim eros tincidunt tellus, sit amet maximus massa leo nec sapien. Quisque dapibus dolor sit amet euismod auctor. Praesent tincidunt libero vel iaculis ultrices.</p>
<p>Praesent non mi mi. Donec lacus enim, mollis aliquet mi quis, fringilla condimentum mauris. Maecenas vel sodales erat, nec malesuada metus. Nam posuere dui non lacinia tempus..</p>
</div>
<script>
  addEventListener('load', function () {
    // Add .section to the center elements defined in the page already
    Array.from(document.querySelectorAll('center')).forEach(function (el) {
      el.classList.add('section');
    });
    // Remove lines between sections
    Array.from(document.querySelectorAll('hr')).forEach(function (el) {
      el.remove();
    });
  });
</script>

Template 2

This is not very different from Template 1. But it’s dark and new font, IBM Plex Sans. You can put image on top. Upload your image on imgur and get link. Here’s the screenshot of this WM.


This is the code. Paste it.

<style>
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap');
  body, p, h1, h2 {
    margin: 0;
    padding: 0;
    border: 0;
  }
  body center:first-of-type b {font-size: 1.3rem;}
  * {font-family: 'IBM Plex Sans', 'Open Sans', sans-serif;}
  body {line-height: 1.7; background: #171717; color: #fff;}
  body a {color: #cc990c!important;}
  body p {margin-bottom: .8rem;}
  body img {max-width: 100%; width: 100%; margin: 1rem 0;}
  #messageContent, .section {background: #171717; padding: 1rem 2rem; word-spacing: -1px; margin: 1rem 0 1.5rem;}
  #spoilerButton {background: none; border: 1px solid #fff; padding: .4rem 2rem; cursor: pointer; outline: 0; margin-top: 1rem; color: #fff}
  #spoilerButton:active {border: none;}
  .title {margin: 3rem 0 .8rem;}
  .news {background: #232325; margin: 1rem 0; padding: .8rem; color: #fff;}
  .news h2 {color: #fff}
  .date {}
  ol {list-style: none; counter-reset: li; padding-left: 1.5rem;}
  ol li {position: relative;}
  ol li:not(:last-child) {margin-bottom: .8rem;}
  ol li::before {content: counter(li); counter-increment: li; position: absolute; left: -1.5rem; background: #232325; padding: .2rem; top: -0.2rem; min-width: 10px; text-align: center;}
</style>
<h1 class='title'>Welcome to [server name]!</h1>
<img src='https://images.unsplash.com/photo-1606787947360-4181fe0ab58c?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80'>
<p>Hello friends, this server is designed for surviving and PVP. I hope you can enjoy this server and please consider join this server. This is server introduction section.</p>
<h1 class='title'>Rules</h1>
<ol>
  <li>Don't spamming</li>
  <li>Please do not grief</li>
  <li>Follow admins</li>
</ol>
<h1 class='title'>Staff</h1>
<ol>
  <li>BINUBALL</li>
  <li>BINUBALL</li>
  <li>BINUBALL</li>
  <li>BINUBALL</li>
</ol>
<h1 class='title'>Server news</h1>
<p>Server news, this is area for server news. You can write text on it to describe about server news.</p>
<div class='news'>
  <span class='date'>2021-07-07</span>
  <h2>Our server opened!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at interdum est. Proin vestibulum, tortor sit amet fermentum consequat, enim eros tincidunt tellus, sit amet maximus massa leo nec sapien. Quisque dapibus dolor sit amet euismod auctor. Praesent tincidunt libero vel iaculis ultrices.</p>
<p>Praesent non mi mi. Donec lacus enim, mollis aliquet mi quis, fringilla condimentum mauris. Maecenas vel sodales erat, nec malesuada metus. Nam posuere dui non lacinia tempus..</p>
</div>
<div class='news'>
  <span class='date'>2021-06-01</span>
  <h2>Preparing server..</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at interdum est. Proin vestibulum, tortor sit amet fermentum consequat, enim eros tincidunt tellus, sit amet maximus massa leo nec sapien. Quisque dapibus dolor sit amet euismod auctor. Praesent tincidunt libero vel iaculis ultrices.</p>
<p>Praesent non mi mi. Donec lacus enim, mollis aliquet mi quis, fringilla condimentum mauris. Maecenas vel sodales erat, nec malesuada metus. Nam posuere dui non lacinia tempus..</p>
</div>
<script>
  addEventListener('load', function () {
    // Add .section to the center elements defined in the page already
    Array.from(document.querySelectorAll('center')).forEach(function (el) {
      el.classList.add('section');
    });
    // Remove lines between sections
    Array.from(document.querySelectorAll('hr')).forEach(function (el) {
      el.remove();
    });
  });
</script>
8 Likes

Wow! Thanks! Your template will definitely come in handy!

for android users i can only wish you substantial luck for putting this in, it’s very frustrating

Template 2 has just released

I copied it and customized a lot, thanks

I hope you kept the photo of the family eating!