Personalização da Borda do fórum

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Personalização da Borda do fórum

Mensagem por Uatyla em 22/06/14, 07:58 am

  • Descrição:
Olá colegas!

Gostaria de saber como colocar essa borda no layout do fórum? http://4.bp.blogspot.com/_A_BXOSXle0Y/TGIC9A1XqBI/AAAAAAAAAgM/6bNu3esvW_M/s1600/bg_base_repeat.jpg

  • Informações:
Fórum:http://clan-xtremocaos.forumeiros.com/Versão:PHPBB3
Tipo:Erros diversosTags:Personalização,Borda,fórum



Última edição por uatyla em 30/06/14, 09:39 am, editado 1 vez(es)
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Hancki em 22/06/14, 08:07 am

Olá!

Use este CSS:
Código:
#wrap {
   background: url('http://4.bp.blogspot.com/_A_BXOSXle0Y/TGIC9A1XqBI/AAAAAAAAAgM/6bNu3esvW_M/s1600/bg_base_repeat.jpg');
   background-size: 100%;
}
Será isso?

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 22/06/14, 09:44 am

É quase isso! No meu fórum tem uma borda que é um monte de pontinhos, e queria o mesmo com a borda que informei, mais ó a borda sem o fundo amarelo para ficar igual a esse blog.

Um blogue de teste que tenho: http://cafe-combobagem.blogspot.com.br/
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Hancki em 22/06/14, 03:56 pm

Explique-se melhor, por favor :/
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 22/06/14, 04:04 pm

Eu desejo que a borda contorne tanto as laterais como a parte superior, si entra no meu fórum notara que meu fórum tem uma borda de pontos que contorna todo fórum.
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Hancki em 22/06/14, 04:31 pm

Você diz mesmo o fundo da página?
Se sim, use este CSS:
Código:
#phpbb {
  background: url('http://4.bp.blogspot.com/_A_BXOSXle0Y/TGIC9A1XqBI/AAAAAAAAAgM/6bNu3esvW_M/s1600/bg_base_repeat.jpg');
  background-size: 100%;
}
Se não for assim, explique-se de outra forma.
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 22/06/14, 05:03 pm

Olha eu uso essa borda confira:


Código:
/*** Borda do Fórum ***/

#wrap {
width: 94%;
padding: 5px;
border: 3px dotted #999;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
padding: 9px;
}

/*** Borda do Fórum Fim ***/

Eu queria assim para meu fórum.
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Hancki em 23/06/14, 06:15 am

Sim, eu já reparei, mas que quer que faça com isso? Não tem como fazer fotomontagem para percebermos melhor? :s
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 24/06/14, 09:07 pm

Bom seria +/- igual ao dessa imagem, onde criasse uma borda por volta de todo o fórum.
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Tutorialmaldito em 26/06/14, 11:53 am

A função border-image é o que você vai precisar pra isso, caso seja algo que se repita ao redor da borda toda. Essa função também deixa colocar uma imagem diferente em cada canto.
avatar

Tutorialmaldito
Nível 3

Masculino
Inscrito dia : 18/06/2014
Mensagens : 20
Pontos Ativos : 26

Ver perfil do usuário http://forumqualquer.forumeiros.com

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 26/06/14, 12:00 pm

Como assim, poderia me explicar um pouco melhor? O senhor tem algum código que faz essa função?
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Tutorialmaldito em 26/06/14, 05:26 pm

Vai depender da im agem e como você vai querer fazer, então não tem como passar algo pronto, e o código é só border-image mesmo, as instruções vão ser diferentes de acordo com a imagem/o que você quer.

Pra uma imagem poder ser usada ela tem que ter essa divisão: http://www.norabrowndesign.com/css-experiments/images/border-image.png

O meio é em branco ou a cor/imagem que quiser que fique no fundo, os cantos são a imagem que vai mostrar em cada canto, e o que tem entre vai ficar nas laterais. O tamanho não precisa ser igual pra cada lado, mas tem que formar aquela "cruz" no meio entre cada uma dessas partes pra ficar certinho.
avatar

Tutorialmaldito
Nível 3

Masculino
Inscrito dia : 18/06/2014
Mensagens : 20
Pontos Ativos : 26

Ver perfil do usuário http://forumqualquer.forumeiros.com

Resolvido Re: Personalização da Borda do fórum

Mensagem por Sennior em 29/06/14, 12:20 pm

Saudações,

É como nosso amigo acima disse. O senhor terá que ter uma imagem própria para isso, já que por CSS é meio inviável fazer.
Veja um exemplo:
Seta http://i48.servimg.com/u/f48/16/88/27/59/1240_c10.png

Poderá pedir na seção gráfica também:
Seta http://ajuda.forumeiros.com/f17-

Abraços.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 29/06/14, 12:48 pm

E na parti superior? Essa imagem só funcionará nas  laterais, porem na parte superior e inferiores como faço?
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Sennior em 29/06/14, 12:51 pm

Saudações,

Aí o senhor pode pedir uma edição na imagem na Seção Gráfica ou em seu próprio editor de imagem.
Assim poderá colocar uma borda na imagem na parte superior e inferior da imagem. Muito feliz

