Making DVZ Shoutbox responsive!

[ArneVD]

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.

[FBI]

Thanks, it's work.

Except if someone post the long url

[ArneVD]

Thanks, it's work.

Except if someone post the long url

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

[iMage]

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

[Eldenroot]

Any news?

[Whiteneo]

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

[Eldenroot]

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

[Sumato]

Pretty nifty now that I found what I needed.