Archivo de la categoría: Código

Listas desordenadas con FontAwesome

Deja una respuesta

Cambiar los bullets de las listas desordenadas a iconos de FontAwesome es más fácil de lo que parece.

Hacemos una lista de ejemplo:

<ul>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
</ul>

Y luego en el CSS la lista de cosas por hacer:

  1. Importar Font Awesome. En este ejemplo lo importamos desde un CDN pero lo puedes tener local si solo vas a necesitar unos iconos
  2. Quitar los estilos nativos de la lista con list-style:none;
  3. Poner el icono antes de la lista con li:before
/* importa fontawesome (o la que necesites) */
/* para esta prueba lo importé desde http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css */

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

/* estilos para la lista y quitar el predeterminado */
ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }

/* aqui viene la magia */
li:before {
    font-family: 'FontAwesome';
    content:"\f0a4";
    margin:0 5px 0 -15px;
}

Aquí está la lista en acción: http://jsfiddle.net/corchoweb/AHunC/

¿Cual es el icono mas raro que has usado en una lista?

Buscar con expresiones regulares

Deja una respuesta

Muchas veces me pasa que escribo un código y a medida que el proyecto madura hay que cambiar ciertas regiones. Lo más fastidioso es cuando quieres cambiar etiquetas de html que tienen contenido diferente y parece que tienes que hacerlo una por una.

Con las expresiones regulares puedes buscar de muchas formas. Hoy aprendí que puedes buscar etiquetas específicas y dejar el contenido intacto con las expresiones regulares.

Este ejemplo busca todos los elementos de una lista que tengan un parrafo sin importar el contenido.

<li><p>(.*?)</p></li>

Y quiero quitarle las etiquetas de <p> sin quitar el contenido. Para eso entonces reemplazo con este código.

<li>$1</li>

 
Eso es todo. ¿Sabes de alguna otra forma de buscar contenido? dejanos tu comentario.

Expande filas de tabla con jQuery – jExpand plugin

Deja una respuesta

Janko At Warp Speed hizo un mini plugin para expandir filas dentro de una tabla (es decir los <tr> de una </table>) para poder expandir la información.

Lo puedes usar como plugin si crees que lo vas a usar en mas de una tabla o puedes escribir los comandos dentro de tu archivo personalizado de .js por que son muy breves.

Lee el artículo completo en: Expand table rows with jQuery – jExpand plugin – Janko At Warp Speed.

Y puedes ver el demo o descargartelo con ejemplos.

Como usar los shortcodes en un tema de WordPress

Los shortcode son una etiqueta especial que se puede pegar en los posts o páginas y que serán reemplazados con un contenido diferente cuando veas la versión en el website. Si alguna vez has agregado una galería en tu blog entonces ya sabes como se ve un shortcode.

Usualmente estos códigos se usan para agregar contenido en el administrador, pero a veces necesitamos poner el código en el tema directamente. Afortunadamente WordPress tiene una función muy sencilla que te deja agregar shortcodes en tu tema con solo agregar este código:

<?php echo do_shortcode("[example_shortcode]"); ?>

Esta herramienta es muy util pero es dependiente del plugin que estés usando. Así que recuerda que si cambias de plugin o borras el que tienes vas a tener que limpiar donde hayas puesto este código.

Incluir scripts y css con add_action

Deja una respuesta

Para agregar los scripts a tu tema de la forma WordPress tienes que modificar el
functions.php
y agregar unas acciones.

function enqueue_js_scripts()
{

// Register the script like this for a theme:
wp_register_script( 'bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'bootstrap-min' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_js_scripts' );

function enqueue_css_styles()
{
wp_register_style('css-bootstrap-min', get_template_directory_uri() . '/css/bootstrap.min.css',false,'13.02.05','all');
wp_register_style('css-bootstrap-responsive', get_template_directory_uri() . '/css/bootstrap-responsive.min.css','css-bootstrap-min','13.02.05','all');
wp_register_style('css-main', get_template_directory_uri() . '/css/main.css','css-main','13.02.05','all');
wp_register_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.css','font-awesome','13.02.05','all');
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'css-bootstrap-min' );
wp_enqueue_style( 'css-bootstrap-responsive' );
wp_enqueue_style( 'font-awesome' );
wp_enqueue_style( 'css-main' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_css_styles' );

referencias: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Bug del z-index en Chrome 19.x

1 respuesta

La versión de Chrome 19.x hizo que uno de nuestros proyectos tuviera un error mostrando un menú desplegable.
Solo en Chrome se mostraba detras del contenido y gracias a http://mobile-web-development.tumblr.com/ que encontró el bug en el css del boilerplate es una línea para webkit.

html { … -webkit-overflow-scrolling: touch; … }

La quitas y el apilado (stacking) vuelve a su orden normal.

WordPress: cambiar el css según la página con is_page()

Deja una respuesta

Este pedazo de código sirve para cargar una hoja de estilos (CSS) dependiendo de la página en que te encuentres.
Las etiquetas condicionales is_page() determinan en que página te encuentras y de ahí puedes elegir
que hoja de estilos o código se imprima. 

<?php if (is_page(array('about','credits','links'))) { ?>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/widesidebar.css" type="text/css" media="screen" />
<?php } elseif (is_page(array('contact','media-room','store','projects'))) { ?>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/nosidebar.css" type="text/css" media="screen" />
<?php } else { ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"  type="text/css" media="screen" />
<?php } ?>

Via: foro de wordpress http://wordpress.org/support/topic/php-if-statement-comes-back-with-syntax-error

Puedes ver más información en sobre WordPress.org: Etiquetas Condicionales

Redireccionar todas las páginas al index con htaccess

Deja una respuesta

Cómo redireccionar todas las páginas de un sitio al index del sitio exceptuando los archivos que sean recursos (css, javascript, imagenes, etc).
Todos los directorios (reales o falsos) serán redireccionados a la página principal o index.
Nota que puedes agregar o quitar las extensiones de los archivos (js|css|gif|jpg|jpeg|png|ico|swf|pdf) dependiendo de tus necesidades.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !\.(js|css|gif|jpg|jpeg|png|ico|swf|pdf)$
RewriteCond %{REQUEST_URI} !=/
RewriteRule ^(.*)$ / [L,R=301]

Via: http://snipplr.com/view/51082/

Hacks de CSS específicos para Firefox

Deja una respuesta

Traducción del artículo CSS Hacks Targeting Firefox de css-tricks.com

Con estos pedazos de código puedes hacer ajustes exclusivos para Firefox que, aunque lo hace muy bien, hace algunas cosas raras de vez en cuando con el código.
Para esos momentos incomodos en que el viejo zorro hace lo que quiere con el código lo podemos poner en cintura con estos tres códigos específicos.

Firefox 2

html>/**/body .selector, x:-moz-any-link {
  color:lime;
}

Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default {
  color:lime;
}

Cualquier Firefox

@-moz-document url-prefix() {
  .selector {
     color:lime;
  }
}

Via: CSS Hacks Targeting Firefox