MyBB Community Forums

(2016-11-30, 09:50 PM)johnnyvang Wrote: [ -> ]

(2016-11-30, 04:07 PM)nuwan350 Wrote: [ -> ]yes i alredy past it to global.css

Not sure if this helps for you but;
Go to templates & style -> themes -> global.css
Open the advanced mode.
Find:

#container {
	text-align: left;
	line-height: 1.4;
	margin: 0;
	min-width: 590px;

Add this code under it and save it ( for me it's from line 34 ).
I got the same problem some time ago, and when add this code in there it was solved.

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

#shoutbox .head {
padding: 8px; border-bottom: solid 2px rgba(0,0,0,0.1);
}

#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-bottom: 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 {
overflow-y: scroll;
}

#shoutbox .data {
display: table; width: 100%; font-family: Arial, sans-serif; font-size: 12px;
}

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


}

#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:target {
background-color: rgba(50,200,255,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 .entry.unread .info:before {
display: inline-block; position: relative; top: -2px; margin-right: 10px; height: 4px; width: 4px; content: ''; background: rgba(255,100,0,0.8); border-radius: 10px;
}

#shoutbox .info a {
color: inherit;
}

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

wow it's working now correctly
thank you so much johnnyvang 

---

How can add this shout box foe custom page
i need create chat page and put this shout box
please help me
thanks!

(2016-12-01, 02:28 AM)nuwan350 Wrote: [ -> ]

(2016-11-30, 09:50 PM)johnnyvang Wrote: [ -> ]

(2016-11-30, 04:07 PM)nuwan350 Wrote: [ -> ]yes i alredy past it to global.css

Not sure if this helps for you but;
Go to templates & style -> themes -> global.css
Open the advanced mode.
Find:

#container {
	text-align: left;
	line-height: 1.4;
	margin: 0;
	min-width: 590px;

Add this code under it and save it ( for me it's from line 34 ).
I got the same problem some time ago, and when add this code in there it was solved.

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

#shoutbox .head {
padding: 8px; border-bottom: solid 2px rgba(0,0,0,0.1);
}

#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-bottom: 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 {
overflow-y: scroll;
}

#shoutbox .data {
display: table; width: 100%; font-family: Arial, sans-serif; font-size: 12px;
}

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


}

#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:target {
background-color: rgba(50,200,255,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 .entry.unread .info:before {
display: inline-block; position: relative; top: -2px; margin-right: 10px; height: 4px; width: 4px; content: ''; background: rgba(255,100,0,0.8); border-radius: 10px;
}

#shoutbox .info a {
color: inherit;
}

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

wow it's working now correctly
thank you so much johnnyvang 

---

How can add this shout box foe custom page
i need create chat page and put this shout box
please help me
thanks!

Thanks Alot Guys! it Helped me out too! It really works awesome. But can we add this to any sides of the forum? On a few forums i saw that there is a button, Its kinda fixed to the page and will be there even if u scroll up or down. and when u open it a small shoutbox appears which is just DVZ Shoutbox 2.3.1 but its very convenient. you can open it whenever you want. and you don`t need to scroll up or down or cover a part of your forums. I want something like that but need your help

(2014-09-03, 06:56 PM)Devilshakerz Wrote: [ -> ]

(2014-09-01, 07:09 PM)Kioshi Wrote: [ -> ]Does this version have any Commands? Would certainly make the shoutbox better and easier to use imo.

It does not. Implementing parsed commands would complicate things a bit and the Shoutbox is meant to be reasonably simple

Quote:Also, any idea why when I put "{$dvz_shoutbox}" on the portal it doesn't show up? I really need it to display on my portal but it just doesn't appear at all, no where to be found.

You need to add a hook at the beginning of the plugin's file:

$plugins->add_hook('portal_end', 'dvz_shoutbox');

sorry, i cant find the right file where to put this code: $plugins->add_hook('portal_end', 'dvz_shoutbox');

pls help. today is my first mybb day

I did the following:

Quote:========= INSTALLATION ==============================================
1. upload the package from "UPLOAD" to your MyBB root directory
2. add CSS from STYLES.txt to your board stylesheets (e.g. global.css)
3. add {$dvz_shoutbox} to your index template
4. install the plugin in the ACP

My problem is that the shoutbox ended being at the bottom of the page. I want it to appear at the top underneath hyperlinks where it says view new posts, view today's post, private messages, and etc. Here are the php codes starting with global.css, and then index template.

Global.CSS File

/* 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:target { background-color: rgba(50,200,255,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 .entry.unread .info:before { display: inline-block; position: relative; top: -2px; margin-right: 10px; height: 4px; width: 4px; content: ''; background: rgba(255,100,0,0.8); border-radius: 10px; }
#shoutbox .info a { color: inherit; }
#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; }
body {
	background: #fff;
	color: #333;
	text-align: center;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	overflow-y: scroll;
}

a:link {
	color: #0072BC;
	text-decoration: none;
}

a:visited {
	color: #0072BC;
	text-decoration: none;
}

a:hover,
a:active {
	color: #0072BC;
	text-decoration: underline;
}

#container {
	color: #333;
	text-align: left;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	min-width: 990px;
}

.wrapper {
	width: 85%;
	min-width: 970px;
	max-width: 1500px;
	margin: auto auto;
}

#logo {
	background: #fff;
	padding: 10px 0;
	border-bottom: 1px solid #263c30;
}

#content {
	background: #fff;
	width: auto !important;
	padding: 20px 10px;
	overflow: hidden;
}

#header ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header ul.menu li {
	margin: 0 7px;
	display: inline;
}

#header ul.menu li a {
	padding-left: 20px;
	background-image: url(images/headerlinks_sprite.png);
	background-repeat: no-repeat;
	display: inline-block;
	line-height: 16px;
}

#logo ul.top_links {
	font-weight: bold;
	text-align: right;
	margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
	background-position: 0 0;
}

#logo ul.top_links a.memberlist {
	background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
	background-position: 0 -40px;
}

#logo ul.top_links a.help {
	background-position: 0 -60px;
}

#logo ul.top_links a.portal {
	background-position: 0 -180px;
}

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
	background: url(images/headerlinks_sprite.png) 0 -100px no-repeat;
	padding-left: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .upper a.register {
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .lower ul.panel_links {
	float: left;
}

#panel .lower ul.panel_links a.usercp {
	background-position: 0 -120px;
}

#panel .lower ul.panel_links a.modcp {
	background-position: 0 -140px;
}

#panel .lower ul.panel_links a.admincp {
	background-position: 0 -160px;
}

#panel .lower ul.user_links {
	float: right;
}

#panel .lower ul.user_links li a {
	padding: 0;
	background-image: none;
}

#panel .upper {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 7px;
	clear: both;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
	color: #fff;
}

#panel .lower {
	background: #efefef;
	color: #999;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	padding: 5px;
}

#panel .lower a:link,
#panel .lower a:visited,
#panel .lower a:hover,
#panel .lower a:active {
	color: #666;
}

#search {
	border: 0;
	padding: 0;
	margin: 0;
	float: right;
	vertical-align: middle;
}

#search input.button,
#search input.textbox {
	border-color: #000;
}

#search input.button {
	background: #0066a2 url(images/thead.png) top left repeat-x;
	color: #fff;
}

#search input {
	margin: -3px 0;
}

#quick_login .remember_me input {
	vertical-align: middle;
	margin: -3px 0 0 5px;
}

#footer {
	clear: both;
}

#footer ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer ul.menu li {
	margin: 0 5px;
	display: inline;
}

#footer .upper {
	background: #efefef;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	padding: 6px;
	font-size: 12px;
	overflow: hidden;
}

#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
	color: #777;
}

#footer .upper .language {
	float: right;
	margin: -1px;
	margin-left: 15px;
}

#footer .upper .language select {
	border-color: #ccc;
}

#footer .upper .theme {
	float: right;
	margin: -1px;
	margin-left: 15px;
}

#footer .upper .theme select {
	border-color: #ccc;
}

#footer .upper ul.bottom_links {
	float: left;
	margin: 4px 0 0 0;
}

#footer .lower {
	color: #666;
	padding: 6px 6px 12px 6px;
	overflow: hidden;
	font-size: 11px;
}

#footer .lower a:link,
#footer .lower a:visited {
	color: #444;
	font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
	color: #333;
	text-decoration: underline;
	font-weight: bold;
}

#footer .lower #current_time {
	float: right;
	color: #888;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 20px;
	font-size: 11px;
}

.scaleimages img {
	max-width: 100%;
}

.forum_status {
	height: 30px;
	width: 30px;
	background: url(images/forum_icon_sprite.png) no-repeat 0 0;
	display: inline-block;
}

.forum_on {
	background-position: 0 0;
}

.forum_off {
	background-position: 0 -30px;
}

.forum_offlock {
	background-position: 0 -60px;
}

.forum_offlink {
	background-position: 0 -90px;
}

.subforumicon {
	height: 10px;
	width: 10px;
	display: inline-block;
	margin: 0 5px;
	background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
	background-position: 0 0;
}

.subforum_minioff {
	background-position: 0 -10px;
}

.subforum_miniofflock {
	background-position: 0 -20px;
}

.subforum_miniofflink {
	background-position: 0 -30px;
}

table {
	color: #333;
	font-size: 13px;
}

.tborder {
	background: #fff;
	width: 100%;
	margin: auto auto;
	border: 1px solid #ccc;
	padding: 1px;
}

.tfixed {
	table-layout: fixed;
	word-wrap: break-word;
}

.thead {
	background: #0066a2 url(images/thead.png) top left repeat-x;
	color: #ffffff;
	border-bottom: 1px solid #263c30;
	padding: 8px;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover,
.thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 6px;
	font-size: 12px;
}

.tcat a:link {
	color: #fff;
}

.tcat a:visited {
	color: #fff;
}

.tcat a:hover,
.tcat a:active {
	color: #fff;
}

.trow1 {
	background: #f5f5f5;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow2 {
	background: #efefef;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
	background: #ffdde0;
	border: 1px solid;
	border-color: #fff #ffb8be #ffb8be #fff;
}

.no_bottom_border {
	border-bottom: 0;
}

.post.unapproved_post {
	background: #ffdde0;
}

.post.unapproved_post .post_author {
	border-bottom-color: #ffb8be;
}

.post.classic.unapproved_post .post_author {
	border-color: #ffb8be;
}

.post.unapproved_post .post_controls {
	border-top-color: #ffb8be;
}

.trow_deleted,
.post.deleted_post {
	background: #E8DEFF;
}

.trow_selected,
tr.trow_selected td {
	background: #FFFBD9;
	color: #333;
	border-right-color: #F7E86A;
	border-bottom-color: #F7E86A;
}

.trow_selected a:link,
.trow_selected a:visited,
.trow_selected a:hover,
.trow_selected a:active {
	color: #333;
}

.trow_sep {
	background: #ddd;
	color: #333;
	border-bottom: 1px solid #c5c5c5;
	padding: 6px;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	border-top: 1px solid #fff;
	padding: 6px;
	background: #ddd;
	color: #666;
}

.tfoot a:link {
	color: #444;
	text-decoration: none;
}

.tfoot a:visited {
	color: #444;
	text-decoration: none;
}

.tfoot a:hover,
.tfoot a:active {
	color: #444;
	text-decoration: underline;
}

.thead input.textbox,
.thead select {
	border: 1px solid #263c30;
}

.bottommenu {
	background: #efefef;
	color: #333;
	border: 1px solid #4874a3;
	padding: 10px;
}

.navigation {
	color: #333;
	font-size: 12px;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover,
.navigation a:active {
	text-decoration: underline;
}

.navigation .active {
	color: #333;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

fieldset {
	padding: 12px;
	border: 1px solid #ddd;
	margin: 0;
}

fieldset.trow1,
fieldset.trow2 {
	border-color: #bbb;
}

fieldset.align_right {
	text-align: right;
}

input.textbox {
	background: #ffffff;
	color: #333;
	border: 1px solid #ccc;
	padding: 3px;
	outline: 0;
	font-size: 13px;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

textarea {
	background: #ffffff;
	color: #333;
	border: 1px solid #ccc;
	padding: 2px;
	line-height: 1.4;
	outline: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

select {
	background: #ffffff;
	padding: 3px;
	border: 1px solid #ccc;
	outline: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

button,
input.button {
	padding: 3px 8px;
	cursor: pointer;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	background: #eee url(images/buttons_bg.png) repeat-x;
	border: 1px solid #bbb;
	color: #333;
	outline: 0;
}

button:hover,
input.button:hover {
	border-color: #aaa;
}

form {
	margin: 0;
	padding: 0;
}

input.error, textarea.error, select.error {
	border: 1px solid #f30;
	color: #f30;
}

input.valid, textarea.valid, select.valid {
	border: 1px solid #0c0;
}

label.error {
	color: #f30;
	margin: 5px;
	padding: 0px;
	display: block;
	font-weight: bold;
	font-size: 11px;
}

form #message {
	width: 500px;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #ccc;
}

.post .editor_control_bar {
	background: #f5f5f5;
}

.popup_menu {
	background: #fff;
	border: 1px solid #ccc;
}

.popup_menu .popup_item {
	background: #efefef;
	color: #333;
}

.popup_menu .popup_item:hover {
	background: #0072BC;
	color: #fff;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

img {
	border: none;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

.clear {
	clear: both;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background: #FFFBD9;
	border-bottom: 1px solid #F7E86A;
	color: #333;
	text-align: center;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

.tcat_menu > .expcolimage {
	margin-top: 0;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 10px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	padding-bottom: 3px;
	margin: 0 0 10px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
	font-size: 12px;
	color: #666;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	padding-bottom: 3px;
	margin: 0 0 10px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.smilie {
	vertical-align: middle;
}

.smilie_pointer {
	cursor: pointer;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 4px;
	white-space: nowrap;
	text-decoration: none;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
	word-wrap: break-word;
}

.red_alert a:link,
.red_alert a:visited,
.red_alert a:hover,
.red_alert a:active {
	color: #A5161A;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

.imminent_banned {
	color: #880000;
}

.high_banned {
	color: #FF0000;
}

.moderate_banned {
	color: #FF6600;
}

.low_banned {
	color: #008000;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #333;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.png) no-repeat 0;
}

div.error ul {
	margin-left: 24px;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination,
.tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current,
.pagination a {
	padding: 3px 6px;
	margin-bottom: 3px;
}

.pagination a {
	background: #f5f5f5;
	border: 1px solid #ccc;
}

.pagination .pagination_current {
	background: none;
	color: #333;
	border: none;
	font-weight: bold;
}

.pagination a:hover {
	background: #0072BC;
	color: #fff;
	border-color: #263c30;
	text-decoration: none;
}

.pagination .go_page img {
	margin-bottom: -4px;
}

.drop_go_page {
	background: #f5f5f5;
	padding: 4px;
}

.pagination_breadcrumb {
	background-color: #efefef;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	font-weight: normal;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

.thread_legend,
.thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend,
.forum_legend dt,
.forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
	margin-top: 7px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

#posts_container {
	padding: 0;
}

.ignored_post {
	border-top: 3px solid #333;
	padding: 15px;
}

.ignored_post .show_ignored_post {
	margin-top: -15px;
}

.ignored_post .show_ignored_post a.button span {
	background-position: 0 -400px;
}

.deleted_post_hidden {
	border-top: 2px solid #ccc;
	padding: 15px;
}

.deleted_post_collapsed {
	border-top: 3px solid #333;
	padding: 15px;
}

.deleted_post_collapsed .show_deleted_post {
	margin-top: -15px;
}

.deleted_post_collapsed .show_deleted_post a.button span {
	background-position: 0 -400px;
}

.post {
	overflow: hidden;
}

.post.classic {
	padding-top: 15px;
}

.post .post_author {
	border-bottom: 1px solid #ccc;
	border-top: 2px solid #ccc;
	background: #f5f5f5;
	padding: 5px;
	overflow: hidden;
}

.post.classic .post_author {
	border: 1px solid #ddd;
	float: left;
	width: 15%;
	margin: 0 1% 15px 0;
	border-left: 0;
	padding: 5px 1%;
}

.post .post_author .buddy_status {
	vertical-align: middle;
	margin-top: -4px;
}

.post .post_author div.author_avatar {
	float: left;
	margin-right: 3px;
}

.post.classic .post_author div.author_avatar {
	float: none;
	text-align: center;
	margin-bottom: 8px;
}

.post .post_author div.author_avatar img {
	padding: 5px;
	border: 1px solid #ddd;
	background: #fff;
}

.post .post_author div.author_information {
	float: left;
	padding: 6px 8px;
}

.post.classic .post_author div.author_information {
	float: none;
	padding: 0;
	text-align: center;
}

.post .post_author div.author_statistics {
	float: right;
	font-size: 11px;
	padding: 3px 10px 3px 5px;
	color: #666;
	line-height: 1.3;
}

.post.classic .post_author div.author_statistics {
	border-top: 1px dotted #ccc;
	margin: 6px 0 0 0;
	padding: 6px 6px 3px 6px;
	float: none;
}

.post .post_head {
	font-size: 11px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 4px;
}

.post .post_head span.post_date {
	color: #666;
}

.post .post_head span.edited_post {
	font-size: 10px;
	color: #999;
}

.post .post_head span.edited_post a {
	color: #666;
}

.post_body {
	font-size: 14px;
	padding: 12px 0;
}

.post.classic .post_content {
	float: left;
	width: 79%;
	padding: 0 1% 5px 1%;
}

.post_content {
	padding: 9px 10px 5px 10px;
}

.post_content .signature {
	margin-top: 5px;
	border-top: 1px dotted #ddd;
	padding: 10px 0 4px 0;
}

.post .post_meta {
	margin: 4px 0;
	font-size: 11px;
	color: #999;
}

.post .post_meta a:link,
.post .post_meta a:visited {
	color: #777;
}

.post .post_meta a:hover,
.post .post_meta a:active {
	color: #777;
}

.post_controls {
	clear: both;
	background: #f5f5f5;
	border-bottom: 1px solid #ccc;
	padding: 5px;
	overflow: hidden;
}

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
	display: inline-block;
	padding: 2px 5px;
	margin: 2px;
	font-size: 11px;
	background: #eee url(images/buttons_bg.png) repeat-x;
	border: 1px solid #ccc;
	color: #555;
}

.postbit_buttons > a:hover {
	border-color: #bbb;
}

.postbit_buttons a span {
	padding-left: 20px;
	display: inline-block;
	height: 16px;
	background-image: url(images/buttons_sprite.png);
	background-repeat: no-repeat;
}

.postbit_buttons a.postbit_find span {
	background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
	background-position: 0 -20px;
}

.postbit_buttons a.postbit_email span {
	background-position: 0 -40px;
}

.postbit_buttons a.postbit_website span {
	background-position: 0 -60px;
}

.postbit_buttons a.postbit_pm span {
	background-position: 0 -80px;
}

.postbit_buttons a.postbit_quote span {
	background-position: 0 -100px;
}

.postbit_buttons a.postbit_multiquote span {
	background-position: 0 -120px;
}

.postbit_buttons a.postbit_multiquote_on span {
	background-position: 0 -140px;
}

.postbit_buttons a.postbit_edit span {
	background-position: 0 -160px;
}

.postbit_buttons a.postbit_qdelete span {
	background-position: 0 -180px;
}

.postbit_buttons a.postbit_qrestore span {
	background-position: 0 -200px;
}

.postbit_buttons a.postbit_report span {
	background-position: 0 -220px;
}

.postbit_buttons a.postbit_warn span {
	background-position: 0 -240px;
}

.postbit_buttons a.postbit_purgespammer span {
	background-position: 0 -540px;
}

.postbit_buttons a.postbit_reply_pm span {
	background-position: 0 -260px;
}

.postbit_buttons a.postbit_reply_all span {
	background-position: 0 -280px;
}

.postbit_buttons a.postbit_forward_pm span {
	background-position: 0 -300px;
}

.postbit_buttons a.postbit_delete_pm span {
	background-position: 0 -320px;
}

a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	display: inline-block;
	padding: 4px 8px;
	margin: 2px 2px 6px 2px;
	border: 1px solid #000;
	font-size: 14px;
}

a.button.small_button {
	font-size: 13px;
	margin: 0;
	padding: 3px 6px;
}

a.button span {
	padding-left: 20px;
	display: inline-block;
	background-image: url(images/buttons_sprite.png);
	background-repeat: no-repeat;
}

a.button.new_thread_button span {
	background-position: 0 -340px;
}

a.button.new_reply_button span {
	background-position: 0 -360px;
}

a.button.closed_button span {
	background-position: 0 -380px;
}

a.button.rate_user_button span {
	background-position: 0 -400px;
}

a.button.add_buddy_button span {
	background-position: 0 -440px;
}

a.button.remove_buddy_button span {
	background-position: 0 -480px;
}

a.button.add_ignore_button span {
	background-position: 0 -460px;
}

a.button.remove_ignore_button span {
	background-position: 0 -500px;
}

a.button.report_user_button span {
	background-position: 0 -520px;
}

.quick_jump {
	background: url(images/jump.png) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	margin-top: -3px;
	border: none;
}

.pollbar {
	background: url(images/pollbar.png) top left repeat-x;
	border: 1px solid #3f3f3f;
	height: 10px;
}

.pollbar .percent {
	display: none;
}

.posticons_label {
	white-space: nowrap;
}

/** jGrowl Start **/

/** Special IE6 Style Positioning **/
.ie6 {
	position: absolute;
}

.ie6.top-right {
	right: auto;
	bottom: auto;
	left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.top-left {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-right {
	left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-left {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.center {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	width: 100%;
}

/** jGrowl Styling **/
.jGrowl {
	z-index: 9999;
	color: #ffffff;
	font-size: 12px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: fixed;
}
.jGrowl.top-left {
	left: 0px;
	top: 0px;
}
.jGrowl.top-right {
	right: 0px;
	top: 0px;
}
.jGrowl.bottom-left {
	left: 0px;
	bottom: 0px;
}
.jGrowl.bottom-right {
	right: 0px;
	bottom: 0px;
}
.jGrowl.center {
	top: 0px;
	width: 50%;
	left: 25%;
}

/** Cross Browser Styling **/

.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer {
	margin-left: auto;
	margin-right: auto;
}
.jGrowl-notification {
	background-color: transparent;
	opacity: 0.9;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
	zoom: 1;
	width: 250px;
	padding: 10px;
	margin: 10px;
	text-align: left;
	display: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	word-break: break-all;
}
.jGrowl .jGrowl-notification {
	min-height: 40px;
}
.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
	border: 1px solid #000;
	background: #000;
	color: #fff;
}
.jGrowl-notification .jGrowl-header {
	font-weight: bold;
	font-size: .85em;
}
.jGrowl-notification .jGrowl-close {
	background-color: transparent;
	color: inherit;
	border: none;
	z-index: 99;
	float: right;
	font-weight: bold;
	font-size: 1em;
	cursor: pointer;
}
.jGrowl-closer {
	background-color: #000000;
	opacity: 0.9;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
	zoom: 1;
	width: 250px;
	padding: 10px;
	margin: 10px;
	text-align: left;
	display: none;
	border-radius: 5px;
	word-break: break-all;
	padding-top: 4px;
	padding-bottom: 4px;
	cursor: pointer;
	font-size: .9em;
	font-weight: bold;
	text-align: center;
}
.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
	border: 1px solid #000;
	background: #000;
	color: #fff;
}

.jGrowl .jGrowl-notification.jgrowl_success {
    background: lightgreen;
    border: 1px solid lightgreen;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_error {
    background: red;
    border: 1px solid red;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_process, .jGrowl .jGrowl-closer {
    background: yellow;
    border: 1px solid yellow;
	color: #333;
}

/** Hide jGrowl when printing **/
@media print {
	.jGrowl {
		display: none;
	}
}

/** jGrowl End **/

/** Modal Start **/

.modal {
	display: none;
	width: 400px;
	text-align: left;
	background: #fff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
	display: none;
	width: 64px;
	height: 64px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-right: -32px;
	margin-top: -32px;
	background: url(images/spinner_big.gif) no-repeat center center;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

/** Modal End **/

/** Impromptu Start **/

/*! jQuery-Impromptu - v6.2.1 - 2015-05-10
* http://trentrichardson.com/Impromptu
* Copyright (c) 2015 Trent Richardson; Licensed MIT */

.jqifade{
	position: absolute;
	background-color: #777777;
}
iframe.jqifade{
	display:block;
	z-index:-1;
}
div.jqi{
	width: 400px;
	max-width:90%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	background-color: #ffffff;
	font-size: 11px;
	text-align: left;
	border: solid 1px #eeeeee;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	padding: 7px;
}
div.jqi .jqicontainer{
}
div.jqi .jqiclose{
	position: absolute;
	top: 4px; right: -2px;
	width: 18px;
	cursor: default;
	color: #bbbbbb;
	font-weight: bold;
}
div.jqi .jqistate{
	background-color: #fff;
}
div.jqi .jqititle{
	padding: 5px 10px;
	font-size: 16px;
	line-height: 20px;
	border-bottom: solid 1px #eeeeee;
}
div.jqi .jqimessage{
	padding: 10px;
	line-height: 20px;
	color: #444444;
	overflow: auto;
}
div.jqi .jqibuttonshide{
	display: none;
}
div.jqi .jqibuttons{
	text-align: right;
	margin: 0 -7px -7px -7px;
	border-top: solid 1px #e4e4e4;
	background-color: #f4f4f4;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
}
div.jqi .jqibuttons button{
	margin: 0;
	padding: 15px 20px;
	background-color: transparent;
	font-weight: normal;
	border: none;
	border-left: solid 1px #e4e4e4;
	color: #777;
	font-weight: bold;
	font-size: 12px;
}
div.jqi .jqibuttons button.jqidefaultbutton{
	color: #489afe;
}
div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus{
	color: #287ade;
	outline: none;
}
div.jqi .jqibuttons button[disabled]{
	color: #aaa;
}
.jqiwarning .jqi .jqibuttons{
	background-color: #b95656;
}

/* sub states */
div.jqi .jqiparentstate::after{
	background-color: #777;
	opacity: 0.6;
	filter: alpha(opacity=60);
	content: '';
	position: absolute;
	top:0;left:0;bottom:0;right:0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
div.jqi .jqisubstate{
	position: absolute;
	top:0;
	left: 20%;
	width: 60%;
	padding: 7px;
	border: solid 1px #eeeeee;
	border-top: none;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
}
div.jqi .jqisubstate .jqibuttons button{
	padding: 10px 18px;
}

/* arrows for tooltips/tours */
.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}

.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }

.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }

.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }

.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }

/** Impromptu End */

Here is the index file

<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}
{$forums}
{$boardstats}
{$dvz_shoutbox}
<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>

so, how do i make the shoutbox appear at the top of the page instead of the bottom?

Move {$dvz_shoutbox} to below {$header}

(2016-12-23, 11:49 PM)Matt Wrote: [ -> ]Move {$dvz_shoutbox} to below {$header}

it works!

Thank you!

Shoutbox problem.

Here is Index.php

<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 id="forums">
{$header}
<div class="side" style="float: right; width: 100%">
  

 
  
 </div>
	
	{$dvz_shoutbox}
 

	<div class="forum" style="float: left; width: 100%;">{$forums}</div>
{$boardstats}
<br class="clear" />
{$footer}
</body>
</html>

Error IMG

Sadly it does not support some themes or else this shoutbox will dominate all shoutboxes and eventually win Inferno Shoutbox as it is the only shoutbox that works on all themes.

(2016-12-26, 08:18 AM)Arantor Wrote: [ -> ]Shoutbox problem.

Here is Index.php

<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 id="forums">
{$header}
<div class="side" style="float: right; width: 100%">
  

 
  
 </div>
	
	{$dvz_shoutbox}
 

	<div class="forum" style="float: left; width: 100%;">{$forums}</div>
{$boardstats}
<br class="clear" />
{$footer}
</body>
</html>

Error IMG

Add CSS with pack of plugin... (give me ur forum url).

(2016-12-26, 08:18 AM)Arantor Wrote: [ -> ]Shoutbox problem.

Here is Index.php

<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 id="forums">
{$header}
<div class="side" style="float: right; width: 100%">
  

 
  
 </div>
	
	{$dvz_shoutbox}
 

	<div class="forum" style="float: left; width: 100%;">{$forums}</div>
{$boardstats}
<br class="clear" />
{$footer}
</body>
</html>

Error IMG

Check this post https://community.mybb.com/thread-156080...pid1254579
It's one page back from me.