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
#2
Thanks, it's work.

Except if someone post the long url Smile
Hello, Welcome to MyBB Indonesia to get local support
My 'Simple' Unique Plugin here Smile
Reply
#3
(2015-08-17, 02:42 AM)FBI Wrote: Thanks, it's work.

Except if someone post the long url Smile

Thats true, I'll make a tutorial for this in a few days.
Arne Van Daele - Developer


Private Support? Send me a private message
Reply
#4
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
Reply
#5
Any news?
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#6
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 Smile
The only infinite thing is the universe and human stupidity, but the universe is not for sure

Plugins 1.6.x

Plugins 1.8.x

Reply
#7
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
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)