Tutorial: Avisos em formato de fita (como no vBHispano)

  • Autor Autor Angel Srto
  • Data de início Data de início
Este tópico foi traduzido automaticamente do espanhol. Ver original
A

Angel Srto

Gamma
Programador
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Esta é uma simples modificação de CSS que altera a apresentação dos avisos no fórum, por um em formato de fita.

O que é preciso fazer para que apareça tal como no vBHispano é colocar o seguinte código no template additional.css:

HTML:
.notices LI {
	-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	border-top: 1px solid #FFE260;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	margin: 0 -27px 6px;
	position: relative;

}
.notices LI::before
{
	content: " ";
	background: url({vb:stylevar imgdir_misc}/ribbon-right.png);
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: -10px;
	z-index: -1;
}
.notices LI::after
{
	content: " ";
	background: url({vb:stylevar imgdir_misc}/ribbon-left.png);
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: -10px;
	z-index: -1;
}

Depois é preciso subir as duas imagens no arquivo zip anexado abaixo para a pasta misc do seu estilo.

Deveria funcionar nas versões dos navegadores mais recentes. Não tenho certeza se funciona para IE8, IE7 entre outros.

Pré-visualização:
Ver o anexo 4664
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Caramba, isso sim eu gostei 😀
a verdade eu gosto muito de como isso é visualizado 🙂 agradeço muito a modificação 🙂

abraços 🙂
 
Muito bonito detalhe, alguma possibilidade de fazer isso com os navtabs? 😀
 
Fitas Release.
Agora o Footer :B

---------- Atualizado às 07:39 ---------- Original às 07:29 ----------

Muito bonito detalhe, alguma possibilidade de fazer isso com os navtabs? 😀

Claro, se você sabe CSS, claro que é possível 😀
 
sim... o footer seria bom também 😀
--------------------

haveria a possibilidade de colocar uma fita do estado do usuário -conectado/desconectado- mas colocá-la no postbit_legacy, algo como uma barrinha que diga, "Conectado" "Desconectado"????
algo como nesta imagem:

abraços 🙂
 
sim... o footer seria bom também 😀
--------------------

haveria a possibilidade de colocar uma fita do estado do usuário -conectado/desconectado- mas colocá-la no postbit_legacy, algo como uma barrinha que diga, "Conectado" "Desconectado"????
algo como nesta imagem:

abraços 🙂

Se você me passar a URL desse fórum, eu consigo esse código que eles usam.
:B
 
Fitas Release.
Agora o Footer :B

---------- Atualizado às 07:39 ---------- Original às 07:29 ----------



Claro, se você sabe CSS, claro que é possível 😀

De jeito nenhum, antes consegui modificar os breadcrumbs como xenforo, mas verei se dou uma tentativa mais tarde XD
 
Esta é uma simples modificação de CSS que altera a apresentação dos avisos no fórum, por um em formato de fita.

O que é preciso fazer para que apareça tal como no vBHispano é colocar o seguinte código no template aditional.css:

HTML:
.notices LI {
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    border-top: 1px solid #FFE260;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    margin: 0 -27px 6px;
    position: relative;

}
.notices LI::before
{
    content: " ";
    background: url({vb:stylevar imgdir_misc}/ribbon-right.png);
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: -10px;
    z-index: -1;
}
.notices LI::after
{
    content: " ";
    background: url({vb:stylevar imgdir_misc}/ribbon-left.png);
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: -10px;
    z-index: -1;
}
Depois é preciso subir as duas imagens no arquivo zip anexado abaixo para a pasta misc do seu estilo.

Deveria funcionar nas versões dos navegadores mais recentes. Não tenho certeza se funciona para IE8, IE7 entre outros.

Pré-visualização:
Ver o anexo 4664

Te falta um detalhe:
É o template additional.css não aditional.css ---> Você comeu um d 🙂 Só digo isso porque muitos copiam e buscam no buscador de template e não vai sair dessa forma.

No mais Instalado
 
Obrigado, corrigido 😛
Te falta um detalhe:
É o template additional.css não aditional.css ---> Você comeu um d 🙂 Só digo isso porque muitos copiam e buscam no buscador de template e vai sair dessa forma.

No mais Instalado
 
Fica muito bem, obrigado pela dica
 
vejo que é para a versão 4, minha versão é a 3.8.5, também funcionará?
 
Ei, é genial... estes dias estive na dúvida se abria um tópico para perguntar e olha só! obrigado 😀

---------- Atualizado às 13:20 ---------- Original às 13:15 ----------

No Firefox funciona, no IE 8 não, mas também não é que fique horrível... além disso, no IE nunca funciona nada 😛
 
Ei, é genial... estes dias estive na dúvida se abria um tópico para perguntar e olha só! obrigado 😀

---------- Atualizado às 13:20 ---------- Original às 13:15 ----------

No Firefox funciona, no IE 8 não, mas também não é que fique horrível... além disso, no IE nunca funciona nada 😛

Por isso existem os <!--[if lt IE ]> para os CSS.
Internet Explorer vem com uma configuração diferente, assim como o google chrome.
Muitos desenvolvedores fazem seus sites diretamente para Firefox.
Mas é uma pena que o Firefox 4, está me consumindo muita RAM :S ( firefox.exe -> 656 MB)
Consome demais, mas é o melhor 😀
 
não avisaram se podia para 3.8.x...
no aguardo, pelo menos tenho a informação de que o angel tem instalado por aí o 3.8.x
jejejeje
 
Mas você poderia tentar colocando o CSS na parte de CSS Adicional, editando seu estilo. Depois suba as imagens e se funcionar então você vai notar, se não, então não funciona 😉
 
Obrigado, muito bem, excelente, só uma perguntinha, como mudo essa cor amarela que parece muito fatal
 
Olá, sou novo no vBulletin e não consegui localizar o arquivo additional.css

Obrigado,
- Friend
 
Obrigado, muito bom, excelente. Só uma perguntinha: como eu mudo essa cor amarela que parece muito fatal?
Na mesma template onde o código é adicionado, procure por isto
.vbipostbit {
margin-top: 2px;
margin-button: 2px;
padding: 4px;
background-color: #BBC3CD;
border: 1px solid #BBC3CD;
e mude a cor do que está em vermelho pela cor que você quiser e pronto

---------- Atualizado às 04:53 ---------- Original às 04:43 ----------

Olá, sou novo no vBulletin e não consegui localizar o arquivo additional.css

Obrigado,
- Friend
entre no painel de controle, vá em estilos e templates, depois gerenciar estilos, procure seu estilo e editar templates, em templates CSS está lá embaixo disso additional.css, dê dois cliques e ele mostrará o editor com o código, depois disso siga os passos descritos e pronto
 
não funciona para 3.8.4 🙁
 
Voltar
Topo