Hack CSS para Google Crhome


Postado em 16 de outubro de 2012 por | Categorias: CSS | Sem comentários » | Comentar


Em muitos poucos casos tive que usar um hack para ajustar alinhamento de algumas div´s no Google Chrome. A solução foi usar o código: @media screen and (-webkit-min-device-pixel-ratio:0) { } dentro do meu arquivo de CSS.
Exemplo:

/*HACK PARA GOOGLE CHORME*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.s-inscricao{
background-image: url("images/m-selecionado.png");
background-repeat: no-repeat;
height: 45px;
left: 665px;
width: 66px;
}
.compartilhe {
clear: both;
color: #6C7679;
display: block;
font-size: 10px;
letter-spacing: 1px;
margin: -18px 0 9px 359px;
}
}

Como as duas classes .s-inscricao e .compartilhe já existiam no CSS para outros navegadores, coloquei esse código no final do arquivo CSS para que o Google Crhome interpretar o HACK sem entrar em conflito com as outras classes de mesmo nome.


Criando layout com CSS para formulario do Contact Form no WordPress


Postado em 22 de setembro de 2011 por | Categorias: CSS | Tags: , | Sem comentários » | Comentar


Coloque o código abaixo no campo formulário do plug-in Contact Form do WordPress:

<div class="area_inicio_formulario"></div>
<div class="area_linha"></div>

<div class="area_titulo">Seu nome (obrigatório)</div>
<div class="area_campo"></div>

<div class="area_linha"></div>

<div class="area_titulo">Seu e-mail (obrigatório)</div>
<div class="area_campo">[email* your-email class:campo_nome]</div>

<div class="area_linha"></div>

<div class="area_titulo">Assunto</div>
<div class="area_campo"></div>

<div class="area_linha"></div>

<div class="area_titulo">Sua mensagem</div>
<div class="area_campo_texto">[textarea your-message class:campo_texto] </div>

<div class="area_linha"></div>

<div class="area_titulo"> </div>
<div class="area_campo">[submit class:campo_enviar "Enviar"]</div>

<div class="area_linha"></div>

No arquivo CSS do seu tema cololoque os códigos abaixo:

/*FORMULARIOS*/
.area_inicio_formulario{
    display: inline;
    float: left;
	height: 20px;
	widows: 100%;
	clear: both;
}
.area_titulo{
    display: inline;
    float: left;
    font-size: 12px;
    height: 40px;
    margin-left: 20px;
    margin-right: 10px;
    text-align: right;
    width: 170px;
}
.area_campo{
	float: left;
	display: inline;
	width: 190px;
	height: 40px;	
}
.area_campo_texto{
	float: left;
	display: inline;
	width: 190px;
	height: auto;	
}
.area_linha{
	clear: both;
	width: 100%;
	height:1px;
}
.campo_nome {
    background: none repeat scroll 0 0 #F4F4F4;
    border: 1px solid #E6E6E6;
    font-size: 12px;
    height: 20px;
    padding: 2px 2px 2px 6px;
    width: 250px;
}
.campo_nome:focus {
	border:1px solid #999;
	background:#fff;
}
.campo_texto {
	border: #e6e6e6 1px solid;
	font-size: 12px;
	padding: 2px 2px 2px 6px;
	background: #F4F4F4;
	width:250px;
	height: 138px;
}
.campo_enviar {
	border: #e6e6e6 1px solid;
	font-size: 12px;
	font-weight:600;
	padding: 2px;
	 background-color: #787878;
	width:65px;
	margin-left: 196px;
	color: #FFFFFF;
}

Usando a propriedade vertical-align do CSS


Postado em 28 de junho de 2011 por | Categorias: CSS | Tags: | Sem comentários » | Comentar


Usando a propriedade vertical-align. Use display: table-cell para transformar a DIV em uma celula de tabela. Não use a propriedade float em conjunto com vertical-align.

.area_sidebar {
color: #7F7F7F;
display: table-cell;
vertical-align: middle;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
height: 78px;
line-height: 17px;
text-transform: uppercase;
width: 210px;
}

Valores da propriedade vertical-align:
baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit |

