Caixas de mensagens em CSS para o seu blog Wordpress

As caixas de mensagens são cada vez mais usadas na blogosfera internacional e hoje em dia a maioria dos blogs com design atractivos usa as caixas de mensagens em CSS para embelezar esteticamente o site tal como para chamar a atenção do utilizador para uma determinada alínea.

No artigo abaixo irei partilhar alguns estilos CSS para as suas caixas de mensagens e ensiná-lo a implementá-las no seu blog.

Faça o download do código fonte (HTML + CSS) das caixas de mensagem abaixo ilustradas por aqui.

Caixa de mensagens simples

O código HTML é bastante simples:

<div class="clean-gray">Clean message box</div>

..uma DIV class com algum texto.

O CSS será qualquer coisa do género:

 .clean-gray{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
} 

Continue a ler »

Alinhamento de imagens no Wordpress 2.6

Se por acaso já fez o upgrade para o Wordpress 2.6 então certamente já reparou na forma (diferente!) que o Wordpress usa para alinhar as imagens nos posts. Depois de em vários artigos diferentes ter falhado a inserção de imagens tal como pretendia deicidi “dar uma voltinha” pela web à procura de uma solução, e lá encontrei uma forma de soluccionar o meu problema de alinhamento de imagens em posts.

Os problemas que tive com este novo sistema foram quando recorri aos class=”alignleft”, class=”alignright” ou class=”aligncentered”, pois até me alinhava as imagens correctamente mas o texto não ficava alinhado de maneira correcta em relação à imagem.

A solução para este problema, se é que assim o podemos chamar,  é simplesmente adicionando o seguinte código no ficheiro stylesheet.css do seu template.

img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter {
text-align:center;
margin:0 auto;
}

Com este código adicionado no seu stylesheet.css não deverá ter mais problemas com o alinhamento de imagens, como podem ver testei logo neste post o novo código.
Recurso: wprocks.com

Como destacar os comentários de autores no Wordpress

Andei esta semana à procura duma solução para poder destacar os meus comentários aqui no blog dos comentários dos restantes comentadores.

Encontrei então uns artigos interessantes que ajudam na adição e edição de código por forma a destacar os comentários do autor do blog, autor esse que é definido no código disponibilizado por norma da sua identificação de utilizador do Wordpress (ID).

Começe então por adicionar o código abaixo indicado no seu Style.css do Wordpress. Irá inserir o estilo “authcomment” algures no Style.css.
Eu coloquei o código no final dos estilos definidos para os comentários que já constavam no meu Style.css.

.comment-autor {
background-color: #B3FFCC !important;
}

Agora abra o ficheiro comments.php do seu Wordpress e identifique a seguinte linha de código.

<li class=”<?php echo $oddcomment; ?>

..e altere-o para o seguinte:

<li class=”<?php
/* Este pedaço de código define o autor como o user_id 1 (admin), se o quiser alterar para outro utilizador, identifique o ID em causa e modifique no código abaixo */
if (1 == $comment->user_id)
$oddcomment = “comment-autor”;
echo $oddcomment;
?>

E já está, a partir de agora os seus comentários estarão na cor indicada no estilo anteriormente adicionado ao ficheiro style.css, seja livre de editar o código à sua maneira.

Recurso:
Admin comments: Different CSS