Tipografia e Modelo Enviar por E-mail
Escrito por Travel Template   
Domingo, 08 Fevereiro 2009 00:00

Esta página mostra todos os estilos da tipografia e configurações para este modelo de viagens em ação. Se você gostaria de ler mais informações sobre a inserção da tipografia incluídas em seu conteúdo, check it out!

Font Controle

Viagens Turismo modelo permite que você tem a opção de simplesmente mudar a fonte de todo o texto no modelo com o Template Manager definições, localizado no Administrador (selecione o tipo de letra nome para visualizar): --
  $ font_family = "default"; / / Helvetica | genébra | Optima | Helvetica | Trebuchet | lúcida | Geórgia | Palatino 
Este é um ComponentHeading

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Este é um Contentheading

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

Este é um cabeçalho H1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur sed leo pharetra nisl. Nunc vel nisi. Aliquam nulla. Etiam em est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

Este é um cabeçalho H2

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

Este é um H3 Header

Mauris euismod. Em ac massa vitae quam dapibus tincidunt. Ut a tortor nec mi Mattis blandit. Maecenas venenatis lorem a nulla. Phasellus um libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor luctus urna diam, vitae ultrices ante magna non tellus.

Esta é uma H4 Header

Mauris euismod. Em ac massa vitae quam dapibus tincidunt. Ut a tortor nec mi Mattis blandit. Maecenas venenatis lorem a nulla. Phasellus um libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor luctus urna diam, vitae ultrices ante magna non tellus.

Esta é uma H5 Header

Mauris euismod. Em ac massa vitae quam dapibus tincidunt. Ut a tortor nec mi Mattis blandit. Maecenas venenatis lorem a nulla. Phasellus um libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor luctus urna diam, vitae ultrices ante magna non tellus.

Aviso Estilos são mostrados abaixo

Esta é uma amostra da "atenção" estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="attention"> ....</ span> Esta é uma amostra do pré-aviso «estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="notice"> ....</ span> Esta é uma amostra do "alerta" estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="alert"> ....</ span> Esta é uma amostra do 'download' estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="download"> ....</ span> Esta é uma amostra do "aprovado" estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="approved"> ....</ span> Esta é uma amostra da 'mídia' estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="media"> ....</ span> Esta é uma amostra da "nota" estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="note"> ....</ span> Esta é uma amostra do "carrinho" estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="cart"> ....</ span> Esta é uma amostra da "câmara" estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="camera"> ....</ span> Esta é uma amostra do 'doc' estilo. Utilize este estilo a identificar informações muito importantes para seus usuários. Para utilizar este recurso a folllowing html: <span class="doc"> ....</ span>
  Esta é uma amostra <pre> ...</ pre> tag: 

  div.modulebox-negro div.bx1 { 
    background: url (.. / imagens / preto / box_bl.png) 0 100% no-repeat;  
 } 

  div.modulebox-negro div.bx2 { 
    background: url (.. / imagens / preto / box_tr.png) 100% 0 no-repeat; 
 } 

  div.modulebox-negro div.bx3 { 
    background: url (.. / imagens / preto / box_tl.png) 0 0 no-repeat; 
    padding: 0; 
    margin: 0; 
 } 

Blockquote Estilos

Este é um bloco, você vai querer usar a seguinte formatação: <blockquote> ....</ blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.
Este é um bloco, você vai querer usar a seguinte formatação: <blockquote class=" azul "> ... </ blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.
Este é um bloco, você vai querer usar a seguinte formatação: <blockquote class=" vermelho "> ... </ blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.
Este é um bloco, você vai querer usar a seguinte formatação: <blockquote class=" verde "> ... </ blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.
Este é um bloco, você vai querer usar a seguinte formatação: <blockquote class=" roxo "> ... </ blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.
Este é um bloco, você vai querer usar a seguinte formatação: <blockquote class=" laranja "> ... </ blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.
Este é um bloco, você vai querer usar a seguinte formatação: <blockquote class=" marrom "> ... </ blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.
Este é um bloco, você vai querer usar a seguinte formatação: <blockquote class=" cinzento "> ... </ blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Esta é blockquote, você vai querer usar a seguinte formatação: <blockquote class=" aspas "> <p> ...</ p> </ blockquote>. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Lista Estilos - Bullets

Abaixo está uma lista com balas. Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" classe nome "> <li> ....</ li> <li> ....</ li >...</ ul>

  • Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" bullet-1 "> <li> ....</ li> <li> ....</ li >...</ ul >.
  • Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" bullet-2 "> <li> ....</ li> <li> ....</ li >...</ ul >.
  • Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" bullet-3 "> <li> ....</ li> <li> ....</ li >...</ ul >.
  • Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" bullet-4 "> <li> ....</ li> <li> ....</ li >...</ ul >.
  • Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" bullet-5 "> <li> ....</ li> <li> ....</ li >...</ ul >.
  • Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" bullet-6 "> <li> ....</ li> <li> ....</ li >...</ ul >.
  • Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" bullet-7 "> <li> ....</ li> <li> ....</ li >...</ ul >.
  • Para utilizar este estilo criar uma lista no seguinte formato: <ul class=" bullet-8 "> <li> ....</ li> <li> ....</ li >...</ ul >.

Span Estilos - Número

Abaixo está uma lista com o número. Para utilizar este estilo criar uma lista no seguinte formato: <span class="number-[color2]"> 1 [qualquer número] </ span>

1 Para utilizar este estilo criar uma lista no seguinte formato: <p> "> <span class=" número 1 </ span>. ... Alguns conteúdos .... </ P>

2 Para utilizar este estilo criar uma lista no seguinte formato: <p> "> <span class=" número 2 </ span>. ... Alguns conteúdos .... </ P>

