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] Mensagem rolante no logo  Empty [TUTORIAL] Mensagem rolante no logo em Sex Jan 25, 2013 9:14 pm

Membro

[TUTORIAL] Mensagem rolante no logo  RzqynRL Freedom Design
Mensagem rolante no logo

Neste tutorial você esta aprendendo a adicionar uma mensagem rolante ao lado da logo ou em outro lugar que desejar.

1) Código utilizado:

Código:
<div class="frase"><p style="margin-top: 10px;"><b><marquee>Mensagem que vai desejar que apareça</marquee></b></p></div>

2) Criando o widget personalizado


Painel de Controle [TUTORIAL] Mensagem rolante no logo  Puce_fleche Módulos [TUTORIAL] Mensagem rolante no logo  Puce_fleche Portal & Widgets [TUTORIAL] Mensagem rolante no logo  Puce_fleche Gestão dos widgets do fórum

Depois você irá clicar em "[TUTORIAL] Mensagem rolante no logo  Editer Criar um widget personalizado "

Nome do widget - Terá de colocar um título para o widget, de forma a poder identifica-lo na lista dos widgets pessoais do Painel de Controle.

Utilizar um table type - Caso opte pale opção "Sim" o widget terá a moldura padrão dos restantes widgets, caso opte por "Não" o conteúdo não estará rodeado por qualquer moldura.

Título do widget - Neste campo, terá de atribuir um título, o que será visualizado no seu fórum. Caso tenha marcado a opção "Não" na opção anterior, colocar ou não um título será indiferente.

Fonte do widget - Neste campo teremos de inserir o código que trabalhamos no item anterior

Salvar - Por fim, após colocar o conteúdo, terá de "Salvar" o seu widget personalizado.

3) Adiciona o código CSS


Painel de Controle [TUTORIAL] Mensagem rolante no logo  Puce_fleche Visualização [TUTORIAL] Mensagem rolante no logo  Puce_fleche Imagens e Cores [TUTORIAL] Mensagem rolante no logo  Puce_fleche Cores [TUTORIAL] Mensagem rolante no logo  Puce_fleche Folha de estilo CSS

Você irá ate a ultima linha da sua Folha de estilo CSS, então irá adicionar o código abaixo e depois clicar em " Salvar ".

Código:
.frase {
top: 40px;
position: absolute;
background-color: #DADADA;
border-bottom: 1px solid #A3A3A3;
border-right: 1px solid #A3A3A3;
border-top: 1px solid #A3A3A3;
color: black!important;
left: 4%;
margin-left: 9px;
width: 250px;
height: 35px;
border-radius: 0px 5px 5px 0px;
opacity: 0.5;
text-align: center;
}
.frase {
color: black!important;
text-align: center;
}

4) Resultado

[TUTORIAL] Mensagem rolante no logo  Gn8VSgO

PERGUNTAS E RESPOSTAS DO TUTORIAL

  • Funciona em quais versões ?
    Funciona em todas versões por ser só a criação de um widget .


  • Créditos
    Firenando - Pelos códigos
    Quakeline - Pelo tutorial.



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. O criador do código é Firenando, obrigado por sua colaboração.



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



[TUTORIAL] Mensagem rolante no logo  CubfqnF
"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

2[TUTORIAL] Mensagem rolante no logo  Empty Re: [TUTORIAL] Mensagem rolante no logo em Sex Jan 25, 2013 9:23 pm

Administrador

O título diz no logo mas o código é nos widgets, está certo isso?




Here comes the sun, here comes the sun,
And I say it's all right

Little darling, it's been a long cold lonely winter
Little darling, it feels like years since it's been here
Here comes the sun, here comes the sun
And I say it's all right


[TUTORIAL] Mensagem rolante no logo  Imagem1

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

3[TUTORIAL] Mensagem rolante no logo  Empty Re: [TUTORIAL] Mensagem rolante no logo em Sex Jan 25, 2013 9:24 pm

Membro

Olá,

Para isso serve o código da Folha de estilo CSS, o código CSS irá fazer com que ele vá parar ao lado da logo

Até



[TUTORIAL] Mensagem rolante no logo  CubfqnF
"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[TUTORIAL] Mensagem rolante no logo  Empty Re: [TUTORIAL] Mensagem rolante no logo em Sex Jan 25, 2013 9:25 pm

Administrador

Ah, certo.




