Shoutbox Mod for vBulletin 5 & 6

[hyper22]

Thanks Glenn for the advice of just using css_additional. I've managed to get a pretty good look on v2.0 without touching the templates:



It might not be everybody's cup of tea, but it's the vibe I've been chasing of those mid-00's boards. The functionality is great especially with the custom smiley support. Thanks so much for providing this to the community!

I think the only tweak I'd like to do is to reformat the timestamp, or move it to the right of the message text. I am sure I could do this by messing with the template but for pure CSS I'm really satisfied right now.

Also, turning on the avatars breaks my structure, so for now I'm ok with those being off. Would love to get them inline to the left of the online indicator and shrunk down but that's a challenge for another day

[glennrocksvb]

Nice customization you got there hyper22!

I'll check if it's possible to move the timestamp to the right using CSS. And the avatars as well.

[glennrocksvb]

hyper22, I'm afraid you can't separate username and date by using CSS without modifying the template. I will make an option in a future release to choose from different layouts.

[glennrocksvb]

Mikk< I recommend you to add the following custom CSS code in css_additional for Dark theme. The URL Preview block (and possibly Quote too) is too bright for Dark theme.

html[data-theme=dark] .shoutbox__message-text .b-bbcode__url--preview,
html[data-theme=dark] .shoutbox__message-text .bbcode_quote {
    background: #0f1824;
}​

[glennrocksvb]

Mikk, and this to replace the fading yellow background in Dark mode when new/old posts are displayed:

html[data-theme=dark] .shoutbox__message-item--old,
html[data-theme=dark] .shoutbox__message-item--new,
html[data-theme=dark] .shoutbox--latest-messages-bottom .shoutbox__message-item:has(~ .shoutbox__message-item--old),
html[data-theme=dark] .shoutbox--latest-messages-bottom .shoutbox__message-item--new ~ .shoutbox__message-item,
html[data-theme=dark] .shoutbox--latest-messages-top .shoutbox__message-item:has(~ .shoutbox__message-item--new),
html[data-theme=dark] .shoutbox--latest-messages-top .shoutbox__message-item--old ~ .shoutbox__message-item {
  animation-name: fadeInOutMessageDark;
}
@keyframes fadeInOutMessageDark {
    0% {
    background-color: #11143c;    
  }
  20% {
    background-color: #161b50;
  }
  60% {
    background-color: #1c2263;
  }
  100% {
    background-color: transparent;
  }
}​

[glennrocksvb]

hyper22, Mikk, et. al. Here's a sneak peek of upcoming v2.1 version:

• Option for Compact View (see screenshot below)
• Date and Time now follows the "Datestamp Display Option" in AdminCP > Settings > Options > Date and Time Options. - Normal, Yesterday/Today and Detailed. Screenshot below is in Detailed setting.

[hyper22]

Checking my error_log file for an unrelated issue and I found it's full of this error:

[03-Feb-2025 21:01:19 UTC] PHP Warning:  Undefined array key "DeleteOwn" in /home/xxx/public_html/core/packages/shoutboxthatrocks/api/shoutbox.php on line 606

[glennrocksvb]

hyper22, thanks for reporting. I'll take a look.

[glennrocksvb]

hyper22, I've fixed the issue and released v2.1. Paid customers should receive a confirmation email containing the download link in their PayPal email.

[hyper22]

Hey glenn, what is the css to target for the "new message" highlighted background? It's a light cream sort of color when new messages pop in and I'd like to tweak that in my css_additional, but I can't figure out the class from using inspect element.

[glennrocksvb]

Add this in css_additional.css template. This is similar to the CSS code I posted in post #35.

.shoutbox__message-item--old,
.shoutbox__message-item--new,
.shoutbox--latest-messages-bottom .shoutbox__message-item:has(~ .shoutbox__message-item--old),
.shoutbox--latest-messages-bottom .shoutbox__message-item--new ~ .shoutbox__message-item,
.shoutbox--latest-messages-top .shoutbox__message-item:has(~ .shoutbox__message-item--new),
.shoutbox--latest-messages-top .shoutbox__message-item--old ~ .shoutbox__message-item {
  animation-name: fadeInOutMessageDark;
}
@keyframes fadeInOutMessageDark {
   0% {
    background-color: #11143c;    
  }
  20% {
    background-color: #161b50;
  }
  60% {
    background-color: #1c2263;
  }
  100% {
    background-color: transparent;
  }
}

Adjust the colors according to your preferences. The colors should go from darker to lighter colors.

[flohse]

Hello Glenn,

first of all, I really like your shoutbox mod. Thanks for your good work.

But I have found some small issues.

On the first message the online indicator is placed in the middle of the avatar.



After a page refresh the online indicator is placed as it should be, but if you hover over the avatar the user name is messed up.



And I think the emojis are way to small. Is there a chance to enlarge the emojis and smilies a little bit?

Thanks in advance.

Frank

[glennrocksvb]

As for the size of Shoutbox text, emoji and smileys, they are the same size as the text, emojis and smileys in the posts.


The smiley images are naturally 16x16 and you don't want to stretch them or they would lose quality.

For the emojis, if you want to enlarge them globally (in both posts and shoutbox), you'll need to update the post_content_font style variable in the Style Manager in AdminCP to increase the font size of the post content. And then add this custom CSS in css_additional.css template to make the Shoutbox text the same as the post text by using the same style variable.

.shoutbox__message-text {
    font: {vb:stylevar post_content_font};
}​

But if you want to update the Shoutbox text only without updating the forum post text, then add this custom CSS in css_additional.css template:

.shoutbox__message-text {
    font-size: 1.4rem;
}

Adjust the font-size value accordingly. 1.4rem is 14px.

You can't update the size of the emoji without affecting the size of the regular text. Emojis are like regular characters with more bytes and emojis and regular characters are not styled separately.

[glennrocksvb]

I have fixed the issues reported by flohse and released v2.2.

Here's the release notes which I also added in the first post:

v2.2

• Fixed misplaced online icon when posting the very first Shoutbox message.
• Fixed garbled username in online status tooltip text (e.g. "%1$s is online now") for the first Shoutbox message on page load. This was caused by delayed rendering in templates employed by vBulletin.

Customers who've purchased this mod will receive an email confirmation containing the download link.

[flohse]

Hello Glenn,

here is another small issue. There is one pictogram missing when using the shoutbox on iOS Safari.

See screenshot.


And unfortunately the glowing status icon is not in the right place.

Frank