3 Para utilizar este estilo criar uma lista no seguinte formato: <p> "> <span class=" número 3 </ span>. ... Alguns conteúdos .... </ P>


1 Para utilizar este estilo criar uma lista no seguinte formato: <p> <span class=" number-red "> 1 </ span>. ... Alguns conteúdos .... </ P>

2 Para utilizar este estilo criar uma lista no seguinte formato: <p> <span class=" number-blue "> 2 </ span>. ... Alguns conteúdos .... </ P>

3 Para utilizar este estilo criar uma lista no seguinte formato: <p> <span class=" number-green "> 3 </ span>. ... Alguns conteúdos .... </ P>


1 Para utilizar este estilo criar uma lista no seguinte formato: <p> <span class=" number-purple "> 1 </ span>. ... Alguns conteúdos .... </ P>

2 Para utilizar este estilo criar uma lista no seguinte formato: <p> <span class=" number-orange "> 2 </ span>. ... Alguns conteúdos .... </ P>

3 Para utilizar este estilo criar uma lista no seguinte formato: <p> <span class=" number-brown "> 3 </ span>. ... Alguns conteúdos .... </ P>

4 Para utilizar este estilo criar uma lista no seguinte formato: <p> <span class=" number-grey "> 3 </ span>. ... Alguns conteúdos .... </ P>

Destaque Estilos

Este é um espaço que permite que você destacar palavras ou fases . Use o seguinte formato: <span class=" destacar "> ...</ span>

Este é um espaço que permite que você destacar palavras ou fases . Use o seguinte formato: <span class=" highlight-red "> ...</ span>

Este é um espaço que permite que você destacar palavras ou fases . Use o seguinte formato: <span class=" highlight-blue "> ...</ span>

Este é um espaço que permite que você destacar palavras ou fases . Use o seguinte formato: <span class=" highlight-green "> ...</ span>

Este é um espaço que permite que você destacar palavras ou fases . Use o seguinte formato: <span class=" highlight-orange "> ...</ span>

Este é um espaço que permite que você destacar palavras ou fases . Use o seguinte formato: <span class=" highlight-bold "> ...</ span>

Inset Estilos

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Você precisará usar o seguinte formato: <span class="inset-left"> algum conteúdo ... ... </ span> Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Você precisará usar o seguinte formato: <span class="inset-left"> algum conteúdo ... ... </ span> Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus.


DropCap Estilos

P Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Você vai precisar de utilizar a seguinte formatação: <p> <span class=" dropcap "> P </ span> </ p>

P Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Você vai precisar de utilizar a seguinte formatação: <p> <span class=" dropcap-red "> P </ span> </ p>

P Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Você vai precisar de utilizar a seguinte formatação: <p> <span class=" dropcap-blue "> P </ span> </ p>

P Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Você vai precisar de utilizar a seguinte formatação: <p> <span class=" dropcap-green "> P </ span> </ p>

P Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Você vai precisar de utilizar a seguinte formatação: <p> <span class=" dropcap-purple "> P </ span> </ p>

P Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Você vai precisar de utilizar a seguinte formatação: <p> <span class=" dropcap-orange "> P </ span> </ p>

P Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Você vai precisar de utilizar a seguinte formatação: <p> <span class=" dropcap-brown "> P </ span> </ p>

P Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum vitae pede nec mi tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Sed nibh euismod magna um.

Você vai precisar de utilizar a seguinte formatação: <p> <span class=" dropcap-grey "> P </ span> </ p>

Importante Ênfase Estilos

Amostra Título Este é um espaço que permite que você coloque todo o conteúdo em um agradável bem formados seção. Você vai precisar de utilizar a seguinte formatação: <div class=" importante "> <span class=" important-title "> Amostra Título </ span> ... algum conteúdo ... </ div>

Amostra Título Este é um espaço que permite que você coloque todo o conteúdo em um agradável bem formados seção. Você vai precisar de utilizar a seguinte formatação: <div class=" azul "> <span class=" important-title-blue "> Amostra Título </ span> ... algum conteúdo ... </ div>

Amostra Título Este é um espaço que permite que você coloque todo o conteúdo em um agradável bem formados seção. Você vai precisar de utilizar a seguinte formatação: <div class=" vermelho "> <span class=" important-title-blue "> Amostra Título </ span> ... algum conteúdo ... </ div>

Amostra Título Este é um espaço que permite que você coloque todo o conteúdo em um agradável bem formados seção. Você vai precisar de utilizar a seguinte formatação: <div class=" verde "> <span class=" important-title-blue "> Amostra Título </ span> ... algum conteúdo ... </ div>

Amostra Título Este é um espaço que permite que você coloque todo o conteúdo em um agradável bem formados seção. Você vai precisar de utilizar a seguinte formatação: <div class=" roxo "> <span class=" important-title-blue "> Amostra Título </ span> ... algum conteúdo ... </ div>

Amostra Título Este é um espaço que permite que você coloque todo o conteúdo em um agradável bem formados seção. Você vai precisar de utilizar a seguinte formatação: <div class=" marrom "> <span class=" important-title-blue "> Amostra Título </ span> ... algum conteúdo ... </ div>

Amostra Título Este é um espaço que permite que você coloque todo o conteúdo em um agradável bem formados seção. Você vai precisar de utilizar a seguinte formatação: <div class=" laranja "> <span class=" important-title-blue "> Amostra Título </ span> ... algum conteúdo ... </ div>

Amostra Título Este é um espaço que permite que você coloque todo o conteúdo em um agradável bem formados seção. Você vai precisar de utilizar a seguinte formatação: <div class=" cinzento "> <span class=" important-title-blue "> Amostra Título </ span> ... algum conteúdo ... </ div>

Actualizado em Segunda, 09 Fevereiro 2009 06:10