Categorias mais ou menos com essa aparencia

Qual é minha questão:
Como deixo a aparência da estrutura do forum e a categorias mais ou menos igual a desse forum:  http://fairytail-xtreme.ativoforum.com/forum

Se precisar tarei falando as cores pra ser usada e as imagens passarei se precisar.

Endereço do meu fórum:
http://saintseiya-extreme.maisforum.com

Versão do fórum:
PUNBB

Olá,

Adicione á teu CSS:

Código:

.main .main-foot, .main .main-head {background: url(http://i48.servimg.com/u/f48/16/88/27/59/i_back11.png);border-radius: 0px 0px 30px 30px;margin-top: 15px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.298039) 0px 1px 3px, rgba(255, 255, 255, 0.2) 0px 2px 0px inset;color: rgb(255, 255, 255);font-size: 12px;padding: 13px;text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px;font-weight: 700;}
.main .main-head .page-title {font-size: 12px;}
.page-title h2 {border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px inset;font-size: 2em;font-weight: 700;margin-left: 25%;margin-top: -5px;padding: 5px;text-align: center;text-shadow: rgb(0, 0, 0) 0px 0px 5px;width: 415px;background: none 0px 0px repeat scroll rgb(69, 75, 77);font-family: vivaldi;}
.pun .main-content {background-color: rgb(251, 251, 251);border: 1px solid rgb(255, 255, 255);border-image: initial;}
.main-content {background: transparent;border-radius: 0px 0px 15px 15px;height: 85%;margin-left: auto;margin-right: auto;margin-top: 5px;padding: 4px;position: relative;width: 85%;}
.pun table.table {border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;-webkit-box-shadow: rgb(105, 105, 105) 2px 2px 2px;background: url(http://d3gm0gyvg41muv.cloudfront.net/images/background_pattern.gif) 0% 0% rgb(227, 217, 199);border-collapse: separate;border-color: gray;border-spacing: 0px;box-shadow: rgb(105, 105, 105) 2px 2px 2px;padding: 0px;}
.pun table.table #myTRlocation td {border: transparent;border-image: initial;}
.pun table #myTRlocation td.tcl {background: url(http://fairytail-xtreme.ativoforum.com/155-ltr.css) 50% 100% no-repeat;border: transparent;border-image: initial;left: 50px;margin-left: -50px;}
.pun table #myTRlocation .tcl {overflow: hidden;text-align: left;width: 50%;}
.pun table.table #myTRlocation td {border-color: rgb(255, 255, 255);border-style: solid none none solid;border-width: 1px;line-height: 130%;padding: 0.6em 0px 0.7em;background: url(http://d3gm0gyvg41muv.cloudfront.net/images/background_pattern.gif) 0% 0% rgb(0, 0, 0);}
.pun table .tcl {overflow: hidden;text-align: left;}
.hierarchy {border: none;border-image: initial;display: inline;text-transform: none;font-weight: 700;text-shadow: rgb(255, 255, 255) 0px 0px 5px;}
div.flip {-webkit-perspective: 600px;height: 72px;position: relative;width: 450px;}
div.flip div.rotate {-webkit-transform-style: preserve-3d;-webkit-transition: all 0.3s ease-in-out 0.3s;height: 100%;width: 100%;}
div.rotate.x :nth-child(2) {-webkit-transform: rotateX(180deg);}
div.flip div.rotate > div {background: rgb(238, 238, 238);box-sizing: border-box;padding: 8px;}
div.flip div.rotate > * {-webkit-backface-visibility: hidden;height: 100%;position: absolute;width: 100%;}
.sforum {background: none 0px 0px repeat scroll rgb(0, 0, 139);color: rgb(181, 181, 181);display: block;height: 0px;overflow: hidden;position: relative;z-index: 3;}
.open_forumspoiler {background: none 0px 0px repeat scroll rgb(0, 0, 0);border-radius: 0px 0px 5px 5px;color: rgb(181, 181, 181);display: block;float: center;font-size: 11px;margin-right: 50px;padding: 4px;text-align: center;width: 120px;z-index: 3;}
.forumspoiler a {text-shadow: rgb(0, 0, 0) 1px 1px 0px;color: rgb(181, 181, 181);}
.pun table .dtcr {-webkit-box-shadow: rgb(0, 0, 238) 5px 0px 5px;background: url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif) 50% 0% repeat;border-radius: 15px 0px 0px;border-top: 10px rgb(227, 217, 199);box-shadow: rgb(0, 0, 238) 5px 5px 5px;font-size: 10px;font-style: oblique;margin-left: 80px;text-align: center;width: 58%;}
#avatar-lastpost img {background-image: url(http://3.bp.blogspot.com/_kmhg0rquhbc/SVYgoGOyS7I/AAAAAAAAANw/Z2YvJOV35pA/s400/azulejo+branco+1.jpg);border-radius: 5px 5px 15px;box-shadow: rgb(0, 0, 0) 3px 3px 3px;float: left;margin-left: -140px;margin-top: 0px;height: 85px;position: absolute;width: 50px;}

Resultas?

Até mais.

Nossa, ficou otimo, mas em algumas parte as imagens que eu tenho nas categorias cortou, teria como arrumar? E a cor da barra categoria teria como deixar na cor azul?

Olá,

Troque o código acima por este:

Código:

.pun table.table #myTRlocation td {border-radius: 6px;}
.main .main-foot, .main .main-head {background: url(http://i48.servimg.com/u/f48/16/88/27/59/i_back11.png);border-radius: 0px 0px 30px 30px;margin-top: 15px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.298039) 0px 1px 3px, rgba(255, 255, 255, 0.2) 0px 2px 0px inset;color: rgb(255, 255, 255);font-size: 12px;padding: 13px;text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px;font-weight: 700;-webkit-filter: hue-rotate(244deg);}
.main-content table.table tbody.statused tr#myTRlocation td.tcl img {max-width: 300px}
.main .main-head .page-title {font-size: 12px;}
.page-title h2 {border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px inset;font-size: 2em;font-weight: 700;margin-left: 25%;margin-top: -5px;padding: 5px;text-align: center;text-shadow: rgb(0, 0, 0) 0px 0px 5px;width: 415px;background: none 0px 0px repeat scroll rgb(69, 75, 77);font-family: vivaldi;}
.pun .main-content {background-color: rgb(251, 251, 251);border: 1px solid rgb(255, 255, 255);border-image: initial;}
.main-content {background: transparent;border-radius: 0px 0px 15px 15px;height: 85%;margin-left: auto;margin-right: auto;margin-top: 5px;padding: 4px;position: relative;width: 85%;}
.pun table.table {border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;-webkit-box-shadow: rgb(105, 105, 105) 2px 2px 2px;background: url(http://d3gm0gyvg41muv.cloudfront.net/images/background_pattern.gif) 0% 0% rgb(227, 217, 199);border-collapse: separate;border-color: gray;border-spacing: 0px;box-shadow: rgb(105, 105, 105) 2px 2px 2px;padding: 0px;}
.pun table.table #myTRlocation td {border: transparent;border-image: initial;}
.pun table #myTRlocation td.tcl {background: url(http://fairytail-xtreme.ativoforum.com/155-ltr.css) 50% 100% no-repeat;border: transparent;border-image: initial;left: 50px;margin-left: -50px;}
.pun table #myTRlocation .tcl {overflow: hidden;text-align: left;width: 50%;}
.pun table.table #myTRlocation td {border-color: rgb(255, 255, 255);border-style: solid none none solid;border-width: 1px;line-height: 130%;padding: 0.6em 0px 0.7em;background: url(http://d3gm0gyvg41muv.cloudfront.net/images/background_pattern.gif) 0% 0% rgb(0, 0, 0);}
.pun table .tcl {overflow: hidden;text-align: left;}
.hierarchy {border: none;border-image: initial;display: inline;text-transform: none;font-weight: 700;text-shadow: rgb(255, 255, 255) 0px 0px 5px;}
div.flip {-webkit-perspective: 600px;height: 72px;position: relative;width: 450px;}
div.flip div.rotate {-webkit-transform-style: preserve-3d;-webkit-transition: all 0.3s ease-in-out 0.3s;height: 100%;width: 100%;}
div.rotate.x :nth-child(2) {-webkit-transform: rotateX(180deg);}
div.flip div.rotate > div {background: rgb(238, 238, 238);box-sizing: border-box;padding: 8px;}
div.flip div.rotate > * {-webkit-backface-visibility: hidden;height: 100%;position: absolute;width: 100%;}
.sforum {background: none 0px 0px repeat scroll rgb(0, 0, 139);color: rgb(181, 181, 181);display: block;height: 0px;overflow: hidden;position: relative;z-index: 3;}
.open_forumspoiler {background: none 0px 0px repeat scroll rgb(0, 0, 0);border-radius: 0px 0px 5px 5px;color: rgb(181, 181, 181);display: block;float: center;font-size: 11px;margin-right: 50px;padding: 4px;text-align: center;width: 120px;z-index: 3;}
.forumspoiler a {text-shadow: rgb(0, 0, 0) 1px 1px 0px;color: rgb(181, 181, 181);}
.pun table .dtcr {-webkit-box-shadow: rgb(0, 0, 238) 5px 0px 5px;background: url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif) 50% 0% repeat;border-radius: 15px 0px 0px;border-top: 10px rgb(227, 217, 199);box-shadow: rgb(0, 0, 238) 5px 5px 5px;font-size: 10px;font-style: oblique;margin-left: 80px;text-align: center;width: 58%;}
#avatar-lastpost img {background-image: url(http://3.bp.blogspot.com/_kmhg0rquhbc/SVYgoGOyS7I/AAAAAAAAANw/Z2YvJOV35pA/s400/azulejo+branco+1.jpg);border-radius: 5px 5px 15px;box-shadow: rgb(0, 0, 0) 3px 3px 3px;float: left;margin-left: -140px;margin-top: 0px;height: 85px;position: absolute;width: 50px;}

Resultas ?

Até mais.

Funcionou, mas alguns titulos ficaram com neon e outros e nao. Como deixo essa parte normal?

UP

Olá,

Aqui está:

Código:

.pun table.table #myTRlocation td {border-radius: 6px;}
.main .main-foot, .main .main-head {background: url(http://i48.servimg.com/u/f48/16/88/27/59/i_back11.png);border-radius: 0px 0px 30px 30px;margin-top: 15px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.298039) 0px 1px 3px, rgba(255, 255, 255, 0.2) 0px 2px 0px inset;color: rgb(255, 255, 255);font-size: 12px;padding: 13px;text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px;font-weight: 700;-webkit-filter: hue-rotate(244deg);}
.main-content table.table tbody.statused tr#myTRlocation td.tcl img {max-width: 300px}
.main .main-head .page-title {font-size: 12px;}
.page-title h2 {border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px inset;font-size: 2em;font-weight: 700;margin-left: 25%;margin-top: -5px;padding: 5px;text-align: center;text-shadow: rgb(0, 0, 0) 0px 0px 5px;width: 415px;background: none 0px 0px repeat scroll rgb(69, 75, 77);font-family: vivaldi;}
.pun .main-content {background-color: rgb(251, 251, 251);border: 1px solid rgb(255, 255, 255);border-image: initial;}
.main-content {background: transparent;border-radius: 0px 0px 15px 15px;height: 85%;margin-left: auto;margin-right: auto;margin-top: 5px;padding: 4px;position: relative;width: 85%;}
.pun table.table {border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;-webkit-box-shadow: rgb(105, 105, 105) 2px 2px 2px;background: url(http://d3gm0gyvg41muv.cloudfront.net/images/background_pattern.gif) 0% 0% rgb(227, 217, 199);border-collapse: separate;border-color: gray;border-spacing: 0px;box-shadow: rgb(105, 105, 105) 2px 2px 2px;padding: 0px;}
.pun table.table #myTRlocation td {border: transparent;border-image: initial;}
.pun table #myTRlocation td.tcl {background: url(http://fairytail-xtreme.ativoforum.com/155-ltr.css) 50% 100% no-repeat;border: transparent;border-image: initial;left: 50px;margin-left: -50px;}
.pun table #myTRlocation .tcl {overflow: hidden;text-align: left;width: 50%;}
.pun table.table #myTRlocation td {line-height: 130%;padding: 0.6em 0px 0.7em;background: url(http://d3gm0gyvg41muv.cloudfront.net/images/background_pattern.gif) 0% 0% rgb(0, 0, 0);}
.pun table .tcl {overflow: hidden;text-align: left;}
.hierarchy {border: none;border-image: initial;display: inline;text-transform: none;font-weight: 700;}
div.flip {-webkit-perspective: 600px;height: 72px;position: relative;width: 450px;}
div.flip div.rotate {-webkit-transform-style: preserve-3d;-webkit-transition: all 0.3s ease-in-out 0.3s;height: 100%;width: 100%;}
div.rotate.x :nth-child(2) {-webkit-transform: rotateX(180deg);}
div.flip div.rotate > div {background: rgb(238, 238, 238);box-sizing: border-box;padding: 8px;}
div.flip div.rotate > * {-webkit-backface-visibility: hidden;height: 100%;position: absolute;width: 100%;}
.sforum {background: none 0px 0px repeat scroll rgb(0, 0, 139);color: rgb(181, 181, 181);display: block;height: 0px;overflow: hidden;position: relative;z-index: 3;}
.open_forumspoiler {background: none 0px 0px repeat scroll rgb(0, 0, 0);border-radius: 0px 0px 5px 5px;color: rgb(181, 181, 181);display: block;float: center;font-size: 11px;margin-right: 50px;padding: 4px;text-align: center;width: 120px;z-index: 3;}
.forumspoiler a {text-shadow: rgb(0, 0, 0) 1px 1px 0px;color: rgb(181, 181, 181);}
.pun table .dtcr {-webkit-box-shadow: rgb(0, 0, 238) 5px 0px 5px;background: url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif) 50% 0% repeat;border-radius: 15px 0px 0px;border-top: 10px rgb(227, 217, 199);box-shadow: rgb(0, 0, 238) 5px 5px 5px;font-size: 10px;font-style: oblique;margin-left: 80px;text-align: center;width: 58%;}
#avatar-lastpost img {background-image: url(http://3.bp.blogspot.com/_kmhg0rquhbc/SVYgoGOyS7I/AAAAAAAAANw/Z2YvJOV35pA/s400/azulejo+branco+1.jpg);border-radius: 5px 5px 15px;box-shadow: rgb(0, 0, 0) 3px 3px 3px;float: left;margin-left: -140px;margin-top: 0px;height: 85px;position: absolute;width: 50px;}

Resultas?

Até mais.

Olá Coloque isso em teu css

Spoiler:

Fucionou [F]lames, obrigado