Explorando la Categoría: "Css"
Después de un periodo de descanso en semana santa, necesario para desconectar un poco y otro periodo de descanso forzoso debido al mal funcionamiento del hosting de Dreamhost, proseguimos con el blog, el cual había dejado un poco abandonado.
Escribiendo el articulo de MySQL se me ocurrió dar un estilo a los comandos que vaya insertando, creando un div que simule una consola de Microsoft, el típico CMD.
En un principio iba a usar una imagen capturada de la consola directamente, pero esta solución no me acababa de convencer, ya que no se podria copiar y pegar texto y ademas para Google, el texto de las imagenes es como si no existiese.
Realmente es una tontería, se me ocurrió una tarde que estaba aburrido y decidí escribir un articulo sobre esto.
La idea es usar un div con un pre dentro para introducir el texto preformateado.
Estas son las normas css que he usado :
-
-
.cmdWin {
-
background:url(images/cabecera.png) 2px 2px;
-
#background-position: 5px 5px; /* Solo para IE */
-
background-repeat: no-repeat;
-
background-color:#08246B;
-
color:#EFEFEF;
-
padding:0px;
-
padding-top:7px;
-
#padding-top:19px; /* Solo para IE */
-
border: 4px #CFCFCF ridge;
-
}
-
.cmdWin pre , code{
-
font:monospace, Andale Mono, Lucida Console, Monaco, fixed ;
-
font-weight:bold;
-
background:black;
-
margin-bottom:0px;
-
padding:1px;
-
overflow:scroll;
-
height:400px;
-
}
-
.cmdWin pre span.cursor {
-
text-decoration:blink;
-
}
-
He usado un hack css , usando el carácter #, dado que Internet explorar y firefox interpretan el padding de forma distinta.
Para la cabecera del div he usado esta imagen:
También he creado una clase con nombre cursor para hacer parpadear el cursor.
Este el código html necesario para mostrar la línea de comandos.
<div class=“cmdWin”><pre> Microsoft Windows XP [Versión 5.1.2600] (C) Copyright 1985-2001 Microsoft Corp.C:\Documents and Settings\felisa><span class=“cursor”>_</span></pre></div>
Y este es el resultado:
Microsoft Windows XP [Versión 5.1.2600]
(C) Copyright 1985-2001 Microsoft Corp.
C:\Documents and Settings\felisa>_
Como ves, no es algo necesario, pero sirve para romper con la monotonía de la página a la hora de escribir código.
Ya sabemos para que sirve cada fichero de un theme de wordpress , ahora toca empezar a escribir nuestro theme.
Voy a adaptar una plantilla básica ,de las que vienen con Dreamweaver CS3 , para usarla como theme para Wordpress, de esta forma, cuando tenga que realizar algún theme original, ya tendré mi plantilla adaptada y lista para modificar.
La plantilla en cuestión es esta:
Buscando hacks de css me he encontrado un artículo donde explican un curioso comportamiento de lo navegadores de Microsoft.
El hack viene bien como atajo para escribir menos , ya que no necesitaremos escribir el condicional entero. Escribiendo # delante de la propiedad css , solo se aplicará a a Internet Explorer , y si escribimos un _ antes de a propiedad, solo se aplicará a Internet Explorer 6.
Curioso.
Ejemplo:
-
-
.miClase{
-
width: 15px; /* Para todos los Browsers */
-
#width: 20px; /*Para Internet Explorer */
-
_width: 25px; /* Para Internet Explorer 6 */
-
}
-
Sin duda una buena forma de escribir menos código css en nuestros diseños.
Muchas veces he necesitado añadir un script Javascript a una vista en concreto mientras desarrollaba un componente para, por ejemplo,mostrar un mapa de Google maps. También he necesitado añadir un estilo específico para dar estilo a mi componente, pero solo a esa vista sin que se cargue el script de google maps en todo el sitio, ya que esto lo ralentizaría.
Hoy en el trabajo me ha tocado hacer un template para Joomla! desde cero, y como es imposible hacer una plantilla para Joomla! sin saber los Css por defecto, he decidido hacer una chuleta para agilizar futuros trabajos.
No se si la chuleta esta completa, pero con esto he tenido suficiente para llevar a cabo la faena.
Si ves algo que se pueda mejorar, por favor deja un comentario y la amplio.
