MyBB Community Forums

I love DVZ Shoutbox, by devilshakerz. However, there is a small display anomaly with DVZ Shoutbox on the Firefox browser for Android tablet (and perhaps other browsers/platforms): the shoutbox when in non-collapsed mode extends past and over some other text of the forum. In other words, the rectangle in which the DVZ Shoutbox is enclosed can overlap other elements on the webpage.

This is a CSS stylesheet issue. The default CSS styles distributed with DVZ Shoutbox and which is meant to be included in the global.css file of the theme one is using includes the following line for the shoutbox ID (#shoutbox in the CSS)--

#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); }

The solution is simple. Just add the stylesheet declaration "display: block;" to that one line of stylesheet declarations (in the global.css file of the theme you are using), as follows--

#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); display: block; }

This declaration ( display: block; ) causes the shoutbox to be treated like any other HTML block (such as paragraph <p> and division <div>) so that the browser's CSS parser and page rendering engine will include appropriate space and margins for the shoutbox. The addition of "display: block;" to the CSS does not cause problems with other browsers. It is a standard CSS declaration like "display: none;" which devilshakerz already uses in the CSS for DVZ Shoutbox.

Perhaps devilshakerz, the writer of the plugin, will see this, experiment a little himself, and perhaps add this bit of text to the "STYLES.txt" document he distributes with this excellent plugin.

---

The #shoutbox element is a <div> and should be displayed as block by default - mobile browsers tend to render some elements differently, but I cannot reproduce this issue.
Did you test it on Default theme? Similar problems are caused by sidebars and theme's CSS rules that are being incorrectly applied to the Shoutbox elements as well.

(2015-03-06, 03:10 PM)Devilshakerz Wrote: [ -> ]The #shoutbox element is a <div> and should be displayed as block by default - mobile browsers tend to render some elements differently, but I cannot reproduce this issue. Did you test it on Default theme? Similar problems are caused by sidebars and theme's CSS rules that are being incorrectly applied to the Shoutbox elements as well.

I'm using DVZ Shoutbox with MyBB 1.8.4 and an only slightly modified default theme. DVZ Shoutbox works fine with the CSS you provided on my desktop computer running Firefox, and on my Android tablet using the Chrome browser. The display anomaly only exists with Firefox for Android (I didn't test Opera or Dolphin or other browsers, however).

Adding "display: block;" to the CSS for the shoutbox <div> ensures that even Firefox for Android treats the div as a block (as all browsers should), and at worst merely seems redundant (should not cause any side-effects for other browsers).

I love DVZ Shoutbox and have played with the CSS myself only a little (because I'm fairly comfortable with CSS) to make it conform more to the appearance of my forum--

http://FlytrapForum.com/

The following shows my few modifications to the CSS you provided for the plugin in the STYLES.txt file--

/* DVZ Shoutbox */

/* following declaration altered from original */
#shoutbox {
	margin-bottom: 10px;
	border: solid 1px rgba(0,0,0,0.3);
	border-radius: 6px;
	display: block;
}


/* following declaration altered from original */
#shoutbox .head {
	padding: 8px;
	margin: 2px 2px 1px 2px;
	color: #fff;
	border-radius: 5px 5px 0 0;
	background: url('/images/thead.png') repeat-x #0066A2;
}

#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }


/* following declaration altered from original */
#shoutbox.collapsed .head {
	border-radius: 5px;
}

#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 !important; 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: 6px; }

#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; }

/* END DVZ Shoutbox */

I'm using the default theme, and have customized the template Default Templates --> Index Page Templates --> Index as follows (my changes are near the top):

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>

{$header}

<!-- QuickLinks added by Steve -->
<div id="quicklinks">
    <div id="quicklinks-links">Quicklinks:&nbsp; <a target="_blank" href="http://VenusFlytrap.info/">VenusFlytrap.info</a> &nbsp;&bull;&nbsp; <a target="_blank" href="http://FlytrapRanch.com/">FlytrapRanch.com</a>
    </div>
</div>
<!-- end QuickLinks -->
	
<!-- DVZ shoutbox, added by steve march, 2015 -->
{$dvz_shoutbox}
<!-- end DVZ shoutbox -->
	
{$forums}
{$boardstats}

<dl class="forum_legend smalltext">
	<dt><span class="forum_status forum_on" title="{$lang->new_posts}"></span></dt>
	<dd>{$lang->new_posts}</dd>

	<dt><span class="forum_status forum_off" title="{$lang->no_new_posts}"></span></dt>
	<dd>{$lang->no_new_posts}</dd>

	<dt><span class="forum_status forum_offlock" title="{$lang->forum_locked}"></span></dt>
	<dd>{$lang->forum_locked}</dd>

	<dt><span class="forum_status forum_offlink" title="{$lang->forum_redirect}"></span></dt>
	<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}
</body>
</html>

Thank you, devilshakerz for producing this fine plugin. I'm grateful for it and was happy to donate to the project.
---

(2015-03-06, 03:29 PM)steve_d Wrote: [ -> ]

(2015-03-06, 03:10 PM)Devilshakerz Wrote: [ -> ]The #shoutbox element is a <div> and should be displayed as block by default - mobile browsers tend to render some elements differently, but I cannot reproduce this issue. Did you test it on Default theme? Similar problems are caused by sidebars and theme's CSS rules that are being incorrectly applied to the Shoutbox elements as well.

I'm using DVZ Shoutbox with MyBB 1.8.4 and an only slightly modified default theme. DVZ Shoutbox works fine with the CSS you provided on my desktop computer running Firefox, and on my Android tablet using the Chrome browser. The display anomaly only exists with Firefox for Android (I didn't test Opera or Dolphin or other browsers, however).

Adding "display: block;" to the CSS for the shoutbox <div> ensures that even Firefox for Android treats the div as a block (as all browsers should), and at worst merely seems redundant (should not cause any side-effects for other browsers).

I love DVZ Shoutbox and have played with the CSS myself only a little (because I'm fairly comfortable with CSS) to make it conform more to the appearance of my forum--

http://FlytrapForum.com/

The following shows my few modifications to the CSS you provided for the plugin in the STYLES.txt file--

/* DVZ Shoutbox */

/* following declaration altered from original */
#shoutbox {
	margin-bottom: 10px;
	border: solid 1px rgba(0,0,0,0.3);
	border-radius: 6px;
	display: block;
}


/* following declaration altered from original */
#shoutbox .head {
	padding: 8px;
	margin: 2px 2px 1px 2px;
	color: #fff;
	border-radius: 5px 5px 0 0;
	background: url('/images/thead.png') repeat-x #0066A2;
}

#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }


/* following declaration altered from original */
#shoutbox.collapsed .head {
	border-radius: 5px;
}

#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 !important; 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: 6px; }

#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; }

/* END DVZ Shoutbox */

I'm using the default theme, and have customized the template Default Templates --> Index Page Templates --> Index as follows (my changes are near the top):

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>

{$header}

<!-- QuickLinks added by Steve -->
<div id="quicklinks">
    <div id="quicklinks-links">Quicklinks:&nbsp; <a target="_blank" href="http://VenusFlytrap.info/">VenusFlytrap.info</a> &nbsp;&bull;&nbsp; <a target="_blank" href="http://FlytrapRanch.com/">FlytrapRanch.com</a>
    </div>
</div>
<!-- end QuickLinks -->
	
<!-- DVZ shoutbox, added by steve march, 2015 -->
{$dvz_shoutbox}
<!-- end DVZ shoutbox -->
	
{$forums}
{$boardstats}

<dl class="forum_legend smalltext">
	<dt><span class="forum_status forum_on" title="{$lang->new_posts}"></span></dt>
	<dd>{$lang->new_posts}</dd>

	<dt><span class="forum_status forum_off" title="{$lang->no_new_posts}"></span></dt>
	<dd>{$lang->no_new_posts}</dd>

	<dt><span class="forum_status forum_offlock" title="{$lang->forum_locked}"></span></dt>
	<dd>{$lang->forum_locked}</dd>

	<dt><span class="forum_status forum_offlink" title="{$lang->forum_redirect}"></span></dt>
	<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}
</body>
</html>

Thank you, devilshakerz for producing this fine plugin. I'm grateful for it and was happy to donate to the project.
---

Reading your post helped me out. Thank you!