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;
}

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