[For 1.8] DVZ Shoutbox – New Look

[User 124306]

Hello everyone! I have a new CSS code for DVZ Shoutbox.

CSS code:

#shoutbox { margin-bottom: 10px; background-color: #FFF; border-radius: 5px; border: 1px solid #000; }
#shoutbox .head { padding: 8px; }
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }
#shoutbox .head .right a { padding: 8px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { padding: 10px 15px; }
#shoutbox input.text { padding: 10px 8px; width: 100%; font-family: Arial, sans-serif; font-size: 12px; color: #000; box-sizing: border-box; border-radius: 5px; border: 1px solid #BBB; background-color: #E5E5E5; }
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { color: #727250; background-color: #FFFED8; }
#shoutbox .panel.blocked { color: #543A3A; background-color: #FCEFEF; }
#shoutbox .panel p { margin: 0; }

#shoutbox .window { padding: 10px; overflow-y: scroll; }
#shoutbox .data { display: table; width: 100%; font-family: Arial, sans-serif; font-size: 12px; }
#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: block !important; padding: 10px 0 10px 0; overflow: hidden; position: relative; }
#shoutbox .entry:last-child > div { border-bottom: none; }
#shoutbox .entry:nth-child(even) { border-radius: 5px; background-color: #F1F1F1;}

#shoutbox .avatar img { float: left; margin-left: 8px; vertical-align: middle; height: 40px; width: 40px; border-radius: 10px; cursor: pointer; }
#shoutbox .user { display: inline; padding: 12px; white-space: nowrap; font-size: 13px; }
#shoutbox .text { display: block; padding-left: 60px; color: #000; }

#shoutbox .info { margin: 8px; position: absolute; top: 0; right: 0; color: #000; font-size: 10px; }
#shoutbox .info a { color: inherit; }
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: 1px solid #DDD; }
#shoutbox .ip { margin-right: 10px; color: #000; }

Preview:

[Omar G.]

Hi,

Thank you for your contribution

Regards.

[mujeebdgk]

Hello everyone! I have a new CSS code for DVZ Shoutbox.

CSS code:

#shoutbox { margin-bottom: 10px; background-color: #FFF; border-radius: 5px; border: 1px solid #000; }
#shoutbox .head { padding: 8px; }
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }
#shoutbox .head .right a { padding: 8px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { padding: 10px 15px; }
#shoutbox input.text { padding: 10px 8px; width: 100%; font-family: Arial, sans-serif; font-size: 12px; color: #000; box-sizing: border-box; border-radius: 5px; border: 1px solid #BBB; background-color: #E5E5E5; }
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { color: #727250; background-color: #FFFED8; }
#shoutbox .panel.blocked { color: #543A3A; background-color: #FCEFEF; }
#shoutbox .panel p { margin: 0; }

#shoutbox .window { padding: 10px; overflow-y: scroll; }
#shoutbox .data { display: table; width: 100%; font-family: Arial, sans-serif; font-size: 12px; }
#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: block !important; padding: 10px 0 10px 0; overflow: hidden; position: relative; }
#shoutbox .entry:last-child > div { border-bottom: none; }
#shoutbox .entry:nth-child(even) { border-radius: 5px; background-color: #F1F1F1;}

#shoutbox .avatar img { float: left; margin-left: 8px; vertical-align: middle; height: 40px; width: 40px; border-radius: 10px; cursor: pointer; }
#shoutbox .user { display: inline; padding: 12px; white-space: nowrap; font-size: 13px; }
#shoutbox .text { display: block; padding-left: 60px; color: #000; }

#shoutbox .info { margin: 8px; position: absolute; top: 0; right: 0; color: #000; font-size: 10px; }
#shoutbox .info a { color: inherit; }
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: 1px solid #DDD; }
#shoutbox .ip { margin-right: 10px; color: #000; }

Preview:

Thank you for your contribution, 
is it responsive?

[User 124306]

Thank you for your contribution, is it responsive?

My CSS code is not responsive.

[judel]

Thanks for the code, but is there a way to make it smaller? Before several lines of text could be seen, but now only 3 lines. NVM, I figured it out.

[User 124306]

ACP > Configuration > DVZ Shoutbox > Shoutbox height (Height of the Shoutbox window in pixels).

[judel]

ACP > Configuration > DVZ Shoutbox > Shoutbox height (Height of the Shoutbox window in pixels).

I meant each line within the shoutbox, but I was able to go into the template code and compare it to the original and just adjusted a few of the px heights and paddings. Thanks for the response, though. 

[User 124306]

I meant each line within the shoutbox, but I was able to go into the template code and compare it to the original and just adjusted a few of the px heights and paddings. Thanks for the response, though. 

Also thanks for using my CSS code.