CSS

Muchas veces, cuando estamos construyendo un tema de WordPress, acabamos dedicándonos a estilizar aquellos elementos (smileys, pies de foto, alineamiento de las imágenes en un artículo…) que son servidos por WordPress directamente, y que necesitan tarde o temprano algunos retoques con CSS.

Sin embargo, disponemos de una forma para conseguir que todos esos elementos ‘nativos’ de WordPress sean estilizados por defecto, usando cierto archivo .css con el que WordPress nos viene.

Para ello, deberemos abrir nuestro header.php e incluir, junto a la hoja de estilos propia que nosotros estemos construyendo, ésta otra, que WordPress extraerá de sus archivos:

<link rel='stylesheet' href='/wp.css' type='text/css' media='all' />

La podemos poner, por ejemplo, justo debajo de la hoja de estilos que hayamos creado; y nos tomará en cuenta todos esos pequeños detalles sin que tengamos que volver sobre ellos.

Si queréis darle un vistazo, aquí la tenemos: wp.css

Esperamos que este truco sea de vuestro interés.

Etiquetas: ,

Esto puede serviros a vosotros, diseñadores, ya que lo que hace es inyectar una clase CSS a la etiqueta <body> en el HTML, con el navegador usado por nuestro lector.

Para que esto se produzca, debéis simplemente incluír en el fichero functions.php lo siguiente:

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

Leer más »

Etiquetas: ,

Sea por la razón que sea, tal vez te haz preguntado ¿Como hacer que, cada vez que se recarge la página, tener un background diferente?.
Es muy fácil implemetar esta caracteristica, y solo necesitas un poco de conocimientos en PHP y CSS para implementarla correctamente. Empecemos:

Primero que todo, en el fichero header.php de tu theme, justo despues de:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
añade:
<style>
body {
background: transparent url('<?php include('css.php') ?>') repeat-x; }
</style>

Leer más »

Etiquetas: , ,

¿Cuántas veces hemos tenido que preparar una segunda hoja de estilo para Internet Explorer y sus devastadoras interpretaciones en CSS? Incontables.

Si normalmente la creábamos por separado y la incluíamos en el head dentro de header.php, hoy vamos a ver cómo mantener una única hoja de estilo, a la que daríamos clases e ids para los elementos gráficos que se hayan presentado inconsistentes en IE.

Leer más »

Etiquetas: ,