Veja mais em: http://www.maujor.com/blog/2006/07/17/propriedade-vertical-align/


Personalizar CSS para o contact-form-7


Postado em 28 de setembro de 2010 por | Categorias: CSS | Tags: | 10 Comentários » | Comentar


Veja os exemplos abaixo para personalizar os campos dos formulários do plugin Contact-Form-7. O item class é o nome do estilo que deve ser definido no arquivo style.css do tema ativo:

<p>Seu nome (obrigatório)<br />
  </p>

<p>Seu e-mail (obrigatório)<br />
 [email* your-email class:campo_nome] </p>

<p>Assunto<br />
  </p>

<p>Sua mensagem<br />
 [textarea your-message class:campo_texto] </p>

<p>[submit class:campo_enviar "Enviar"]</p>

Modelo do CSS que vai entrar no arquivo style.css do tema:

/** WP CONTACT FORM **/

.campo_nome {
border: #e6e6e6 1px solid;
font-size: 12px;
padding: 2px 2px 2px 6px;
background-image:url(images/fundo_caixa_texto.png);
background-repeat:no-repeat;
height:20px;
width:250px;
}

.campo_texto {
border: #e6e6e6 1px solid;
font-size: 12px;
padding: 2px 2px 2px 6px;
background-image:url(images/fundo_box_texto.png);
background-repeat:no-repeat;
width:250px;
height: 138px;
}

.campo_enviar {
border: #e6e6e6 1px solid;
font-size: 12px;
font-weight:600;
padding: 2px;
background-color: #E9EAC9;
width:65px;
height: 24px;
color: #555335;
margin-top: -20px;
margin-left: -38px;

}

Para chamar o formulário use o código gerado pelo plugin, exemplo:  [contact-form 404 "Not Found"]

Problemas de envio de e-mail no Contact form 7

Nos testes, você preenche os dados do formulário, aparece a confirmação de que tudo correu bem, mas não chega nada em seu e-mail. O problema é que a opção default do Contact Form 7 usa o email da pessoa que preenche o formulário como remetente (“From:”).

Então, na checagem de spam dos servidores por onde a mensagem passa, é detectado que o email do remetente não bate com os IPs associados de onde saiu a mensagem (o servidor onde o site está hospedado). Essa é uma técnica comum para enviar spam. E a mensagem termina retida.

Para resolver isso, basta fixar um remetente como no-reply@seudominio.com (o importante é que o domínio seja o mesmo do seu site).

Para saber mais sobre problemas de envio de e-mail no Contact form 7 consulte:  http://kasamata.com.br/2009/08/problemas-com-o-contact-form-7


Menu Sprite no WordPress


Postado em 22 de setembro de 2010 por | Categorias: CSS | Tags: | 2 Comentários » | Comentar


Primeiro passo é montar a imagem do menu sprite, clique aqui para abrir a imagem do menu que vais er usado neste exemplo

Coloque o CSS abaixo no arquivo style.css do seu tema:

/* SPRITE MENU
/* ----------------------------------------------*/

/* Div que vai abrigar o menu */
.menu {width: 940px; height:57px; margin:0; top:-10px;}

/*Div que pega a imagem do menu*/
ul#pagenav {  float:right; position:relative; width: 940px; height: 57px; padding:0; background: url('images/menu.png'); margin:0; }

/*Configura os botões*/
ul#pagenav li { display:block; height:57px; margin: 0; padding: 0; list-style: none; position: absolute;}
ul#pagenav li a {display:block; height:57px;}

/*HOME*/
/*Configura a área do botão - left define inicio da área e width a largura que vai ter o botão*/
li.hometab { left: 1px; width: 125px;}
/*Botão ativa na tela, quando estiver na página - pega a parte inferior da imagem mesmo left e width porem negativos*/
li.hometab-ativo { left: 1px; width: 125px;    background: transparent url(images/menu.png) -1px -57px no-repeat; }
/*Configura o evento mouse over do botão - pega a parte inferior da imagem mesmo left e width porem negativos*/
.hometab a:hover { background: transparent url(images/menu.png) -1px -57px no-repeat;}

