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 em Sex Jan 25, 2013 9:14 pm

Membro

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 Módulos Portal & Widgets Gestão dos widgets do fórum

Depois você irá clicar em " 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 Visualização Imagens e Cores Cores 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



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)



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



Ver perfil do usuário http://frdesign.probb.org

3 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é



"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] 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



Ver perfil do usuário http://frdesign.probb.org

5 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.probb.org/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 Re: [TUTORIAL] Mensagem rolante no logo em Sab Jan 26, 2013 5:52 pm

Membro

Olá,

Tutorial Atualizado

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

7 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