Accentsconagua

Haciendo un tema con huesos Empezando

Código
Share

Estamos utilizando un tema de inicio para construir un nuevo sitio sensible.

Porque los huesos?

Bones es un tema de inicio completamente gratuito (no un marco) creado con las últimas prácticas recomendadas. Sirve como una base excelente para construir un tema de WordPress. Esta es una lista de características incompleta sobre Bones:

  • construido sobre la placa de identificación HTML5
  • primer acercamiento móvil
  • diseño de respuesta
  • viene con LESS y SASS
  • retroceso para los navegadores antiguos
  • sección de cabecera más limpia
  • gran documentación

Paso 1: Descargar Bones

Puede descargar el tema de inicio desde el sitio de Themble.

Paso 2: Directorio de Temas

Desembale el archivo ZIP en wp-contenido / temas y renombrar su directorio a huesos.

Paso 3: Configuración del tema

Establezca el tema en la interfaz de administración de WP en Bones (en Apariencia / Temas).

Paso 4: La Página

Así es como se ve el sitio web con el tema Bones básico. La resolución es de 1440x900 pixeles..

Paso 5: Datos básicos del tema

Este es el lugar del nombre del tema, descripción, autor, versión, etc. los style.css archivo está en el directorio de temas. Básicamente, los temas basados ​​en Bones no usan ningún estilo real aquí, sino solo los datos para mostrar la información en la interfaz de administración..

 / ************************************************** *********************** Nombre del tema: URI del tema Kotkoda: http://wp.tutsplus.com Descripción: este sitio se creó utilizando el tema de desarrollo de los huesos . Autor: Adam Burucs Autor URI: http://burucs.com Versión: 1.0 Etiquetas: flexble-width, listo para la traducción, microformatos, rtl-language-support Licencia: GPL2 Licencia URI: http://www.gnu.org/ licencias / gpl-2.0.html

Paso 6: Descargar un compilador MENOS o Sass

Esta herramienta es necesaria para compilar y minimizar los estilos de Bones en un archivo CSS de producción. Elegí WinLESS porque estoy trabajando en Windows 7.

Paso 7: Explorando los estilos de huesos (MENOS)

En el huesos / biblioteca / menos En el directorio puedes encontrar todos los archivos para personalizar el tema. Estos son los estilos que necesitamos:

  • 1030up.less - hoja de estilo de escritorio
  • 1240up.less - hoja de estilo de monitor de tamaño mega
  • 2x.less - Estilos para pantallas retina.
  • 481up.less - 481px + estilos
  • 768up.less - Tableta y hoja de estilo de escritorio pequeño
  • infundado - La base para dispositivos móviles.
  • ie.less - Aquí llamamos a todos los estilos para IE, pero sin las consultas de los medios.
  • login.less - Podemos modificar la página de inicio de sesión de WordPress.
  • mixins.less - aquí es donde usamos LESS mixins y constantes
  • normalizar. a menos - reinicio general para estilos predeterminados
  • style.less - Estilos principales, utiliza todos los demás archivos.

Paso 8: Fondo principal y color del texto

Estamos utilizando fondo naranja y gris medio (@ kotkoda-gris) color del texto en infundado. (Utilice el color para establecer el color de la fuente y la propiedad de fondo para establecer el color de fondo).

 body font-family: Georgia, serif; tamaño de fuente: 14px; línea de altura: 1.5; color: @ kotkoda-gris; fondo: # ED7626; / * color de fondo principal * /

Y esto va en mixins.less. Puede definir una variable de color en MENOS con lo siguiente: @ kotkoda-gris es el nombre de la variable de color y después de los dos puntos es el código de color (# 19171A). Cada nombre de variable comienza con el @ firmar.

 @ kotkoda-gris: # 19171A;

Paso 9: Enlace, Título y Post Meta Color

Para enlaces el color será @blanco, pero @ alerta-amarillo Se utilizará para los estilos de desplazamiento y enfoque. Utilice la propiedad de color para establecer el valor. Cada título y título con enlaces serán @ kotkoda-gris. Necesitamos un poco de gris más oscuro para esto, el valor original era # 999. Con el color Regla podemos configurarlo para # 444 (que es igual a # 444444).

 / ********************* LINK STYLES ********************* / a, a: visitó color: @white; / * on hover * / &: hover, &: focus color: @ alert-yellow; …… H1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: sans-serif; representación de texto: optimizelegibility; peso de la fuente: 500; / * si va a utilizar fuentes web, asegúrese de revisar sus pesos http://css-tricks.com/watch-your-font-weight/ * / / * eliminando la decoración de texto de todos los enlaces de titulares * / a  texto-decoración: ninguno; color: @ kotkoda-gris; … / * Publicar meta * / .meta color: # 444;…

Paso 10: Nuestra página después de estas modificaciones

Así es como se ve en 600 píxeles de ancho..

A mitad de camino

Llegamos al final de la primera parte de esta serie de tutoriales..

Código
×