Sombreamento e arredondamento de todo o fórum

[Cristian 95]

Qual é sua questão:
Bom... nesse fórum, as coisas são separadas por um tipo de imagem, seilá, vendo bem, ele é arredondado e tem um sombreamento, que separa tudo, os perfis do topico, os widget do outros widget e etc... queria saber como deixa assim...

Que medidas você tomou para corrigir o problema:
Vim aqui ao FdF

Endereço do fórum:
http://fest-gunz.forumeiros.com

Versão do fórum:
INVISION

[Luciano98]

Olá!

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

Código:

Código:

.introduction,.panel,.post{
background-color:transparent;
border:1px solid #eee;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #CCCCCC;
-webkit-box-shadow:0px 5px 5px #CCCCCC;
}

div.module{
background-color:transparent;
background-image:url(http://hitskin.com/themes/13/92/59/i_list_bg.png);
background-repeat:repeat;
border:1px solid #eee;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #CCCCCC;
-webkit-box-shadow:0px 5px 5px #CCCCCC;
}

input.button1,input.button2,a.button1,a.button2,button.button2,button.button1{
background:#e7f3f7 url(http://im1.all-up.com/i/img/bg_button.png) repeat-x;
border:1px solid #008AE6;
color:#5e6669;
overflow:visible;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 3px 3px #CCCCCC;
-webkit-box-shadow:0px 3px 3px #CCCCCC;
}
input.button1:hover,input.button2:hover,a.button1:hover,a.button2:hover,button.button2:hover,button.button1:hover{
border:1px solid #FF9D00;
color:black;
background-position:top;
-moz-box-shadow:0px 5px 5px #CCCCCC;
-webkit-box-shadow:0px 5px 5px #CCCCCC;
}

dl.codebox{
border:1px solid #008AE6;
padding:6px;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 10px 10px #CCCCCC;
-webkit-box-shadow:0px 10px 10px #CCCCCC;
}

codebox dt{
background-image:url('http://i65.servimg.com/u/f65/11/95/30/70/citati10.png');
background-repeat:no-repeat;
background-position:top right;
padding:5px 10px 3px 3px;
color:#000;
font-weight:bold;
background-color:#707070;
border:1px solid #888888;
-moz-border-radius:12px;
-webkit-border-radius:12px;
}

#text_editor_textarea{
border:1px solid #008AE6;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 10px 10px #CCCCCC;
-webkit-box-shadow:0px 10px 10px #CCCCCC;
}


