Personalizar categorias do fórum

[Gabriel Camboim]

Detalhes da questão

Endereço do fórum: http://nanatsunotaizairpg.forumeiros.com/
Versão do fórum: PunBB

Descrição

Olá, eu queria modificar as categorias pra ficar igual à esse fórum: http://guitar-masters.forum-livre.com/

Transparente, com bordas arredondadas e com os efeitos presentes nele e com as categorias separadas, e de diferente eu queria o texto do nome da categoria centralizado e com negrito+neon (acho que branco/cinza)

[while]

Olá autor, bom dia.

Adicione esse código em sua folha de estilo css:

Código:

.pun table th.tc2, .pun table th.tc3, .pun table th.tc4, .pun table th.tcl, .pun table th.tcr {
    background-image: url(http://i13.servimg.com/u/f13/18/02/24/75/cats11.jpg)!important;
    background-repeat: repeat-x;
    color:red;
    list-style-type: none; 
    margin: 0;
}
table > thead > tr > th.tcl > div > h2 {text-align:center;font-weight:700;text-shadow:0 0 12px #fff;color:black;}
.pun table.table td {border:none!important;}

.pun table.table td {
    color: black;
    font-family: arial;
    font-weight: 15px;
    transition: all 0.5s;
    margin-bottom: 5px!Important;
    background: rgb(238,238,238);
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
    opacity: 0.8;
    border-bottom:1px solid #7A7A7A !important;
}
.pun .main-content {margin-bottom:20px;}

Até mais.

[Gabriel Camboim]

Olá, não resultou

[Gabriel Camboim]

UP!

[while]

Olá autor, bom dia.

UP só é permitido depois de 24 horas da ultima resposta, tome cuidado com isto, pois pode ter sua barra de respeito diminuida.

Poderia confirmar se o link do seu fórum é este: http://nanatsunotaizairpg.forumeiros.com/

Já é o segundo tópico que o senhor diz que não teve resultado, será que estais colocando o código no lugar certo?

Aceda:

Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> Folha de estilo css

coloque o código no começo de todos os códigos e clique em salvar.

Não tem mistério... o resultado é pra ser este:


Até mais.

[Gabriel Camboim]

Olá, peço desculpas por não ter dito o resultado.

Esse foi exatamente o resultado encontrado, porém não foi o resultado do fórum que mostrei. Queria com a borda transparente entre eles, e que ficasse transparente o fundo dos títulos das categorias que só agora percebi que é uma imagem, podia ficar transparente ou um fundo opaco pra poder ver o fundo do fórum? seria uma borda completamente transparente e arredondada.

Já passei minha folha de css no outro tópico, obrigado pelo seu tempo e agradeço a paciência.

[Gabriel Camboim]

UP!

[Kyo Panda]

Tente esse:

Código:

/**
 * BEGIN Estilo das tabelas
 */

div.pun table.table th {
  background-color: transparent;
}

div.pun div.main-content {
  background-color: transparent;
}

div.pun div.main-content table {
  border-color: transparent;
  border-collapse: separate;
  border-spacing: 0 10px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 10px 10px 2px 2px;
  margin-bottom: 30px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.3);
}

div.pun div.main-content table tr {
  padding-bottom: 10px;
}

div.pun div.main-content table td {
  border: transparent;
  background-color: rgba(204, 204, 204, 0.9);
}

div.pun div.main-content table td:first-child {
  border-radius: 10px 0 0 10px;
}

div.pun div.main-content table td:last-child {
  border-radius: 0 10px 10px 0;
}

div.pun div.main-content table thead {
  color: #fff;
}

div.pun div.main-content table thead h2 {
  text-align: center;
  font-weight: 700;
  text-shadow: 0 0 5px #fff;
}

/**
 * END Estilo das tabelas
 */

Para que conseguisse o efeito transparente nas tabelas, tive que remover a cor de fundo padrão do seu fórum. Logo, haverão algumas outras partes que ficaram transparentes também.

Então se o senhor pudesse me ajudar indicando essas partes a serem preenchidas, nós damos um jeito. ^-^v

[Kyo Panda]

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema. Tópico marcado como Resolvido e movido para Questões resolvidas.