What have you always wanted to do in a welcome message?


#1

There are plenty of guides covering what you might want to do in your welcome message with fancy HTML or CSS, but as far as I can tell - there’s no thread dedicated for asking how to do something. Well, now there is!

Reply with something that you’ve always wanted to do in your welcome message, but couldn’t figure out how and I’ll do my best to help you out - and if it isn’t incredibly basic, I’ll make a video explaining how it works!

Example:

Background music - just use this code:

<audio autoplay>
  <source src="../gym.mp4" type="audio/mpeg">
</audio>

../gym.mp4 can be changed to any audio URL, the ones built into the game are listed here


How do you add a background color to welcome message on multiplayer?
What kind of things can I type into welcome message?
Background+Music, etc
#2

I’ve wanted to do two things:
Run a slideshow, without just using a gif full of images
Have navigation buttons at the top of the wm, like the image below
image


#3

I’ve always wanted spoilers, so I can have it show a certain part when you click to open it.


#4

Simple. <details> <summary> Enter Title of Spoiler Here </summary> This Text Will be Hidden </Details>

Enter Title of Spoiler Here. This Text Will Be Hidden.

#6

In addition to

You can also make a spoiler that clicks open on its own and you click to close it

<details open><summary> Title Here </summary> Enter Text here </details>
Title Here Enter Text here

#8

I never can get an image url to put in my welcome message.


#9

Fairly simple to do :slight_smile: I covered this code in a video already (slightly different due to mobile devices being annoying, use the code here)

Code
<style>
  .navPage:not(.visible) {
    display: none;
  }

  .navWrapper {
    display: flex;
    justify-content: center;
  }
  
  .navButton {
    margin: 5px 10px;
    padding: 10px;
    background: #2976f2;
  }

  [data-to-page] {
    cursor: pointer;
  }
</style>

<nav class="navWrapper">
  <div class="navButton" data-to-page="home">Home</div>
  <div class="navButton" data-to-page="test">Test</div>
</nav>

<hr>

<div class="navPage visible" data-page="home">
  Home
  <a data-to-page="test">Go to test page</a>
</div>

<div class="navPage" data-page="test">
  Test
</div>

<script>
  function showPage(pageName) {
    var oldPages = Array.from(document.querySelectorAll('div.navPage.visible'))
    oldPages.forEach(function (page) { page.classList.remove('visible') })

    var page = document.querySelector('[data-page="' + pageName + `"]`)
    if (!page) return

    page.classList.add('visible')
  }

  document.addEventListener('click', function (event) {
    if (!event.target) return;
    if (event.target.getAttribute('data-to-page')) {
      showPage(event.target.getAttribute('data-to-page'))
    }
  })
</script>

I bet I can do this :slight_smile: 40 minutes later yep! Here’s the video where I make it and then explain how the code works. (I make and explain the first, then extend it to make the second then explain that)

Option 1:

Code
<style>
    .slider-container {
        /* Change these as desired */
        width: 200px;
        height: 100px;
        margin: 0 auto;
        
        overflow: hidden;
    }

    .slider-container img:not(.visible) {
        display: none;
    }
</style>

<div class="slider-container">
    <img src="https://placeimg.com/200/100/animals">
    <img src="https://placeimg.com/200/100/nature">
    <img src="https://placeimg.com/200/100/arch">
</div>

<script>
    Array.from(document.querySelectorAll('.slider-container'))
    .forEach(function (slider) {
        if (slider.childElementCount < 2) return

        if (!slider.querySelector('.visible')) {
            slider.firstElementChild.classList.add('visible')
        }
        
        setInterval(function () {
            var oldImage = slider.querySelector('.visible')
            var nextImage = oldImage.nextElementSibling || slider.firstElementChild
            
            oldImage.classList.remove('visible')
            nextImage.classList.add('visible')
        }, 10 * 1000)
    })
</script>

Option 2:

Code
<style>
    .slider-container {
        /* Change these as desired */
        width: calc(200px + 80px);
        height: 100px;
        margin: 0 auto;
        background: blue;
        
        overflow: hidden;
        position: relative;
    }
    
    .slider-container img {
        position: absolute;
        left: 40px;
    }
    
    .slider-container img:not(.visible) {
        display: none;
    }
    
    .previous, .next {
        top: calc(50% - 20px);
        pointer: cursor;
        font-size: 40px;
        
        position: absolute;
    }
    .previous {
        left: 7px;
    }
    .next {
        right: 7px;
    }
</style>

<div class="slider-container">
    <span class="previous">&lt;</span>
    <span class="next">&gt;</span>
    <img src="https://placeimg.com/200/100/animals">
    <img src="https://placeimg.com/200/100/nature">
    <img src="https://placeimg.com/200/100/arch">
</div>

<script>
    Array.from(document.querySelectorAll('.slider-container'))
    .forEach(function (slider) {
        if (slider.childElementCount < 4) return

        if (!slider.querySelector('.visible')) {
            slider.querySelector('img').classList.add('visible')
        }
        
        var seconds = 10
        var lastClick = 0
        
        function next() {
            var oldImage = slider.querySelector('.visible')
            var nextImage = oldImage.nextElementSibling || slider.querySelector('img')
            
            oldImage.classList.remove('visible')
            nextImage.classList.add('visible')
        }
        
        setInterval(function () {
            if (Date.now() - lastClick < seconds * 1000) return
            next()
            
        }, seconds * 1000)
        
        slider.querySelector('.next').addEventListener('click', function () {
            lastClick = Date.now()
            next()
        })
        slider.querySelector('.previous').addEventListener('click', function () {
            lastClick = Date.now()
            
            var oldImage = slider.querySelector('.visible')
            var previousImage = oldImage.previousElementSibling
            if (!previousImage || previousImage.tagName != 'IMG') {
                previousImage = slider.querySelector('img:last-child')
            }
            
            oldImage.classList.remove('visible')
            previousImage.classList.add('visible') 
        })
    })
</script>

What do you mean by this?

The trick to this is getting the image URL itself, not the page that holds the image… on iOS hold down on an image and then select “copy”, this will copy the image URL and you can plug that into an img tag like this:

<img src="https://forums.theblockheads.net/user_avatar/forums.theblockheads.net/donutask/45/58730_1.png">


#10

That welcome message looks very good!


#11

I’m not sure if this is even possible to do or not, but I wanted to try and make a background image fade to just a solid color.

I put more information on this thread, nobody has replied to it.


#12

While you can do this with CSS, it’s not a very easy thing to do.

It would be much easier to throw the image in GIMP and just add a gradient of a solid color starting from the bottom.

That said… here’s how you have to do it with CSS:

Assuming you want a full screen background

html {
    background: #f00 url(https://lorempixel.com/output/cats-q-c-850-480-9.jpg) no-repeat;
}

body {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 0, 0, 0) 400px, /* where you want the color to start to fade in */
        rgba(255, 0, 0, 1) 480px /* the height of the image */
    );
}

If you want it within an element, you will need to use two elements. The first as the image background, and the second as the solid color background.


<div class="outer">
  <div class="inner">
    Text here!
  </div>
</div>

<style>

.outer {
  background: #f00 url(https://lorempixel.com/output/cats-q-c-850-480-9.jpg) no-repeat;
}
.inner {
  background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 0, 0, 0) 400px, /* where you want the color to start to fade in */
        rgba(255, 0, 0, 1) 480px /* the height of the image */
    );
}

</style>

(Just an excuse to post a picture of a cat? Nahhhhh)


#13

Cool. :+1:

What about a hamburger menu, like for the JavaScript navigation bar?
I noticed that when you get to about 3 or 4 buttons, it might not fit on the welcome messages of phones.


#15

I actually ended up playing with this some more - you can actually do it with one element! The trick is that CSS3 allows specifying multiple backgrounds. jsFiddle

html {
  height: 100vh;
	background:
  linear-gradient(to bottom, 
    rgba(255, 0, 0, 0) 100px,
    rgba(255, 0, 0, 1) 200px),
  url("https://placeimg.com/800/200/nature") no-repeat;
}

I’ll take a look at a hamburger menu and the buttons Sunny posted tomorrow :slight_smile:


#16

Those look like Google icons.

I’d been working on a #tips-guides thread about these for a while now, never really got them to work till recently. If you need a quickie answer, just search w3schools icons on the web. Or wait till bib gives an example. :slight_smile:


#17

Do you know how to put a picture as the background of a wm?


#20

If you wan’t the background color of the entire welcome message:

<style>
body {
  background-image: url(example.com/image.jpg);
}
</style>

If you wan’t the white part of the message the background image:

<style>
#messageContent{
  background-image: url(example.com/image.jpg);
}
</style>

Replace the example.com/image.jpg with the URL of the image you want.

#21

I love this font I’ve found and I’ve been trying to use the font face rule to add the font but I can’t find out how to link the .ttf file. Do you have any suggestions?
Link


#22

You can’t link to that font as dafont.com goes to a lot of effort to prevent hot linking. Your best bet is to download the font, unzip the file, and then stick it in a Github repo. You can then use something like rawgit.com to embed the font in your welcome message.


#23

Took me a bit to get around to it - but I added a menu like the Message Bot uses. There’s a new preset for it :slight_smile:

KP7 now has a guide for the icons - after that it’s just setting the width to 100% and the padding to 0.5em or so. Welcome Message Icons


#24

I really want to be able to remotely edit the headers for all the welcome messages i have created.
ie. being able to read from a github pages text file and automatically insert it into the head, or a div, of my welcome messages.


#25

That’s actually pretty easy :wink:

Example: Getting the style page I use for the WM Fiddle

fetch('https://bibliofile.github.io/Welcome-Message-Fiddle/dist/style.css')
  .then(r => r.text())
  .then(alert)

Example: Inserting the css into a new style element

<script>
fetch('https://bibliofile.github.io/Welcome-Message-Fiddle/dist/style.css')
  .then(r => r.text())
  .then(css => {
    document.head.appendChild(document.createElement('style')).innerHTML = css
  })
</script>

Unfortunately, fetch is only supported with new browsers, so iOS 8 for example won’t work. (Really, anything under 10.3) Thankfully, a simple polyfill fixes this. Add it before your script to get stuff.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>