Personalização da Borda do fórum

[Uatyla]

• 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 diversos	Tags:	Personalização,Borda,fórum

---

[Hancki]

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

[Uatyla]

É 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/

[Hancki]

Explique-se melhor, por favor :/

[Uatyla]

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.

[Hancki]

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.

[Uatyla]

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.

[Hancki]

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

[Uatyla]

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

[Tutorialmaldito]

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.

[Uatyla]

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

[Tutorialmaldito]

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.

[Sennior]

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:
https://i.servimg.com/u/f48/16/88/27/59/1240_c10.png

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

Abraços.

[Uatyla]

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

[Sennior]

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.

Abraços.

[Uatyla]

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?

[Alex Habilidade]

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...

[Sennior]

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.

[Uatyla]

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

[Tutorialmaldito]

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:
https://i.servimg.com/u/f48/16/88/27/59/1240_c10.png

Poderá pedir na seção gráfica também:
https://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.

[Uatyla]

da para bola um código com essa borda? http://levelupgames.uol.com.br/ragnarok/_img/_icon-banner-js/slider_bg.png

[Tutorialmaldito]

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:

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.

[Alex Habilidade]

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;
}


[Uatyla]

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

[Tutorialmaldito]

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.