MyBB Community Forums

I wanted to change the top border to an image so it would match with the rest of the forum category images and blend in rather than stand out. My website is here, defiantgaming.co and I will post the code:

/* DVZ Shoutbox */
#shoutbox { margin-bottom: 10px; border: solid 2px 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 !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; }

Just change the <div class="head"> to <div class="thead">

And use this CSS; (responsive version)

#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 still don't understand where I would insert the image/ link to the image of my choosing. Would I replace the entire code that you gave me?

Follow these steps:

Step one:
Go to your ACP -> Templates & Style -> Templates -> Global Templates -> dvz_shoutbox -> dvz_shoutbox


You'll see this code:

<div id="shoutbox" class="front{$classes}">

<div class="head">
<strong>Shoutbox name</strong>
<p class="right"><a href="archivename">« archive</a></p>
</div>

<div class="body">

{$panel}

<div class="window" style="height:{$mybb->settings['dvz_sb_height']}px;">
<div class="data"></div>
</div>

</div>

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dvz_shoutbox.js"></script>
{$javascript}

</div>

Replace the WHOLE code with this one:

<div id="shoutbox" class="front{$classes}">

<div class="thead">
	<span style="padding-left:10px;"><strong>Shoutbox</strong></span>
<span style="float:right;padding-right:10px;"><a href="{$mybb->settings['bburl']}/index.php?action=shoutbox_archive">« archive</a></span>
</div>

<div class="body">

{$panel}

<div class="window" style="height:{$mybb->settings['dvz_sb_height']}px;">
<div class="data"></div>
</div>

</div>

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dvz_shoutbox.js"></script>
{$javascript}

</div>

This should fix you issue. (I tested it via Inspect Element and it worked fine -> http://prntscr.com/85xboz)

Greetings,

Arne.

Where would I put the image location for the top border.