Extensões Joomla seu portal de extensões para CMS Joomla! em português

  • Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase font size
  • Default font size
  • Decrease font size

O que é Joomla?

logo joomla Joomla é um dos melhores CMS "open source" da atualidade. Com Joomla é possível criar website profissionais com tempo e custo reduzido.

O que é um Módulo?

Global Os módulos são extensões leves e flexíveis utilizadas para a renderização de páginas. Às vezes, os módulos estão ligados a componentes,Leia +

O que é um Componente?

GlobalComponente é um aplicativo que será instalado no Joomla e possibilitará novas funcionalidades.Leia +

O que é um template?

Template Template é o "layout" gráfico do website. Ou seja, a parte gráfica que você visualiza ao entrar em um website que utiliza CMS Joomla. Leia +

Tipografia

Administrador
E-mail Imprimir PDF

A tipografia (do grego typos — "forma" — e graphein — "escrita") é a arte e o processo de criação na composição de um texto, física ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa. Por analogia, tipografia também passou a ser um modo de se referir à gráfica que usa uma prensa de tipos móveis.

Esta página apresenta os aspectos tipográficos utilizados neste website.

Esta é a tag de cabeçalho H1

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

Esta é a tag de cabeçalho H2

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst.

Esta é a tag de cabeçalho H3

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

Esta é a tag de cabeçalho H4

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

Conteúdo especial

Abaixo está um exemplo de <pre> ou <div class="code">

#ja-rightcol {
  width: 180px;
  float: right;
  color: #EEEEEE;
}

Esta é uma frase em destaque. Use <span class="highlight">Sua frase destaque vai aqui!</span>.

Este é o estilo capitular. A primeira letra do texto é apresentada em caixa alta. O template JA Purity II utilizado neste website utiliza uma nova técnica utilizando CSS2  e inclui na primeira linha a pseudo classe.

Este é um exemplo com Blockquote. Use <blockquote>suas aspas devem estar aqui!</blockquote>para perfeita visualização!
Este é um exemplo simples com Blockquote. Use <blockquote><span class="open">Y</span>ou neste espaço<span class="close">e!</span></blockquote> para perfeita visualização!

Estilo para listas

  1. Este é um simples exemplo de Lista ordenada. (ol)
  2. Lorem ipsum dolor sit amet consectetuer.
  3. Condimentum quis.
  4. Congue Quisque augue elit dolor nibh.
  • Este é um exemplo de Lista não ordenada. (ul)
  • Condimentum quis.
  • Lorem ipsum dolor sit amet consectetuer.
  • Congue Quisque augue elit dolor nibh.
  • Este é um exemplo de Lista com seta.
  • Use <ul class="arrow"><li><span class="icon">&nbsp;</span>o conteúdo da lista vai aqui</li></ul>
  • Este é um exemplo de Checklist.
  • Este é um exemplo de Lista com estrela.
  • Use <ul class="star"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul>
  • Este é um exemplo de lista com estrela.
  • Este é um exemplo de Checklist.
  • Use <ul class="checklist"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul>
  • Este é um exemplo de Checklist.
  • Este é um exemplo de Lista de email.
  • Use <ul class="phone"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul>
  • Este é um exemplo de lista de email.
  • Este é um exemplo de  Lista com telefone.
  • Use <ul class="address"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul>
  • Este é um exemplo de lista de telefone.

01Este é um exemplo de bloco de número. Use <p class="blocknumber-1"><span class="bignumber">01.</span>seu conteúdo aqui!</p> para formatar o bloco de número!

02Este é um exemplo de bloco de número. Use <p class="blocknumber-1"><span class="bignumber">02.</span>seu conteúdo aqui!</p> para formatar o bloco de número!

03Este é um exemplo de bloco de número. Use <p class="blocknumber-1"><span class="bignumber">03.</span>seu conteúdo aqui!</p> para formatar o bloco de número!

01Este é um exemplo de bloco de número. Use <p class="blocknumber-2"><span class="bignumber">01.</span>o seu conteúdo aqui!</p> para formatar o bloco de número!

02Este é um exemplo de bloco de número. Use <p class="blocknumber-2"><span class="bignumber">02.</span>o seu conteúdo aqui!</p> para formatar o bloco de número!

03Este é um exemplo de bloco de número. Use <p class="blocknumber-2"><span class="bignumber">03.</span>o seu conteúdo aqui!</p> para formatar o bloco de número!

01Este é um exemplo de bloco de número. Use <p class="blocknumber-3"><span class="bignumber">01.</span>o seu conteúdo aqui!</p> para formatar o bloco de número!

02Este é um exemplo de bloco de número. Use <p class="blocknumber-3"><span class="bignumber">02.</span>o seu conteúdo aqui!</p> para formatar o bloco de número!

03Este é um exemplo de bloco de número. Use <p class="blocknumber-3"><span class="bignumber">03.</span>o seu conteúdo aqui!</p> para formatar o bloco de número!

Estilos de Parágrafos

Use <p class="error"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Use <p class="message"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Use <p class="tips"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Use <p class="key"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Use <p class="tag"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Use <p class="cart"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Use <p class="doc"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Use <p class="note"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Use <p class="photo"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this

Use <p class="mobi"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.

Bubbles

<div class="bubble bubble-l1 clearfix">
<div class="box-ct">
<div class="box tl">&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box br">&nbsp;</div>
Buble's content goes here!
</div>
<span class="arrow">&nbsp;</span> <span class="author">Put author name here</span>
</div>
Put author name here
<div class="bubble bubble-l2 clearfix">
<div class="box-ct">
Bubble's content goese here!
</div>
<span class="arrow">&nbsp;</span>
<span class="author">Put author name here</span>
</div>
Put author name here
<div class="bubble bubble-d1 clearfix">
<div class="box-ct">
<div class="box tl">&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box br">&nbsp;</div>
Buble's content goes here!
</div>
<span class="arrow">&nbsp;</span> <span class="author">Put author name here</span>
</div>
Put author name here
<div class="bubble bubble-d2 clearfix">
<div class="box-ct">
Bubble's content goese here!
</div>
<span class="arrow">&nbsp;</span>
<span class="author">Put author name here</span>
</div>
Put author name here
<div class="bubble bubble-hl1 clearfix">
<div class="box-ct">
<div class="box tl">&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box br">&nbsp;</div>
Buble's content goes here!
</div>
<span class="arrow">&nbsp;</span> <span class="author">Put author name here</span>
</div>
Put author name here
<div class="bubble bubble-hl2 clearfix">
<div class="box-ct">
Bubble's content goese here!
</div>
<span class="arrow">&nbsp;</span>
<span class="author">Put author name here</span>
</div>
Put author name here

Estilos para caixas e legendas

This is a sticky. Use <p class="box-sticky">Your clip note goes here!</p> to create a clip note!

This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!

This is a grey box. Use <p class="box-grey">Your content goes here!</p> to create a grey box!

This is a hilite box. Use <p class="box-hilite">Your content goes here!</p> to create a hilite box!

Estilo para legenda

Use <div class="legend"><h3 class="legend-title">Your title</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>

Estilo para legenda "highlight"

Use <div class="legend-hilite"><h3 class="legend-title">Your title</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>

Estilos especiais para módulos

Use module suffix: _badge badge-top to put this badge on any module you like!
Use module suffix: _badge badge-new to put this badge on any module you like!
Use module suffix: _badge badge-pick to put this badge on any module you like!
Use module suffix: _badge badge-hot to put this badge on any module you like!
You are here: Tipografia