Welcome Message Templates


#1

When starting a welcome message, it’s often helpful to have something to start from and then tweak to your liking. Lots of people don’t like it when their welcome message is copied, but that’s the whole point here!

To avoid accidentally copying someone’s page, I’ve used placeholder text instead of writing actual rules.

Boxes

Fiddle

Code
<section>
  <h3>News</h3>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper nibh ac blandit efficitur. Aliquam sit amet semper tellus. Etiam interdum velit ut purus commodo, id porttitor urna interdum. Nullam in metus ac massa hendrerit facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sed metus felis. Etiam sed nisi ornare, consequat nulla non, egestas erat. Aliquam vitae molestie lectus. Curabitur fringilla tempus urna in efficitur.</p>
</section>

<section>
  <h3>Rules</h3>
  
  <ol>
    <li>Rule 1</li>
    <li>Rule 2</li>
    <li>Rule 3</li>
  </ol>
</section>


<style>
  /* Remove white box around all content */
  #messageContent {
    background: transparent;
    padding: 0;
  }
  
  /* Change page background */
  body {
    background: linear-gradient(0, rgba(0,0,0,1) 0%, rgba(0,112,255,1) 100%);
    height: 100vh;
    overflow: scroll;
  }
  
  /* Define page sections */
  section, .section {
    padding: 4px;
    background: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
  }
  h3 {
    margin: 0;
  }
  
  /* Blockheads font, doesn't work in fiddle */
  @font-face {
    font-family: "blockheads_font";
    src: url("http://theblockheads.net/fonts/BlockheadsFont-Regular.ttf");
  }

  body {
    font-family: blockheads_font;
  }
  
  /* Nicer show more info button */
  button {
    background: transparent;
    border: 1px solid #000000;
    border-radius: 5px;
    padding: 5px;
    width: 200px;
  }
</style>

<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>

Blockheads Menu

Fiddle

Code
<!-- Has to be at the top -->
<script src="https://gitcdn.xyz/repo/Bibliofile/972ac2bc8173ac1fe0af766e5d1d5f61/raw/5503531f98f881388a8d91bac9c5a79e85cd111e/script.js"></script>
<!-- Can be anywhere -->
<link rel="stylesheet" href="https://gitcdn.xyz/repo/Bibliofile/972ac2bc8173ac1fe0af766e5d1d5f61/raw/5503531f98f881388a8d91bac9c5a79e85cd111e/style.css" />

<div data-page="index">
  <h3>Menu!</h3>
  <p>This will be shown first.

  The first &lt;h3&gt; element will be used as the content for the menu. It isn't required for the index page.
  </p>
  <script>insertMenu()</script>
</div>

<div data-page="rules">
  <h3>Rules</h3>
  
  <ol>
    <li>Rule 1</li>
    <li>Rule 2</li>
    <li>Rule 3</li>
  </ol>
  <script>insertMenu()</script>
</div>

<div data-page="news">
  <h3>News</h3>
  <p>Server news!</p>
  <script>insertMenu()</script>
</div>

<div data-page="admin" data-menu-class="green">
  <h3>Get Admin</h3>
  <p>How not to become admin</p>
  <script>insertMenu()</script>
</div>

If you want to peek at the JS / CSS used to make this, instead of just including a script in your page, take a look at this gist.


(more later, maybe? I wanted to do at least 3, ideally 5+, but I’m running out of time.)


Part of the 2018 Advent Calendar


The 2018 Blockheads Advent Calendar
#2

2018 Advent Calendar seems to be not valid


#3

Oops, fixed. That’s what I get for guessing what the URL will be. Thanks!


#4

This is so great, Bib. Thanks for this.:thumbsup:


#5

Used the menu template. It looks great!


#6

How do you’ve copy it?