/*EMPRESA*/
/*Configura a área do botão - left define inicio da área será sempre a área que cmpreende o fim da largura do botão anterior e width a largura que vai ter o botão*/
li.page-item-2 { left: 125px; width: 118px;}
li.page-item-2-ativo { left: 125px; width: 118px; background: transparent url(images/menu.png) -125px -57px no-repeat;}
.page-item-2 a:hover { background: transparent url(images/menu.png) -125px -57px no-repeat;}

/*EQUIPE*/
li.page-item-3 { left: 247px; width: 116px;}
li.page-item-3-ativo { left: 247px; width: 116px; background: transparent url(images/menu.png) -247px -57px no-repeat; }
.page-item-3 a:hover { background: transparent url(images/menu.png) -247px -57px no-repeat;}

/*OPERACAO*/
li.page-item-4 { left: 365px; width: 135px;}
li.page-item-4-ativo { left: 365px; width: 135px; background: transparent url(images/menu.png) -365px -57px no-repeat; }
.page-item-4 a:hover { background: transparent url(images/menu.png) -365px -57px no-repeat;}

/*SERVICOS*/
li.page-item-5 { left: 503px; width: 139px;}
li.page-item-5-ativo { left: 503px; width: 139px; background: transparent url(images/menu.png) -503px -57px no-repeat; }
.page-item-5 a:hover { background: transparent url(images/menu.png) -503px -57px no-repeat;}

/*TECNOLOGIA*/
li.page-item-6 { left: 640px; width: 160px;}
li.page-item-6-ativo { left: 640px; width: 160px; background: transparent url(images/menu.png) -640px -57px no-repeat; }
.page-item-6 a:hover { background: transparent url(images/menu.png) -640px -57px no-repeat;}

/*CONTATO*/
li.page-item-10 { left: 802px; width: 157px;}
li.page-item-10-ativo { left: 802px; width: 157px; background: transparent url(images/menu.png) -802px -57px no-repeat;}
.page-item-10 a:hover { background: transparent url(images/menu.png) -802px -57px no-repeat;}

/*Coloca o texto dos links para fora da página*/
ul#pagenav li a { text-indent:-9000px; background-color:transparent; }

/* ----------------------------------------------*//

Insira o código abaixo no arquivo header.php do seu tema:

<?php $pagenow = get_the_title(); ?>
                    

<div class="menu">
<ul id="pagenav" class="page-menu">
            
     <li class="<? if (is_home()) { ?>hometab-ativo<? }else{ ?>hometab<? } ?>" ><a href="<?php echo get_option('home'); ?>">Home</a></li>

	<li class="<? if ($pagenow=="Empresa") { ?>page_item page-item-2-ativo<? } else {?>page_item page-item-2<? } ?>"><a href="<?php echo get_option('home'); ?>/empresa/" title="Empresa">Empresa</a></li>

	<li class="<? if ($pagenow=="Equipe") { ?>page_item page-item-3-ativo<? } else {?>page_item page-item-3<? } ?>"><a href="<?php echo get_option('home'); ?>/equipe/" title="Equipe">Equipe</a></li>

	<li class="<? if ($pagenow==utf8_encode("Operação")) { ?>page_item page-item-4-ativo<? } else {?>page_item page-item-4<? } ?>"><a href="<?php echo get_option('home'); ?>/operacao" title="<?php echo utf8_encode ("Operação")?>"><? echo utf8_encode('Operação'); ?></a></li>


	<li class="<? if ($pagenow==utf8_encode("Serviços")) { ?>page_item page-item-5-ativo<? } else {?>page_item page-item-5<? } ?>"><a href="<?php echo get_option('home'); ?>/servicos" title="<?php echo utf8_encode ("Serviços")?>"><? echo utf8_encode('Serviços'); ?></a></li>

	<li class="<? if ($pagenow=="Tecnologia") { ?>page_item page-item-6-ativo<? } else {?>page_item page-item-6<? } ?>"><a href="<?php echo get_option('home'); ?>/tecnologia" title="Tecnologia">Tecnologia</a></li>

	<li class="<? if ($pagenow=="Contato") { ?>page_item page-item-10-ativo<? } else {?>page_item page-item-10<? } ?>"><a href="<?php echo get_option('home'); ?>/contato/" title="Contato">Contato</a></li>