Here comes the sun, here comes the sun,
And I say it's all right

Little darling, it's been a long cold lonely winter
Little darling, it feels like years since it's been here
Here comes the sun, here comes the sun
And I say it's all right


[TUTORIAL] Mensagem rolante no logo  Imagem1

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

5[TUTORIAL] Mensagem rolante no logo  Empty Re: [TUTORIAL] Mensagem rolante no logo em Sab Jan 26, 2013 5:43 pm

Administrador

Papai chegou.

Adeque o tuto para a nova estrutura: http://frdesign.forumeiros.com/t133-estrutura-de-tutoriais

-Coloque o número em vez do Nº (Nº tá errado, 1) tá certo);
-Para colocar o crédito do criador:
Código:
[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. [b]O criador do código é Firenando, obrigado por sua colaboração.[/b][/color][/size]
-Para indicar use o código abaixo:
Código:
<div id="va_para"></div>

Ver perfil do usuário

6[TUTORIAL] Mensagem rolante no logo  Empty Re: [TUTORIAL] Mensagem rolante no logo em Sab Jan 26, 2013 5:52 pm

Membro

Olá,

Tutorial Atualizado

Até



[TUTORIAL] Mensagem rolante no logo  CubfqnF
"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

7[TUTORIAL] Mensagem rolante no logo  Empty Re: [TUTORIAL] Mensagem rolante no logo em Sab Jan 26, 2013 6:01 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]Mensagem rolante no logo[/size][/b][/color][/td][/tr][/table]

Neste tutorial você esta aprendendo a adicionar uma mensagem rolante ao lado da logo ou em outro lugar que desejar.[/center]

[b][color=#039be3][size=14]1) Modificando o código:[/size][/color][/b]

[code]<div class="frase"><p style="margin-top: 10px;"><b><marquee>Mensagem que deseja</marquee></b></p></div>[/code]
[b][color=red]Vermelho:[/color][/b] Modifique para a mensagem que deseja.

[b][color=#039be3][size=14]2) Criando o widget que sustentará o código[/size][/color][/b]
<div id="va_para">[i]Painel de Controle >>  Módulos >> Portal & Widgets >> Gestão dos widgets do fórum[/i]</div>

Depois você irá clicar em [b]"Criar um widget personalizado"[/b] ([img]http://illiweb.com/fa/admin/icones/editer.png[/img]).

<div id="va_para">[color=black][b]Nome do widget[/b][/color] - [i]Terá de colocar um título para o widget, de forma a poder identifica-lo na lista dos widgets pessoais do Painel de Controle.[/i]

[color=black] [b]Utilizar um table type [/b][/color]- [i]Caso opte pale opção "Sim" o widget terá a moldura padrão dos restantes widgets, caso opte por "Não" o conteúdo não estará rodeado por qualquer moldura.[/i]

[color=black][b]Título do widget[/b][/color] - [i]Neste campo, terá de atribuir um título, o que será visualizado no seu fórum. Caso tenha marcado a opção "Não" na opção anterior, colocar ou não um título será indiferente.[/i]

[color=black][b]Fonte do widget[/b][/color] - [i]Neste campo teremos de inserir o código que trabalhamos no item anterior [/i]

[color=black][b]Salvar [/b][/color]- [i]Por fim, após colocar o conteúdo, terá de "Salvar" o seu widget personalizado.[/i]</div>

[b][color=#039be3][size=14]3) Inserindo o código CSS[/size][/color][/b]
Vá para o local indicado e adicione o código na última linha de sua Folha CSS.
<div id="va_para">[i]Painel de Controle  >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS[/i]</div>

[code].frase {
top: 40px;
position: absolute;
background-color: #DADADA;
border-bottom: 1px solid #A3A3A3;
border-right: 1px solid #A3A3A3;
border-top: 1px solid #A3A3A3;
color: black!important;
left: 4%;
margin-left: 9px;
width: 250px;
height: 35px;
border-radius: 0px 5px 5px 0px;
opacity: 0.5;
text-align: center;
}
.frase {
color: black!important;
text-align: center;
}[/code]

[b][color=#039be3][size=14]4) Resultado[/size][/color][/b]

[center][img]http://i.imgur.com/gn8VSgO.png[/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. [b]O criador do código é Firenando, obrigado por sua colaboração.[/b][/color][/size]

No próximo você fará as modificações finais. 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