Crear un theme para WordPress I Publicada el Martes 31 de Octubre de 2006 a las 3:54 am por Infected-FX
Ajustes a la CSS I
Hasta el paso anterior hemos terminado lo que corresponde a nuestro archivo header.php, pero no hemos acabado del todo esta parte, ya que hay que hacerle unas pequeñas modificaciónes a nuestra CSS, ya que hemos añadido una clase que corresponde a description y lo que hace que nuestro tab esté activo page_item current_page_item
Abrimos nuestra CSS y buscamos por la línea 56 y ponemos esto.
-
#header h1 {
-
margin:-10px 0px 0px 0px;
-
}
Como ahora abajo de nuestro título hay una línea (lo que es descripción) habrá que subirlo un poco sin afectar lo demás que se encuentra en el header.
Vamos a añadir lo que corresponde a la clase description. Buscamos por la línea 65 y ponemos esto.
-
#header .description{
-
font-size:12px;
-
display:block;
-
letter-spacing:1px;
-
word-spacing:5px;
-
}
Es el formato para nuestra clase, le definimos el tamaño del texto por que sino tomaría el mismo que el h1, lo mismo sucede con el espacio entre letras.
Por último vamos con lo que son nuestras tabs, esta parte ya la tenemos definida lo único que haremos será cambiarle el ID por la clase. De la línea 110 a 119 encontramos esto:
-
#menuList li#active a:link,
-
#menuList li#active a:visited{
-
background-color: #032B50;
-
color:#FFF;
-
}
-
-
#menuList li#active a:hover {
-
background-color:#032B50;
-
color: #E0FF4F;
-
}
Lo vamos a reemplazar por esto:
-
#menuList li.current_page_item a:link,
-
#menuList li.current_page_item a:visited{
-
background-color: #032B50;
-
color:#FFF;
-
}
-
-
#menuList li.current_page_item a:hover {
-
background-color:#032B50;
-
color: #E0FF4F;
-
}
Solo cambiamos #active por .current_page_item
De esta forma hemos terminado ahora si con lo que corresponde al header.php y las modificaciónes correspondientes a la css. Salvamos nuestros archivos, pueden bajarse estos 2 archivos que hemos modificado para que los puedan ir checando.
- style.css
- header.php
Eden
Octubre 31, 2006 a las 6:34 pm
eres fantastico bro!!
gran utilidad la de este tuto!!
HostMx Alon
Octubre 31, 2006 a las 10:44 pm
ahorita no tengo mucho tiempo, pero yo era de los principales interesados en este tuto, gracias ifx luego lo checho :D
lucas
Mayo 24, 2007 a las 1:08 pm
muy bueno el tutorial amigo!!!
lucas
Agosto 2, 2007 a las 10:12 am
REALMENTE EXELENTE!
..::N3r1::..
Noviembre 28, 2007 a las 11:28 am
yo nose si soy yo el idiota pero porque no aprende a escribir el que hizo esta entrada??
es imposible leerlo..
Chau
Motif
Septiembre 17, 2008 a las 10:48 pm
No se por que pero no puedo descargarme los archivos.. me dice que la pagina no existe =(