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
16 comentarios para Crear un theme para WordPress I
eres fantastico bro!!
gran utilidad la de este tuto!!
ahorita no tengo mucho tiempo, pero yo era de los principales interesados en este tuto, gracias ifx luego lo checho
muy bueno el tutorial amigo!!!
REALMENTE EXELENTE!
yo nose si soy yo el idiota pero porque no aprende a escribir el que hizo esta entrada??
es imposible leerlo..
Chau
No se por que pero no puedo descargarme los archivos.. me dice que la pagina no existe =(
He visto que han cambiado la estructura de los permalink por eso no funcionan los enlaces
http://infectedfx.net/layout-xhtml-css-i/2006/
pon el año despues del nombre del post y funcionan
Muy bueno excelente introducción ahora me podre a practicar….gracias men…..
hola mira quiero aserte una consulta con respecto al index.php, nesesito saver en el siguiente codigo:
como deveria ponerlo, para que enves de que salga las fraces “entradas anteriores” y “sigientes entradas”, salga los nuemeros de las paginas, es desir una navegacion igual a la de gratisjuegos.org, como veras hay solo sale el numero de paginas, espero tu respuesta
¡Muchas gracias!
Tiene serios problemas de redacción este articulo. Aunque de cualquier forma es muy educativo; gracias.
Muchas gracias!
Los enlaces a las partes anteriores estan caidos, podria solucionarlo?? Mil gracias!!
Los archivos no funcionan.
No funcionan los enlaces de:
- Layout XTML & CSS I
- Layout XHTML & CSS II
ARREGLEN LAS ENTRADAS ¬¬