FREEDOM DESIGN

Liberdade de edição


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 12:47 am

Membro

Freedom Design
Legenda personalizada

Você irá aprender neste tutorial, a como adicionar uma legenda personalizada em seu fórum, deixando-a mais elegante e diferente da legenda padrão da Forumeiros.

1º) Código a ser utilizado
O código que utilizaremos no decorrer de nosso tutorial, será o seguinte:
Código:
  #i_whosonline + p br + br + em {
  width: 70%;
  background: white url(http://i41.servimg.com/u/f41/17/41/76/40/grey-u10.png) repeat-x scroll left bottom;
  border: 2px solid #DDD;
  border-radius: 6px;
  text-align: justify;
  padding: 10px 8px 5px 5px;
  display: block;
  margin: 0 auto;
  font-size: 0px;
  color: transparent;
}

#i_whosonline + p br + br + em a {
  -webkit-transition-duration: .3s;
  text-shadow: 0px 1px 1px #454545;
  font-size: 15px;
  margin: 0 5px;
  font-style: normal;
  font-weight: normal;
}

#i_whosonline + p br + br + em a:hover {
  background: #DDD;
  padding: 9px 10px 10px;

 
 
#i_whosonline + p br + br + em {
text-align: center !important;
width: 61% !important;
}

2º) Aplicando o código
Para que o código acima funcione corretamente em seu fórum, faça o seguinte procedimento:
Painel de controle >> Visualização >> Imagens e cores >> Cores >> Folha de estilo CSS


3º) Resultado


PERGUNTAS E RESPOSTAS DO TUTORIAL

  • Em quais versões o código acima funciona?
    Somente funciona na versão PHPBB3.



Atenção: Este tutorial faz parte do acervo de tutoriais do Freedom Design, sua cópia só é permitida com autorização dos administradores do fórum



Última edição por Gaah em Sab Jan 26, 2013 5:23 pm, editado 2 vez(es)

Ver perfil do usuário

2 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 12:48 am

Membro

qual o resultado ???

Ver perfil do usuário

3 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 12:49 am

Membro

Olá,

Poderia ter postado o resultado

Até



"Aquele que trabalha duro pode superar um gênio,mas,de nada adianta trabalhar duro se você não confia em você mesmo"
Ver perfil do usuário

4 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 12:55 am

Membro

Olá,

Resultado adicionado!

Melhores cumprimentos!

Ver perfil do usuário

5 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 1:01 am

Membro

Não foi feito por você deveria por os creditos.
Até mais.

Ver perfil do usuário

6 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 1:03 am

Membro

-Naruto escreveu:Não foi feito por você deveria por os creditos.
Até mais.

Olá,

Não se sabe o criador do código.

Melhores cumprimentos!

Ver perfil do usuário

7 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 1:03 am

Designer

Aah, que pena que não funciona pra versão do meu fórum. :/

De qualquer forma, ótimo tutorial!



Ver perfil do usuário

8 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 1:06 am

Membro

Olá,

Ricardo qual a versão de seu fórum talvez a gente consegue personalizar para a sua versão

Até



"Aquele que trabalha duro pode superar um gênio,mas,de nada adianta trabalhar duro se você não confia em você mesmo"
Ver perfil do usuário

9 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 1:09 am

Membro

Olá, Ponha Anonimo.

Ver perfil do usuário

10 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 1:10 am

Designer

Quakeline, a versão do meu fórum é: Invision.
E agradeço se conseguir! Talvez eu aplique no meu fórum!



Ver perfil do usuário

11 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 5:18 pm

Administrador

Adeque a nova estrutura de tutoriais:
http://frdesign.probb.org/t133-estrutura-de-tutoriais

Naruto, deixe as revisões dos tutoriais com os membros responsáveis.

Na indicação de uma parte do painel de controle utilize:
Código:
<div id="va_para"></div>

Após terminar me envie uma MP.

Ver perfil do usuário

12 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 5:40 pm

Membro

Olá,

Tutorial modificado!

Melhores cumprimentos!

Ver perfil do usuário

13 Re: [TUTORIAL] Legenda personalizada em Sab Jan 26, 2013 5:49 pm

Administrador

Poste seu tutorial novamente nesta seção com o seguinte conteúdo:
Código:
[center][table style="margin:;"][tr][td style="width: 25px;"] [img]http://i.imgur.com/RzqynRL.png[/img]  [/td][td style] [color=black][size=24]Freedom Design[/size][/color]
[color=#039BE3][b][size=18]Legenda personalizada[/size][/b][/color][/td][/tr][/table]

A legenda dos fóruns Forumeiros padrão não é muito lá personalizada, porém, agora é possível deixa-la muito mais elegante e atraente.[/center]

[b][color=#039be3][size=14]1º) Apresentando o código[/size][/color][/b]
O código que utilizaremos no decorrer de nosso tutorial, será o seguinte:
[code]  #i_whosonline + p br + br + em {
  width: 70%;
  background: white url(http://i41.servimg.com/u/f41/17/41/76/40/grey-u10.png) repeat-x scroll left bottom;
  border: 2px solid #DDD;
  border-radius: 6px;
  text-align: justify;
  padding: 10px 8px 5px 5px;
  display: block;
  margin: 0 auto;
  font-size: 0px;
  color: transparent;
}

#i_whosonline + p br + br + em a {
  -webkit-transition-duration: .3s;
  text-shadow: 0px 1px 1px #454545;
  font-size: 15px;
  margin: 0 5px;
  font-style: normal;
  font-weight: normal;
}

#i_whosonline + p br + br + em a:hover {
  background: #DDD;
  padding: 9px 10px 10px;

 
 
#i_whosonline + p br + br + em {
text-align: center !important;
width: 61% !important;
}[/code]

[b][color=#039be3][size=14]2º) Adicionando o código[/size][/color][/b]
Para adicionar o código terá de ir para:
<div id="va_para">[i]Painel de controle >> Visualização >> Imagens e cores >> Cores >> Folha de estilo CSS[/i]</div>

[b][color=#039be3][size=14]3º) Resultado[/size][/color][/b]
[center][img]http://i11.servimg.com/u/f11/17/04/77/61/cats11.jpg[/img]
[/center]
[hr][size=14][color=#CCCCCC][b]Atenção:[/b] Este tutorial faz parte do acervo de tutoriais do Freedom Design, sua cópia só é permitida com autorização dos administradores do fórum. O[b] autor do código não foi encontrado[/b].[/color][/size]

Após postar o novo este será movido para os arquivos, e o outro movido a seção principal. Obrigado!

Ver perfil do usuário


Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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