Detalhes da questão

Endereço do fórum: http://testadordetemas.forumeiro.com
Versão do fórum: phpBB2

Descrição

É possível fazer o quadro do widget assim? https://imgur.com/a/CiT1j

Assim?
-> http://prntscr.com/gkrhjt

Se sim, adicione à sua CSS:

Código:

#right * {
  box-sizing: border-box;
}

#right .module {
  border: solid 1px #ddd;
  border-radius: 3px;
  overflow: hidden;
}

#right .module > .main-head {
  background-color: #b32222 !important;
  text-shadow: none;
  padding: 0 10px;
  margin: -2px -2px 15px -2px !important;
  position: relative;
}

#right .module > .main-head::before {
  content: "";
  border: solid 10px transparent;
  border-top-color: #b32222;
  position: absolute;
  top: 100%;
}

#right .module > .main-head > .h3 {
  color: #fff;
}

#right .module > .main-head > .h3::before {
  content: none;
}

#right .module > .main-content {
  border: none;
}

o/

Sem resultado, e ainda bugou a barra da categoria.

Tem um código do widget antigo do meu fórum, ainda na folha CSS, talvez seja isso que não deu resultado, tem como você retira esse código, e por o seu?
CSS:
https://hastebin.com/uxahicubax.php

Veja se trocando por essa resolve:
-> https://hastebin.com/denaruxica.php

Tinha um pequeno erro no seu CSS.

o/

Sem resultado, e ainda bugou o botão de retrátil da categoria que não aparece +;

Troque por:
-> https://github.com/files-assets/junk/blob/master/archives/fdf/css/002.css

sem resultado ainda, como falei, deve ser porque no meu css, tem o código do widget atual ainda. E o retrátil categoria ainda tá bugado.

Não é isso.
Veja com é o CSS correto:
-> http://prntscr.com/gkv6n2

Mas veja como ele fica na sua folha:
-> http://prntscr.com/gkv6vh

Copie o código daqui e cole:
-> https://raw.githubusercontent.com/files-assets/junk/master/archives/fdf/css/002.css

Veja também se a opção "Melhorar seu CSS" esteja ativada.

Sim, a opção ''Melhorar seu CSS" está ativa.

Coloquei esse css que me mandou denovo, e continua sem resultado.


Para mim, o à não aparece não.

Tente remover o código abaixo do seu CSS:

Código:

#right * {
  box-sizing: border-box;
}
 
#right .module {
  border: solid 1px #ddd;
  border-radius: 3px;
  overflow: hidden;
}
 
#right .module > .main-head {
  background-color: #b32222 !important;
  text-shadow: none;
  padding: 0 10px;
  margin: -2px -2px 15px -2px !important;
  position: relative;
}
 
#right .module > .main-head::before {
  content: "";
  border: solid 10px transparent;
  border-top-color: #b32222;
  position: absolute;
  top: 100%;
}
 
#right .module > .main-head > .h3 {
  color: #fff;
}
 
#right .module > .main-head > .h3::before {
  content: none;
}
 
#right .module > .main-content {
  border: none;
}

Agora, escreva, manualmente, ao final do CSS, sem copiar, os mesmos estilos colocados acima.

Mudou apenas a cor da barra do widgets

O código do Luiz não parece estar aplicado. Apliquei ele diretamente e:

Eu apliquei, e quero esse efeito, porém quando eu aplico pelo Copair e colar, ele buga e fica um Monte desse "Ã"

Apliquei escrevendo, e só mudou a cor.

UP

Isso quer dizer que algo deve estar afetando o encoding do seu navegador. Tente logar no seu fórum em uma aba anônima do Chrome (CTRL+SHIFT+N) e veja se isso ocorre. Abra o FdF também na aba anônima antes de copiar o código dele.

No navegador anonimo resultou, muito obrigado.