Usando o CSS3Pie com o WordPress

No último post falei sobre o CSS3Pie e como ele ajuda na formatação do CSS3 no IE, neste post vou dar uma dica rápida de como usar ele com o WordPress, pois se você usar ele com o caminho desta maneira: behavior: url(PIE/PIE.htc);, não irá funcionar com o WordPress. Então partindo do principio que você tem uma pasta chamada js dentro da pasta do seu tema e que os arquivos do CSS3Pie estão dentro desta pasta js, use o seguinte caminho: behavior: url(wp-content/themes/<nome_do_seu_tema>/js/PIE.htc);, assim o WordPress consegue identificar o arquivo corretamente.

[UPDATE]

Depois de alguns testes percebi que esse metodo citado acima só funciona com a pagina inicial do site, estão descobri outra de usar o CSS3Pie e que funcionará em todas as páginas, no seu arquivo funtions.php adicione a seguinte função:

1
2
3
4
5
6
7
8
9
10
<code>function my_render_ie_pie() {
echo "<!--[if lte IE 8]>
<style type=\"text/css\" media=\"screen\">
.class1, .class2, #id1, #id2, div{
behavior: url(".trailingslashit(get_bloginfo('template_url'))."htc/PIE.php);
}
</style>
<![endif]-->";
}
add_action('wp_head', 'my_render_ie_pie', 8);</code>
<code>function my_render_ie_pie() {
echo "<!--[if lte IE 8]>
<style type=\"text/css\" media=\"screen\">
.class1, .class2, #id1, #id2, div{
behavior: url(".trailingslashit(get_bloginfo('template_url'))."htc/PIE.php);
}
</style>
<![endif]-->";
}
add_action('wp_head', 'my_render_ie_pie', 8);</code>

Onde .class1, .class2, #id1, #id2, div são os seletores e tags que você deseja usar o CSS3Pie. Atente-se que o arquivo usado dessa vez é o PIE.php e não o PIE.htc, então caso não tenha na pasta precisará colocá-lo.

Qualquer duvida, use os comentários.

CSS3Pie – CSS3 no IE

Já mostrei aqui no blog como usar border-radius no IE e agora mostro uma ferramenta mais completa para ultilizar os tais recursos do CSS3 no IE, este é o CSS3Pie que permite que o IE reconheça as seguintes propriedades:

  • border-radius
  • box-shadow
  • linear-gradient as background image

Exemplo de uso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.minhaclasse{
<strong><span style="color: #339966;">/*declarando as bordas arredondadas*/</span></strong>
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;<span style="color: #339966;">
<strong>/*declarando as sombra de caixas*/</strong></span>
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
<span style="color: #339966;"><strong>/*declarando gradiente*/
</strong></span>background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
<span style="color: #339966;"><strong>/*declarando o arquivo PIE.htc para corrigir o IE*/</strong></span>
behavior: url(/PIE.htc);
.minhaclasse{
<strong><span style="color: #339966;">/*declarando as bordas arredondadas*/</span></strong>
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;<span style="color: #339966;">
<strong>/*declarando as sombra de caixas*/</strong></span>
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
<span style="color: #339966;"><strong>/*declarando gradiente*/
</strong></span>background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
<span style="color: #339966;"><strong>/*declarando o arquivo PIE.htc para corrigir o IE*/</strong></span>
behavior: url(/PIE.htc);

Perceba que não há “magica” alguma para declarar o border-radius e o box-shadow, basta usa-lá normalmente, pois o behavior: url(/PIE.htc) se encarrega de fazer isso funcionar no IE. Já no background: linear-gradient tem a necessidade de incluir o -pie-background:, porém sua sintaxe de declaração é super simples assim como da propriedade “normal” ( background: linear-gradiente(<cor do topo>, <cor de baixo>)).

Há também o suporte a mais duas propriedades que são o border-image e multiple background images, mas não vou entrar em detalhes, pois o suporte ainda é parcial.

Na pasta de download vem outros arquivos além do PIE.htc, só é nescessário declarar o próprio, porém mantenha os outros arquivos na mesma pasta.

Para baixar e ver uma demostração o CSS3Pie veja o site da ferramenta.

Nivo Slider For WordPress 0.3.1

No fim da semana passada liberei a versão 0.3 do plugin Nivo Slider For WordPress, onde corrigi pequenos bugs e incluir as novas versões dos plugin Jquery NivoSlider e JPicker, com a atulização do Plugin Jquery NivoSlider veio novos efeitos de transição que já foram adicionados. Porém estava com um problema importante, quando se atualizava o plugin as imagens eram apagadas, esse problema estava ocorrendo porque o WordPress apaga os arquivos das versões anteriores e coloca os arquivos da nova versão no lugar, assim a pasta files era apagada também, esse erro acontece também no plugin que usei de base o S3Slider.

Mas então como foi resolvido isso?

Liberei então a versão 0.3.1 onde esta corrigido esse problema, quando o plugin é ativado, é criada uma pasta chamada nivoslider4wp_files dentro de wp-content e a partir dessa versão as imagens upadas ficarão nessa pasta, assim as imagens não serão apagadas quando houver alguma outra atualização. Se você for atualizar, faça backup dos arquivos da pasta files, atualize o plugin e coloque esse arquivos dentro da pasta nivoslider4wp_files, assim não haverá nescessidade cadastrar as imagens denovo.

UPDATE: Segue abaixo o video com a explicação do bug.

Peço desculpa por esse erro, o importante é que agora foi corrigido, faz parte! ;D

Clique aqui para fazer o download da versão do Nivo Slider For WordPress 0.3.1

 

[Video-Tutorial] WordPress – Conhecendo e usando o plugin Custom Fields Templates – Parte1

Nesta 1ª parte mostrarei as opções do plugin e como construir/utilizar campos de textos e textarea em campos personalizados, além de mostrar como resgatar os valores digitados para o seu tema.

Conhecendo e usando o plugin Custom Fields Templates – video1

Conhecendo e usando o plugin Custom Fields Templates – video2

Arquivos utilizados:
arquivos - Video-Turoial Plugin Custom fields templates - parte1 (39)

Plugin ultilizado:
http://wordpress.org/extend/plugins/custom-field-template/

[Video-Tutorial] WordPress – Adicionando novas opções no plugin Adminimize

Olá pessoal, depois de uns contratempos o blog voltou ao ar e com uma novidade, agora terá também videos-tutorias, decidir fazer, pois(por incrivel que pareça) me ocupa menos tempo do que escrever um post.

Antes que os Trolls entrem em ação vou dizer que é a primeira vez que gravo e que uso o editor/gravador de video, então tenham piedade da minha pobre alma, caso ocorra alguma bizarrice! ;)

Duvidas, criticas e sugestões, favor usar os comentários. Divirtam-se!