Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development

Haz un tema con huesos: terminando

Read Time: 5 mins

Spanish (Español) translation by Santiago Diaz (you can also view the original English article)

Estamos usando un tema de inicio para construir un nuevo sitio.

Vamos a seguir directamente el tutorial anterior de esta serie. Así que saltemos a eso:


Paso 13: Configuración de fuentes de texto para el encabezado y el cuerpo

Usaremos dos fuentes de la biblioteca de fuentes de Google: Arvo y PT Sans. Pon este código en el archivo functions.php. Este código extraerá el código CSS que contiene las propiedades del font-face.

Establezcamos Arvo para los encabezados (base.less) y PT Sans para el cuerpo del texto. Podemos configurar la fuente con font-family. También definimos serif y sans-serif, lo que significa que obtendremos una fuente predeterminada si no se puede cargar la fuente personalizada.


Paso 14: H1, footerheader

El tamaño de la fuente será 4em. Tenemos que modificar footer.php para agregar contenido y el archivo base.less para estilos. Establece el fondo (con background), el borde inferior (con border-bottom) y el relleno (10px superior, 0px para la izquierda y derecha, y 15px para la parte inferior). Para el encabezado, un gradiente de ruido redimensionado 10 veces será bueno, guardado como un archivo (kotkoda_header_bg.gif) y tiene que estar en la carpeta bones/library/images. El código CSS entra en el archivo base.less. Los gráficos se repetirán horizontalmente (repeat-x) y comenzarán en la parte superior izquierda (0 0).

Así es como se ve después de modificar el pie de página.

After footer modificationsAfter footer modificationsAfter footer modifications

Así es como se ve después de agregar los gráficos.

After footer modificationsAfter footer modificationsAfter footer modifications

Paso 15: Favicon y título de la página

Podemos establecer un nuevo favicon de 16x16 en el archivo header.php. En la parte href establecemos la ruta del icono, get_template_directory_uri nos dará la URL del directorio principal de la plantilla. Para el título de la página, reemplaza el código original con este y configura la descripción en la interfaz de administración. Este código PHP se hará eco del campo de descripción del blog.

Se verá así después de agregar el icono.

After adding the favicon

Paso 16: Menú de página

La navegación principal de las páginas también tendrá un estilo minimalista. Con display configurada en inline, el aspecto será horizontal y el borde izquierdo será blanco (border-left).

La nueva apariencia del menú principal.

After setting main menuAfter setting main menuAfter setting main menu

Paso 17: Estilos de comentarios

Los comentarios tendrán un aspecto más simple. Los estilos llamados odd y even deben estar vacíos (o comentados) y el elemento li obtiene un border-left. El enlace de texto de la fecha correcta también será blanco, coloreémoslo a @white. El botón de respuesta también tendrá un nuevo estilo. Tenemos que configurar el color, el color de fondo y las opacidades (se borran).

El nuevo look.

After comment modificationAfter comment modificationAfter comment modification

Paso 18: Cuadro de comentarios y botón

No necesitamos el borde (border: 0) y el fondo debe ser @white (base.less). Hay muchos estilos elegantes que no necesitamos (transitionroundedgradient), por lo que tenemos que cambiar los bordes y fondos, y eliminar la redondez y la transición. Esto entra en nuestro archivo mixins.less.

El cuidado del peinado.

After comment box and button modificationAfter comment box and button modificationAfter comment box and button modification

Paso 19: Cuadro de información

Cambiemos el fondo del cuadro de información a amarillo claro, que es @alert-yellow (en mixins.less). No necesitamos un borde, así que ajústalo a cero.


Paso 20: Captura de pantalla del administrador del tema

El último paso es eliminar la captura de pantalla predeterminada y reemplazarla con la de Kotkoda que hicimos.

Final theme screenshot for admin

Finalizado

Así es como se ve el tema terminado en 600 píxeles de ancho. En los próximos tutoriales, limpiaremos el tema de las partes innecesarias y luego lo prepararemos para enviarlo a ThemeForest.

After comment box and button modificationAfter comment box and button modificationAfter comment box and button modification
Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.