Making DVZ Shoutbox responsive!
#1
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.
Arne Van Daele - Developer


Private Support? Send me a private message
Reply


Messages In This Thread
Making DVZ Shoutbox responsive! - by ArneVD - 2015-08-16, 04:40 PM
RE: Making DVZ Shoutbox responsive! - by FBI - 2015-08-17, 02:42 AM
RE: Making DVZ Shoutbox responsive! - by ArneVD - 2015-08-17, 10:13 AM
RE: Making DVZ Shoutbox responsive! - by iMage - 2017-02-11, 05:16 PM
RE: Making DVZ Shoutbox responsive! - by Whiteneo - 2017-02-26, 02:15 PM
RE: Making DVZ Shoutbox responsive! - by Sumato - 2022-06-19, 02:53 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)