</ul>

</div>

Truque para inserir espaço em branco no post do WordPress


Postado em 25 de agosto de 2010 por | Categorias: CSS, Úteis | 5 Comentários » | Comentar


As vezes é complicado inserir um espaço entre textos e imagens dentro do editor do WordPress. Para resolver o problema insira um DIV descrito no exemlo abaixo no modo HTML do editor de conteúdo do post do WordPress.

O truque é usar um DIV com altura controlada em pixels, para aumentar ou diminuir a altura do espaçamento altere o número do comando HEIGHT, veja no exemplo abaixo:

<div style="height: 20px;"></div>

Fontes para Web – Dica CSS


Postado em 20 de agosto de 2010 por | Categorias: CSS | Tags: | Sem comentários » | Comentar


Fontes que funciona-se nos sistemas operativos mais conhecidos (Windows, Linux e MAC OS):

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Google disponibiliza biblioteca CSS de fontes para Web, confira em:
http://code.google.com/webfonts


Hacks para IE


Postado em 3 de agosto de 2010 por | Categorias: CSS | Tags: , , , | Sem comentários » | Comentar


Abaixo algumas técnicas para correções de CSS no Internet Explorer 7 e 6. Para importar um arquivo de folha de estilos CSS difetente para o versões 6 e 7 do IE utilize no HEAD do HTML:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!–[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”http://www.seusite.com.br/wp-content/themes/tema/style_ie6.css” />
<![endif]–>

<!–[if lte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”http://www.seusite.com.br/wp-content/themes/tema/style_ie7.css” />
<![endif]–>

O “lt 6” significa later 6, ou seja, anteriores a versão 6.

Mais detalhes consulte: http://maujor.com/tutorial/ie7-hack.php

Outra forma bem simples de resolver pequenos problemas dos IE’s é usar dentro do arquivo de CSS linhas que serão interpretadas somente no versões pre-determinadas do Internet Explorer, veja abaixo:

#box {
background-color:red; /* Todos interpretam essa linha */
background-color /*\**/: #FFCC00\9; /* Apenas IE 8 */ 
*background-color:blue;     /* Apenas IE7 e IE6 */
_background-color:green;   /* Apenas IE6 */
}

O ( * ) colocado antes do parametro de CSS vai fazer com que o IE6 e 7 interpretem essa linha, os demais navegadores vão desconsiderar esse parametro. O ( _ ) vai fazer com que apenas o IE6 interprete essa linha.

Saiba mais em: http://www.toprated.com.br/css-hacks-ie6-ie7-firefox

Uma outra forma de criar Hacks para IE 6 e 7:

/* "Hack" para o IE6 */
* html div#header { margin:0 0 5px; }

/* "Hack" para o IE7 */
*:first-child+html div#header { margin:0 0 5px; }

Criar sombra no texto


Postado em 3 de agosto de 2010 por | Categorias: CSS | Tags: , | Sem comentários » | Comentar


Estilo CSS para criar sobra no texto.

p { text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; }

A cor da sombra criada será a mesma cor que foi usada no texto. Atenção este estilo não funciona em navegadores antigos como IE 6.0.


Categorias

Links

Tags

Autor do post bloginfo() Caminho do tema Campos Personalizados Categorias Codificação UTF8 Contac form 7 CSS Custom fields Custom Post Types data Dividir string explode() Formatação de datas Formatação de Hora get_ get_option() get_page_template() get_the_terms get_the_title() Hora IMG is_single() Janelas Links Lista de Categorias Lista de Posts Lista de ùltimos posts location.href Paginação Post_name Query_posts register_sidebar Sidebar the_author_nickname() the_category() the_tags() the_time() Titulo da página UFT8_encode UTF8 UTF8_decode Widgets wp_list_categories() âncoras

Copyright © 2017  |   W-Pedia – Wikipedia Wordpress BR  |  produzido por Henderson C. Torres