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 para baixo  Mensagem [Página 1 de 1]

1[TUTORIAL] Mensagem rolante no logo  Empty [TUTORIAL] Mensagem rolante no logo Sáb Jan 26, 2013 6:03 pm

Membro

Quakeline
Quakeline
[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) Modificando o código:

Código:
<div class="frase"><p style="margin-top: 10px;"><b><marquee>Mensagem que deseja</marquee></b></p></div>
Vermelho: Modifique para a mensagem que deseja.

2) Criando o widget que sustentará o código
Painel de Controle >> Módulos >> Portal & Widgets >> Gestão dos widgets do fórum


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

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) Inserindo o código CSS
Vá para o local indicado e adicione o código na última linha de sua Folha CSS.
Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS


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

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.

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

Permissões neste sub-fórum
Não podes responder a tópicos