MyBB Community Forums

Dear MyBB Community,

I made a responsive version of DVZ Shoutbox, which will be smaller on mobile devices if you use a responsive template or something like MyBBGM,

How do I do this?

Just go to your ACP, and replace your current CSS with this one:

#shoutbox{margin-bottom:10px;border: solid 0px rgba(0,0,0,0.1);}#shoutbox .head{padding:8px}#shoutbox.front .head{cursor:pointer}#shoutbox .head .right{float:right;margin:0;font-size:13px}#shoutbox.collapsed .head{opacity:0.6}#shoutbox.collapsed .body{display:none}#shoutbox .panel{border-top:solid 2px rgba(0,0,0,0.1)}#shoutbox input.text{margin:0;padding:10px 8px;width:100%;box-sizing:border-box;border:none;box-shadow:inset 0 2px 4px rgba(0,0,0,0.08);font-family:Arial,sans-serif;font-size:12px;color:#000}#shoutbox .minposts,#shoutbox .blocked{padding:6px;font-size:11px}#shoutbox .panel.minposts{background:#FFFED8;color:#727250}#shoutbox .panel.blocked{background:#FCEFEF;color:#543A3A}#shoutbox .panel p{margin:0}#shoutbox .window{border-top:solid 2px rgba(0,0,0,0.1);overflow-y:scroll}#shoutbox .data{display:table;width:100%;border-top:solid 2px rgba(0,0,0,0.1);font-family:Arial,sans-serif;font-size:12px}#shoutbox.front .data{border-top:none}#shoutbox .entry{display:table-row;width:100%;transition:background-color 0.2s}#shoutbox .entry:nth-child(even){background-color:rgba(0,0,0,0.01)}#shoutbox .entry.new{background-color:rgba(255,255,100,0.1)}#shoutbox .entry>div{border-bottom:dashed 1px rgba(0,0,0,0.05)}#shoutbox .entry:last-child>div{border-bottom:none}#shoutbox .entry>div{display:table-cell;padding:4px;background-color: white;}#shoutbox .avatar img{margin:0 auto;vertical-align:middle;max-height:20px;max-width:20px;border:solid 1px rgba(255,255,255,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1);cursor:pointer}#shoutbox .user{border-right:solid 1px rgba(0,0,0,0.05);text-align:right;white-space:nowrap}#shoutbox .text{width:100%;color:#555}#shoutbox .info{font-size:11px;color:#AAA;white-space:nowrap;text-align:right}#shoutbox .mod{padding:6px 8px;font-size:9px;font-weight:bold;color:#AAA;text-decoration:none}#shoutbox .mod:nth-of-type(2){margin-right:5px;border-left:solid 1px rgba(0,0,0,0.1)}#shoutbox .ip{margin-right:10px;color:#CECECE}#shoutbox .report{color:#CA2B2B}

I will also release a custom DVZ Shoutbox with private messaging and reports soon, so stay tuned for that, if you want to see a preview, contact me via a PM!

Greetings,

Arne, owner of Blazor, a Dutch forum.

Thanks, it's work.

Except if someone post the long url

(2015-08-17, 02:42 AM)FBI Wrote: [ -> ]Thanks, it's work.

Except if someone post the long url

Thats true, I'll make a tutorial for this in a few days.

Thanks for this. Only thing i noticed if you post a longer message it doesnt work all that well, it posts the message but you need to refresh for it to look proper again.

Thanks for this though

Any news?

why dont you try on css some type of rule not all explorers supports but new ones.

i use this:

word-wrap: break-word;

and it try to fix that even i use overflow hidden to show only a part of text and only full size shows everything...

Is not the best way but is far enought for me

I wrote about the new release with new features - reports and PM support - I really need the report feature, a lot of toxic users on chat

Pretty nifty now that I found what I needed.