1 [TUTORIAL] Mensagem rolante no logo Sáb Jan 26, 2013 6:03 pm
Membro
Quakeline
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>
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" ().
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.
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
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.