Como personalizar as categorias

Como personalizar as categorias

 por Matheus Pio 23.03.13 1:25

Qual é minha questão:
Olá, queria saber como personalizar as categorias, assim: 

Ela está desta forma: 

e eu quero que fique mais ou menos desta forma: 

Endereço do meu fórum:
http://cronicasgeloefogorpg.forumeiros.com

Versão do fórum:
PHPBB3

Re: Como personalizar as categorias

 por Evidaaηc 23.03.13 1:28

Re: Como personalizar as categorias

 por Matheus Pio 23.03.13 1:32

• 0Reputação da mensagem: 100% (1 votos)

Re: Como personalizar as categorias

 por Konai 23.03.13 1:33

Olá querido,

Aceda à: Painel de Controle Visualização Imagens e Cores Cores Aba 'Folha de estilo CSS'

E lá adicione este código:

Código:

::-webkit-scrollbar-track-piece {
background-color: #C2BC84;
opacity: 0.7;
}
ul.topiclist {
background-image: url(http://hitskin.com/themes/19/27/57/i_back_title.jpg);
background-repeat: repeat-x;
color: #757575;
list-style-type: none;
margin: 0;
}
ul.forums {
background-color: #000000;
border-bottom: 7px solid #000000;
border-top: 40px solid #000000;
padding: 30px 0 0;
}
ul.topiclist li.header dl dd {
border: none;
}
li.header dd, li.header dt {
color: #EED8AE;
font-family: Amatic SC;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
display: block;
}
ul.topiclist dd {
border-left: 1px solid transparent;
display: block;
float: left;
padding: 4px 0;
}
dd.posts, dd.topics, dd.views {
border: none;
font-size: 1.2em;
line-height: 2.2em;
text-align: center;
width: 8%;
}
li.header dd {
margin-left: 1px;
}
dd.lastpost {
font-size: 1.1em;
width: 20%;
}
.table-title, .table-title h2 {
color: #EED8AE;
font-size: 2em;
text-align: center;
}
.table-title h2 {
color: transparent;
font-family: Amatic SC;
font-size: 35px;
letter-spacing: -4px;
text-transform: lowercase;
text-align: center;
display: block;
margin-bottom: -50px;
margin-top: -10px;
}
ul.topiclist li.header dl dd {
border: none;
}
dl.icon dd.dterm, dl.icon dt {
background-position: 5px 50%;
background-repeat: no-repeat;
}
ul.topiclist dd.dterm, ul.topiclist dt {
display: block;
float: left;
font-size: 1.1em;
padding-left: 5px;
padding-right: 5px;
width: 60%;
}
ul.topiclist {
background-image: url(http://hitskin.com/themes/19/27/57/i_back_title.jpg);
background-repeat: repeat-x;
color: #757575;
list-style-type: none;
margin: 0;
}

Cordialmente,
Dr.House

Re: Como personalizar as categorias

 por Matheus Pio 23.03.13 1:42

É mais ou menos assim, só que ficou estranho, e não está aparecendo os nomes das categorias

Print:

Na verdade eu queria sem esse fundo preto, ficou muito estranho, e é claro que apareça as categorias.

Re: Como personalizar as categorias

 por Konai 23.03.13 1:54

Olá querido,

Substitua por este:

Código:

.table-title, .table-title h2 {
color: #EED8AE;
font-size: 2em;
text-align: center;
}
.table-title h2 {
color: transparent;
font-family: Amatic SC;
font-size: 35px;
letter-spacing: -4px;
text-transform: lowercase;
text-align: center;
display: block;
margin-bottom: -50px;
margin-top: -10px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2BC84;
opacity: 0.7;
}
ul.topiclist {
background-image: url(http://hitskin.com/themes/19/27/57/i_back_title.jpg);
background-repeat: repeat-x;
color: #757575;
list-style-type: none;
margin: 0;
}
forabg {
background-color: #;
background-image: url(http://2img.net/i/fa/empty.gif);
background-position: 0 0;
background-repeat: repeat-x;
border: 2px solid #;
clear: both;
margin-bottom: 4px;
padding: 0 5px;
}
ul.topiclist li.header dl dd {
border: none;
}
li.header dd, li.header dt {
color: #EED8AE;
font-family: Amatic SC;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
display: block;
}
ul.topiclist dd {
border-left: 1px solid transparent;
display: block;
float: left;
padding: 4px 0;
}
dd.posts, dd.topics, dd.views {
border: none;
font-size: 1.2em;
line-height: 2.2em;
text-align: center;
width: 8%;
}

Cordialmente,
Dr.House

Re: Como personalizar as categorias

 por Matheus Pio 23.03.13 2:07

• 0Reputação da mensagem: 100% (1 votos)

Re: Como personalizar as categorias

 por Konai 23.03.13 2:10

Olá,

Poderia ativar o código no fórum para eu ver e retirar as partes pretas?

Até mais.

Re: Como personalizar as categorias

 por Matheus Pio 23.03.13 2:17

• 0Reputação da mensagem: 100% (1 votos)

Re: Como personalizar as categorias

 por Konai 23.03.13 2:26

Olá querido,

Substitua por este:

Código:

.table-title, .table-title h2 {
color: #EED8AE;
font-size: 2em;
text-align: center;
}
.table-title h2 {
color: #EED8AE;
font-family: Amatic SC;
font-size: 35px;
letter-spacing: -4px;
text-transform: lowercase;
text-align: center;
display: block;
margin-bottom: -50px;
margin-top: -10px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2BC84;
opacity: 0.7;
}
ul.topiclist {
background-color: #FFF;
background-repeat: repeat-x;
color: #757575;
list-style-type: none;
margin: 0;
}
forabg {
background-color: #FFF;
background-position: 0 0;
background-repeat: repeat-x;
border: 2px solid #;
clear: both;
margin-bottom: 4px;
padding: 0 5px;
}
ul.topiclist li.header dl dd {
border: none;
}
li.header dd, li.header dt {
color: #EED8AE;
font-family: Amatic SC;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
display: block;
}
ul.topiclist dd {
border-left: 1px solid transparent;
display: block;
float: left;
padding: 4px 0;
}
dd.posts, dd.topics, dd.views {
border: none;
font-size: 1.2em;
line-height: 2.2em;
text-align: center;
width: 8%;
}

No caso de não funcionar, delete o código acima e adicione este:

Código:

.table-title, .table-title h2 {
color: #EED8AE;
font-size: 2em;
text-align: center;
}
.table-title h2 {
color: #EED8AE;
font-family: Amatic SC;
font-size: 35px;
letter-spacing: -4px;
text-transform: lowercase;
text-align: center;
display: inline;
margin-bottom: -50px;
margin-top: -10px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2BC84;
opacity: 0.7;
}
ul.topiclist {
background-color: #FFF;
background-repeat: repeat-x;
color: #757575;
list-style-type: none;
margin: 0;
}
forabg {
background-color: #FFF;
background-position: 0 0;
background-repeat: repeat-x;
border: 2px solid #;
clear: both;
margin-bottom: 4px;
padding: 0 5px;
}
ul.topiclist li.header dl dd {
border: none;
}
li.header dd, li.header dt {
color: #EED8AE;
font-family: Amatic SC;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
display: block;
}
ul.topiclist dd {
border-left: 1px solid transparent;
display: block;
float: left;
padding: 4px 0;
}
dd.posts, dd.topics, dd.views {
border: none;
font-size: 1.2em;
line-height: 2.2em;
text-align: center;
width: 8%;
}

Cordialmente,
Dr.House

Re: Como personalizar as categorias

 por Matheus Pio 23.03.13 2:32

O primeiro deu certo vlw!