.postprofile{
border:1px solid #eee;
text-align:left;
background-image:url(http://hitskin.com/themes/13/92/59/i_list_bg.png);
background-repeat:repeat;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #CCCCCC;
-webkit-box-shadow:0px 5px 5px #CCCCCC;
}

.h3,.catHead{
background-image:url(http://www.sebrasil.com.br/styles/AeroBlack/theme/images/cellpic1.gif);
background-repeat:repeat;
border:1px solid #eee;
color:#FFF;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 5px 5px #CCCCCC;
-webkit-box-shadow:0px 5px 5px #CCCCCC;
text-align:center;
}
ul.topiclist{
border:1px solid #eee;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 2px 2px #CCCCCC;
-webkit-box-shadow:0px 2px 2px #CCCCCC;
}


.pathname-box{
background-image:url('http://demo.phpbb3styles.net/styles/proVista/theme/images/cellpic4.gif');
background-repeat:repeat;
border:1px solid #eee;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 5px 5px #CCCCCC;
-webkit-box-shadow:0px 5px 5px #CCCCCC;
}

Salve.

Até mais.
Luciano98

[Cristian 95]

Agradeço a quem sempre edita o titulo do meu tópico. (:

@Luciano, ae deu certo, pego dirieitinho, mas como fas para editar?

[Luciano98]

Agradeço a quem sempre edita o titulo do meu tópico. (:

@Luciano, ae deu certo, pego dirieitinho, mas como fas para editar?

Para editar você deve aprender CSS.
Me fale o que você quer editar que eu edito.

OBS: Sou eu quem muda o título.

Até mais.
Luciano98.

[Cristian 95]

Ok Luciano... mas pode ser mais tarde? ainda não durmi, se minha mãe me pega no pc essa hora ele fala um monte, ai amanhã vejo com mais calma beleza?

e aproveitando que você está me ajudando, se não for pedir muito, eu vi em um topico, falando que você era bom com esses códigos, seria possivel me passa o site onde você aprendeu JavaScript ou CSS? obrigado. quero aprender uma das linguas. (:
-----------
Pronto Luciano, já sei como quero. (:

a parte do sombreamento pode por dessa cor, "#575757"

[Luciano98]

Olá!

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

Código:

Código:

.introduction,.panel,.post{
background-color:transparent;
border:1px solid #eee;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

div.module{
background-color:transparent;
background-image:url(http://hitskin.com/themes/13/92/59/i_list_bg.png);
background-repeat:repeat;
border:1px solid #eee;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

input.button1,input.button2,a.button1,a.button2,button.button2,button.button1{
background:#e7f3f7 url(http://im1.all-up.com/i/img/bg_button.png) repeat-x;
border:1px solid #008AE6;
color:#5e6669;
overflow:visible;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 3px 3px #575757;
-webkit-box-shadow:0px 3px 3px #575757;
}
input.button1:hover,input.button2:hover,a.button1:hover,a.button2:hover,button.button2:hover,button.button1:hover{
border:1px solid #FF9D00;
color:black;
background-position:top;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

dl.codebox{
border:1px solid #008AE6;
padding:6px;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 10px 10px #575757;
-webkit-box-shadow:0px 10px 10px #575757;
}

codebox dt{
background-image:url('http://i65.servimg.com/u/f65/11/95/30/70/citati10.png');
background-repeat:no-repeat;
background-position:top right;
padding:5px 10px 3px 3px;
color:#000;
font-weight:bold;
background-color:#707070;
border:1px solid #888888;
-moz-border-radius:12px;
-webkit-border-radius:12px;
}

#text_editor_textarea{
border:1px solid #008AE6;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 10px 10px #575757;
-webkit-box-shadow:0px 10px 10px #575757;
}


.postprofile{
border:1px solid #eee;
text-align:left;
background-image:url(http://hitskin.com/themes/13/92/59/i_list_bg.png);
background-repeat:repeat;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

.h3,.catHead{
background-image:url(http://www.sebrasil.com.br/styles/AeroBlack/theme/images/cellpic1.gif);
background-repeat:repeat;
border:1px solid #eee;
color:#FFF;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
text-align:center;
}
ul.topiclist{
border:1px solid #eee;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 2px 2px #575757;
-webkit-box-shadow:0px 2px 2px #575757;
}


.pathname-box{
background-image:url('http://demo.phpbb3styles.net/styles/proVista/theme/images/cellpic4.gif');
background-repeat:repeat;
border:1px solid #eee;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

Salve.

Até mais.
Luciano98

[Cristian 95]

Luciano pensei que a sobreamento era o que dava animação... mas tem uma parte branca, teria como deixa-la preta? "#000000"

[Convidad]

Oi Cristian 95,

Você está se referindo às bordas ou uma outra parte? Pelo que pude entender, você estava se referindo às bordas no código. Abaixo o código editado e o local onde deverá inseri-lo:

Código:

.introduction,.panel,.post{
background-color:transparent;
border:1px solid #000000;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

div.module{
background-color:transparent;
background-image:url(http://hitskin.com/themes/13/92/59/i_list_bg.png);
background-repeat:repeat;
border:1px solid #000000;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

input.button1,input.button2,a.button1,a.button2,button.button2,button.button1{
background:#e7f3f7 url(http://im1.all-up.com/i/img/bg_button.png) repeat-x;
border:1px solid #008AE6;
color:#5e6669;
overflow:visible;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 3px 3px #575757;
-webkit-box-shadow:0px 3px 3px #575757;
}
input.button1:hover,input.button2:hover,a.button1:hover,a.button2:hover,button.button2:hover,button.button1:hover{
border:1px solid #000000;
color:black;
background-position:top;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

dl.codebox{
border:1px solid #008AE6;
padding:6px;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 10px 10px #575757;
-webkit-box-shadow:0px 10px 10px #575757;
}

codebox dt{
background-image:url('http://i65.servimg.com/u/f65/11/95/30/70/citati10.png');
background-repeat:no-repeat;
background-position:top right;
padding:5px 10px 3px 3px;
color:#000;
font-weight:bold;
background-color:#707070;
border:1px solid #888888;
-moz-border-radius:12px;
-webkit-border-radius:12px;
}

#text_editor_textarea{
border:1px solid #008AE6;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-webkit-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-bottomleft:0px;
-moz-box-shadow:0px 10px 10px #575757;
-webkit-box-shadow:0px 10px 10px #575757;
}


.postprofile{
border:1px solid #000000;
text-align:left;
background-image:url(http://hitskin.com/themes/13/92/59/i_list_bg.png);
background-repeat:repeat;
-moz-border-radius-topleft:15px;
-webkit-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-bottomright:15px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

.h3,.catHead{
background-image:url(http://www.sebrasil.com.br/styles/AeroBlack/theme/images/cellpic1.gif);
background-repeat:repeat;
border:1px solid #000000;
color:#FFF;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
text-align:center;
}
ul.topiclist{
border:1px solid #000000;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 2px 2px #575757;
-webkit-box-shadow:0px 2px 2px #575757;
}


.pathname-box{
background-image:url('http://demo.phpbb3styles.net/styles/proVista/theme/images/cellpic4.gif');
background-repeat:repeat;
border:1px solid #000000;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;
-moz-box-shadow:0px 5px 5px #575757;
-webkit-box-shadow:0px 5px 5px #575757;
}

1. Painel de controle
2. Visualização
3. Cores
4. Folha de estilos CSS

Espero que essa mensagem lhe ajude. Sinta-se livre para entrar em contato conosco novamente se tiver outras consultas ou preocupações.

Obrigado e tenha um bom fim de semana!

Supero

[LiteCoder]

Oi Supero,

O código disponibilizado por você não funciona no navegador Opera. O Opera não reconhece o -webkit- e o -moz-, ele não necessita destes códigos no início, sendo assim, fica somente o próprio código, no caso border-radius.
Desculpa, por me intrometer.

Abraços.

[Convidad]

Oi CupCake,

O código não foi desenvolvido por mim, eu simplesmente o editei adequando-o aos padrões que o membro requisitou. O que fiz foi editar a cor das bordas, e não adicionar bordas arredondadas funcionando em todos os navegadores. O código que passei funciona corretamente para o efeito desejado (alterar a cor da borda).

Espero que isso responda a sua questão.

[Cristian 95]

Pode closar aqui.

Obrigado Luciano e Supero. (: