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


#95

Are you using a background color, or image?


#97

That’s not directly possible. The opacity property applies to elements - it can’t apply to “part” of an element.

The easiest way of doing something like that (besides actually saving a partially transparent image) would be to have the text in a separate element from your background image and using relative positioning to put it in the right place.

(It is technically possible to use one element, but it seems a bit hacky to me. See this SO question)


#100

You have to plug the server into BlockheadsFans first.


#103

Simple enough, assuming you aren’t using <center> anywhere in your page:

<style>
#spoilerButton, center {
  color: white;
}
</style>

Possible sure, much easier to just put the text on the image though.


#105

I could help.


#106

Is there any way to get the links at the bottom to be in a black font?
image


#107

Unfortunately Dave used an inline style so this requires a bit of JS.

<script>
  addEventListener('load', function() {
    document.querySelectorAll('a[style]').forEach(function (el)     {
      el.style.color = '#000000'
    })
  })
</script>

#109

would anyone be able to quickly make the coding for me to put these images in my welcome message please?

![IMG_1744|281x500]

I would really appreciate it as i have been trying and failing for the last few weeks.


#110

All you need is to put this code in your welcome message:

<img src="" alt="" />

You need to put the image source (URL) inside the " under src="". I also recommend putting alt="" so people know what the image is suppose to be if it doesn’t load. Inside the " under alt should be a descriptive message of the image.


#111

Hey @Bibliophile, I wonder if you could post the code that fixed the slideshow I wanted in my welcome message months back so it doesn’t do this.

If you still have the PM from months back maybe you could dig into there and find the code that works for this.

Code:

Summary
<style>
  .container {
   position: relative;
   color: white;
  }

  .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
  }

  .container img {
    width: 100%;
    border-radius: 10px;
    transition: opacity 2s;
  }
  .container img:not(:first-child) {
    top: 0;
    position: absolute;
  }
  .container img:not(.visible) {
    opacity: 0;
  }
</style>

<div class="container">

  <img class="visible" src="http://i65.tinypic.com/28ingpw.jpg">
  <img src="https://picsum.photos/1599/890?image=200">
  <div class="top-left"><h4>Test123.</h4></div>

</div>

<script>
  var container = document.querySelector('.container')
  setInterval(function () {
    var oldImg = container.querySelector('.visible')
    var newImg = oldImg.nextElementSibling.tagName === 'IMG' ? 
      oldImg.nextElementSibling : container.firstElementChild

    oldImg.classList.remove('visible')
    newImg.classList.add('visible')
  }, 5000)
</script>

#112

There is absolutely nothing in the code you just sent that could cause that… and I’m not going to hunt through a year’s worth of messages for code.


#113

Heya would anyone be able to PM me if you can help me make a slideshow of images, some drop downs and moving announcements for my welcome? I am happy to pay either in server credit or in game resources. I didn’t want to spam this thread with my noob questions :see_no_evil:


#114

Could you try testing it out since i use an iPad and i am not sure if it has to do with devices or not.

i believe you we’re working on the problem between march of this year


#115

Huh, iOS is weird, 100% non intuitive behavior.

Change:

  .container img:not(:first-child) {
    top: 0;
    position: absolute;
  }

to

  .container img:not(:first-child) {
    top: 0;
    left: 0;
    position: absolute;
  }

#116

Thanks :slight_smile:


#117

Is it possible that you could make something for every time you enter the welcome message it says the next thing or random thing.

Sort of like this example

“hello”

And then when you enter the welcome message again it says “welcome back”

This could go handy with the thing i want to do with tips


#118

That’s fairly easy to do, this is a bit hacker than I’d like… but it makes it easy to use anywhere:

Note If you are using insertOrdered in multiple places, you need to pass the function a unique key that it will use to save the number of times it has been run. If you don’t pass it a key, it will use the world name and _loads and you will experience conflicts.

Demo


Code
<script>
  function insertRandom(msgs) {
    var span = document.currentScript.parentElement.appendChild(document.createElement('span'))
    span.textContent = msgs[Math.floor(Math.random() * msgs.length)]
  }
  function insertOrdered(msgs, key) {
    key = key || document.title + '_loads'
    var loads = localStorage.getItem(key) | 0
    var span = document.currentScript.parentElement.appendChild(document.createElement('span'))
    span.textContent = msgs[loads % msgs.length]
    localStorage.setItem(key, loads + 1)
  }
</script>


<p>
Before
<script>
insertRandom([
    "Hello",
    "Hi",
    "What?"
])
</script>
After
</p>

<p>
Before
<script>
insertOrdered([
    "First",
    "Second",
    "Third"
], 'orderedTest') // orderedTest is optional
</script>
After
</p>

#119

wow @Bibliophile this is so awesome! thank you!


#120

Would it be possible to create a box like this with a custom color, and being able to put text and stuff in it? Actually had to break a piece of code to do this.


#121

How do you get this bottom section to say custom words, seem to forget where the last code for this was.