Abraços.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 29/06/14, 12:57 pm

Sim mais o código fornecido só funciona nas laterais, o senhor pode me fornecer o código que funcione na parte superior e inferior?
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Alex Habilidade em 29/06/14, 01:13 pm

Uatyla, para fornecemos o código superior e inferior seria mais viável o senhor já nos enviar a imagem pronta, para colocar o código conforme a sua imagem...
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Personalização da Borda do fórum

Mensagem por Sennior em 29/06/14, 01:16 pm

Saudações,

Não amigo, o código funciona por toda a base do fórum, no caso é a imagem mesmo que não tem borda superior e inferior.
No caso o senhor terá que colocar como eu disse por meio de um editor de imagem uma borda superior e inferior na própria imagem. :p

Abraços.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 29/06/14, 01:18 pm

Ok! Eu tenho um pedido em andamento na seção de design, quando termina eu volto aqui.
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Tutorialmaldito em 29/06/14, 11:29 pm

@Sennior escreveu:Saudações,

É como nosso amigo acima disse. O senhor terá que ter uma imagem própria para isso, já que por CSS é meio inviável fazer.
Veja um exemplo:
Seta http://i48.servimg.com/u/f48/16/88/27/59/1240_c10.png

Poderá pedir na seção gráfica também:
Seta http://ajuda.forumeiros.com/f17-

Abraços.
Não acho que você tenha entendido o que eu quis dizer, border-image É CSS, e é o melhor jeito de se colocar uma borda personalizada ao redor de algo (e parece serem comuns os pedidos disso por aqui, recomendo pesquisar). Só que precisa de uma imagem pra usar o código... Ou seja: Primeiro se pega a imagem com todos os pedaços da borda juntos (quatro cantos e lados), depois se faz o código com os tamanhos da imagem certinho.
avatar

Tutorialmaldito
Nível 3

Masculino
Inscrito dia : 18/06/2014
Mensagens : 20
Pontos Ativos : 26

Ver perfil do usuário http://forumqualquer.forumeiros.com

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 30/06/14, 07:31 am

avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Tutorialmaldito em 30/06/14, 08:49 am

Sim, mas o ideal seria a imagem ser o menor possível, no formato do exemplo que eu dei, só com o essencial mesmo. O que o código faz é pegar cada imagem e jogar no seu canto, os cantos vão pros contos, e os lados são ou repetidos várias vezes, ou esticados.

Aqui o código pra essa borda, só precisa ver onde quer que ela fique e trocar o seletor (baliza) pra por a borda onde preferir, esse vai colocar ela ao redor do fórum todo:
Spoiler:
body {
   border-style: solid;
  border-width: 40px 59px 40px 81px;
  -moz-border-image: url(http://imageshack.com/a/img842/7452/254n.png) 40 59 40 81 repeat;
  -webkit-border-image: url(http://imageshack.com/a/img842/7452/254n.png) 40 59 40 81 repeat;
  -o-border-image: url(http://imageshack.com/a/img842/7452/254n.png) 40 59 40 81 repeat;
  border-image: url(http://imageshack.com/a/img842/7452/254n.png) 40 59 40 81 fill repeat;
}


Só peço que se usar isso, baixe a imagem e dê upload noutro lugar e troque os links, pra eu poder deletar depois.

E pra quem não sabe como o código funciona, pode usar esse gerador de bordas aqui: http://border-image.com/

Pra copiar o código é só clicar em "toggle style" no topo e copiar o que fica no exemplo.


Última edição por Tutorialmaldito em 30/06/14, 09:32 am, editado 3 vez(es)
avatar

Tutorialmaldito
Nível 3

Masculino
Inscrito dia : 18/06/2014
Mensagens : 20
Pontos Ativos : 26

Ver perfil do usuário http://forumqualquer.forumeiros.com

Resolvido Re: Personalização da Borda do fórum

Mensagem por Alex Habilidade em 30/06/14, 09:11 am

Olá, tente usar este:
Código:

body#phpbb {
-moz-border-image: url('http://imageshack.com/a/img842/7452/254n.png') 60 50 round;
-webkit-border-image: url('http://imageshack.com/a/img842/7452/254n.png') 60 50 round;
-o-border-image: url('http://imageshack.com/a/img842/7452/254n.png') 60 50 round;
border-image: url('http://imageshack.com/a/img842/7452/254n.png') 60 50 round;
border-image-width: 165px;
}
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Personalização da Borda do fórum

Mensagem por Uatyla em 30/06/14, 09:39 am

Funciona mais o templat que uso não fica bom! vlw!
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Personalização da Borda do fórum

Mensagem por Tutorialmaldito em 30/06/14, 10:51 am

Copia o código e trabalho dos outros e ainda recebe o crédito, bonito hein.

Enfim, lembrando que se usar, eu vou deletar a imagem mais tarde, então dê upload denovo.
avatar

Tutorialmaldito
Nível 3

Masculino
Inscrito dia : 18/06/2014
Mensagens : 20
Pontos Ativos : 26

Ver perfil do usuário http://forumqualquer.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum