Hey guys, I need a little more help with my forum. I'm pretty sure this can all be achieved through CSS/Template Editing, but if it's too much of a hassle, just say so. I'm using PunBB.

My first question is, would it be possible to change my current messy chatbox (here) to a cleaner view, such as this one? (Different coloring, but I like the general view of it.)


My second question is, would it be possible to but a whole rounded body around everything on my forum? For example, there's a rounded green table behind the forum categories, posts, and just about any elements in this screenshot. Currently on my forum, the category boxes and just about everything is free floating/rounded corners stacked up. I like the way all of the tables are on one large one, like here on WebArtz or any standard phpBB Forum.


I was also wondering if it was possible to fix up the poster format? I would like it to look like a standard PhpBB posting format, instead of a bunch of stacked rounded corners.


And finally, is it possible to fix up the actual post interface as well? I would like it to look a little cleaner and similar to a PhpBB one. (The actual revisions are marked in the screenshot)


Thank you for any help, with any of these!

Code:

.post {
background : #d2b962;
}

.user {
margin-right : -220px !important;
}

.statused tr td{
padding-left : 45px !important;
}

.user {
width : 200px !important;
}

.postmain {
margin-right : 20em !important;
}


/* CATEGORY CHANGE */
/* the div.main-head is need because of the crumbs when browsing through topics is messed up */
div.main-head#cat1 {background:url(http://i266.photobucket.com/albums/ii247/Kab0000m/Josh/TRHeader-6.png);padding-top:60px;background-repeat:no-repeat;background-position:top center;}
div.main-head#cat1 h2 {background-color:rgba(0, 0, 0, 0.4);padding:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:70px;}

div.main-head#cat2 {background:url(http://i266.photobucket.com/albums/ii247/Kab0000m/Josh/TRHeader3-4.png);padding-top:100px;background-repeat:no-repeat;background-position:top center;}
div.main-head#cat1 h2 {background-color:rgba(0, 0, 0, 0.4);padding:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:70px;}

div.main-head#cat3 {background:url(http://i266.photobucket.com/albums/ii247/Kab0000m/Josh/FrogzardCatHeader.png);padding-top:32px;background-repeat:no-repeat;}
div.main-head#cat1 h2 {background-color:rgba(0, 0, 0, 0.4);padding:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:70px;}

div.main-head#cat4 {background:url(http://i266.photobucket.com/albums/ii247/Kab0000m/Josh/FrogzardCatHeader.png);padding-top:32px;background-repeat:no-repeat;}
div.main-head#cat1 h2 {background-color:rgba(0, 0, 0, 0.4);padding:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:70px;}
/**************************/
/* SMILEY BOX FIX */
.smiley-frame {padding-top:20px;text-align:center;background:#e0bc51;}
.smiley-frame form#smilies_categ p {position:fixed;top:0px;left:1px;}
.smiley-frame form#smilies_categ p select {width:100px;}
#smiley-box iframe {border-top:1px solid rgba(0,0,0,0.2);border-left:1px solid rgba(0,0,0,0.2);border-bottom:1px solid rgba(0,0,0,0.2);}

.pun tbody.statused td.tcl {width: 25%; padding: 10px 0px; text-align: center; border: none;}

.pun table.homepage tbody.statused td.tcl {width: 25%; padding: 10px 0px; text-align: center; border: none;}

.pun #pun-foot {width:75.5%;margin:0 auto;}
html, body {
background-repeat:repeat-x !important;
}
#pun-navlinks {
padding-top : 0px !important;
}

body {background-position:top center;}

#pun-logo img {position:relative;top:-3px;}

#pun-intro {
background : transparent;
padding-bottom : 0px;
border-bottom : 0px solid transparent;
}
#pun-intro img {
text-align : center;
}
#pun-desc {display:none;}

a:link {color: #7d4f00 !important;}
a:visited {color: #666666 !important;}
a:hover {color: #b42000 !important;}
a:active {color: #719394 !important;}
a:focus {color: #7d4f00 !important;}
.main-content , .main-content table tbody tr td {
-moz-border-radius : 0 0 10px 10px;
-webkit-border-radius : 0 0 10px 10px;
}
.main-box , #pun-foot div {
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}

#pun-visit {
display : none;
}

#pun-legend {display:none !important;}

.main form div.main-foot {display:none;}

#pun-navlinks {
background : transparent !important;
}
.pun, #pun-navlinks ul, .main-box ul, .pun .main, .pun .main-category {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;}
.main, .main-head, .page-title { -moz-border-radius-topleft: 20px;
-webkit-border-radius-topleft: 20px; -moz-border-radius-topright: 20px;
-webkit-border-radius-topright: 20px; }

.forum-desc img {float: none ! important;}


div.main-box, div#pun-about {background-color: #E0BC51 !important;}

div#main-content div.main-box, div#main-content .main-box, div#main-content div#pun-info, div#main-content #pun-info {margin:0px !important;}
div#main-content div.main-box {border-bottom:dashed #CCC 1px !important;
-moz-border-top-right-radius:10px !important;
-moz-border-top-left-radius:10px !important;
-moz-border-bottom-right-radius:1px !important;
-moz-border-bottom-left-radius:1px !important;
-webkit-border-top-right-radius:10px !important;
-webkit-border-top-left-radius:10px !important;
-webkit-border-bottom-right-radius:1px !important;
-webkit-border-bottom-left-radius:1px !important;
}

.pun-legend {display:none;}

div.paged-head, div.paged-foot {padding:6px 10px;-moz-border-radius:10px;-webkit-border-radius:10px;margin:5px 0px;}
div.main-foot {margin:5px 0px;-webkit-border-radius:10px;-moz-border-radius:10px;}
div.main-head {-webkit-border-top-right-radius:10px;-webkit-border-top-left-radius:10px;-moz-border-top-right-radius:10px;-moz-border-top-left-radius:10px;}
div.pun-crumbs {margin:0px;background-color:#E0BC51;-webkit-border-top-right-radius:10px;-webkit-border-top-left-radius:10px;-moz-border-top-right-radius:10px;-moz-border-top-left-radius:10px;padding-top:5px;}

ul.navlinks li a img {
  opacity: 0.6;
  -webkit-transition: opacity 0.6s ease-in-out;
  cursor:default;
  -webkit-user-select:none;
}

ul.navlinks li a img:hover {
  opacity: 1;
}

div.container_IE div#pun-about {width:73%;margin:0px auto;}
div.pun div#pun-about {width:initial;margin:0px auto;}
.main-box, #pun-info {margin:0px !important;}
.main-box {
-webkit-border-bottom-left-radius:1px;
-webkit-border-bottom-right-radius:1px;
-moz-border-bottom-left-radius:1px;
-moz-border-bottom-right-radius:1px;
border-bottom:1px dashed #CCCCCC;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-top-left-radius:10px;
-moz-border-top-right-radius:10px;}

.pun .frm-form {background:transparent;}

.pun .topic {border:0px transparent dotted;background:#A16B00;-webkit-border-radius:1px;-moz-border-radius:1px;}
.pun .postmain {border:0px transparent dotted;border-top:1px solid #A16B00;}
.pun .postmain {border-top:1px solid #A16B00;}
.pun .postfoot {border-bottom:1px solid #E0BC51;-webkit-border-bottom-right-radius:1px !important;-webkit-border-bottom-left-radius:1px !important;-moz-border-bottom-right-radius:1px !important;-moz-border-bottom-left-radius:1px !important;}
.pun .post {-webkit-border-bottom-right-radius:1px;-moz-border-bottom-right-radius:1px;border-width: 0px;}

div.pun-crumbs {border-bottom:1px dashed #CCC;}

.pun .frm .main-foot {display:none;}
.pun .frm .main-head {-webkit-border-radius:1px;-moz-border-radius:1px;background:#E0BC51;border-bottom:1px dashed #CCC;color:#666;font:15px verdana;font-weight:900;}
.pun .frm {margin:0px;}

.pun #main-content {margin-bottom:14px !important;}
.pum .main-content {background-color: #E0BC51;border:0px solid transparent !important;}

.frm-form .main-head {-webkit-border-radius:1px;-moz-border-radius:1px;background:#E0BC51}
.pun .main {margin:0px;}

table.calendar td {border:2px solid #7D4B00 !important;-webkit-border-radius:1px !important;-moz-border-radius:1px !important;}
table.calendar tr {border:2px solid #7D4B00;}
.frm-form .main-content {padding-bottom:10px !important;border:0px solid transparent !important;}


body {background-color: #bda346 !important;}

#profile-advanced-details div.main-content {padding-bottom:10px !important;margin-bottom:5px;}

#pun-intro a img {height:308px;}
div.pun {width:80%; margin 0px auto;}

div.user_login_form.main-box.center {position:absolute;top:0px;left:0;right:0;margin:0 auto;-webkit-border-top-right-radius:1px;-webkit-border-top-left-radius:1px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;border:0px transparent solid;padding:2px;opacity:0.19;-webkit-transition:opacity 0.7s ease, padding-top 0.7s ease, padding-bottom 0.7s ease;}
div.user_login_form.main-box.center:hover {opacity:0.96;padding-top:12px;cursor:default !important;padding-bottom:10px;}
div.user_login_form.main-box.center input {border:0px solid black;height:17px;padding:0px 4px;-webkit-border-radius:40px;margin:0px;font:12px verdana;vertical-align:top;}
div.user_login_form.main-box.center input[type="checkbox"] {position:relative;bottom:1px;}
.tdtopics, td.tdtopics, td.tcl.tdtopics {text-align:left !important;}

div.pun {width:1000px; margin 0px auto;}



Code:

.main-head , .main-content , .table th , .table td {
-moz-border-radius : 10px;
}

Code:

.frm {
margin-top : -10px;
}

Code:

fieldset.frm-set {
margin-top : 0px !important;
}

Code:

<div class="pun-crumbs">
   <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}&amp;nbsp;&amp;raquo;&amp;nbsp;
      <strong><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></strong>
   </p>
</div>

Josh wrote:My second question is, would it be possible to but a whole rounded body around everything on my forum? For example, there's a rounded green table behind the forum categories, posts, and just about any elements in this screenshot. Currently on my forum, the category boxes and just about everything is free floating/rounded corners stacked up. I like the way all of the tables are on one large one, like here on WebArtz or any standard phpBB Forum.

Code:

.post , .postmain , .posthead , .main-content{
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}

Code:

body {
background-color : #333;
}

Code:

.post , .main-content , .topic {
margin-bottom : 10px;
-moz-border-radius : 10px;
}

.main-content {
background : transparent !important;
}

Code:

.topic .post {
margin-bottom : 5px;
}