Topo

16 Jul

Uma dica para quem usa Wp 2.6

Postado por kaiserlino em: Todos, Wordpress.

Achei interessante agora ao fazer um post que sairá logo cedo, que ao colocar a Alt nas imagens ele já cria um "caption" ou legenda como preferirem. Porém ao ir ver no post como ficaria, não parecia uma legenda e sim um texto logo abaixo.

Graças a excelente extensão do Firefox (Web Developer) e ao tema original que vem com o novo Wp, vi que eram apenas algumas características que deveria adicionar no Css.

Antes tive que corrigir também o Css referente ao alinhamento das imagens, segue:

PLAIN TEXT
CSS:
  1. .aligncenter,
  2. div.aligncenter {
  3. display: block;
  4. margin-left: auto;
  5. margin-right: auto;
  6. }
  7.  
  8. .alignleft {
  9. float: left;
  10. }
  11.  
  12. .alignright {
  13. float: right;
  14. }

AS Legendas:

Apesar de ambas serem bastante similares, vale lembrar que a opção 1 além de mais correta, é a que possibilita maior controle, podendo editar diversas opções como links, imagens, etc.

Opção 1 (usada aqui no Dk):

PLAIN TEXT
CSS:
  1. .wp-caption {
  2. margin: 0;
  3. text-align: center;
  4. }
  5. .wp-caption img, .wp-caption a, .wp-caption a img {
  6. padding: 0;
  7. margin: 0;
  8. }
  9. .wp-caption-text {
  10. font-size: 80%;
  11. line-height: 95%;
  12. border: 1px solid #ddd;
  13. border-top-width: 0;
  14. background-color: #e5fbde;
  15. padding: 3px 0;
  16. margin: 0 5px;
  17. width: 568px;
  18. }
  19. .wp-caption-text:before {
  20. content: "Legenda: ";
  21. }

Opção 2 (mais simples):

PLAIN TEXT
CSS:
  1. .wp-caption{
  2. border: 1px #eaeaea solid;
  3. background-color:#e5fbde;
  4. margin-bottom: 2px;}
  5.  
  6. .wp-caption-text{
  7. text-align:center;
  8. font-size:0.9em;}

Caso vá encontrando maiores novidades irei sempre postar aqui.

Autor: kaiserlino

Administrador do Dk Design, estudante de design e trabalhando com SEO. Criei este blog com o intuito de ser uma fonte de referências e inspiração para todos iniciando na área. Mais

Assine agora nossos feeds RSS e acompanhe o blog com toda a praticidade.
Dk Design Rss Feeds

Leia mais:

1 Comentário no post.

  1. Newsletter #1 | Dkcell Design's Gravatar

    Postado porNewsletter #1 | Dkcell Design em 16.07.08 às 1:37 am

    [...] Adicionar legendas nas imagens com o novo Wp 2.6 - Como alguns temas não possuiam a propriedade, demonstramos como adicionar a mesma ao Css de seu template. [...]

Deixe sua marca