Share
Estamos utilizando un tema de inicio para construir un nuevo sitio.
Vamos a seguir directamente desde el tutorial anterior en esta serie. Así que vamos a saltar en él:
Usaremos dos fuentes de la biblioteca de fuentes de Google: Arvo y PT Sans. Pon este código en la funciones.php expediente. Este código extraerá el código CSS que contiene el Perfil delantero propiedades.
Accentsconagua
función wptuts_googlefonts_styles () // Encolar las hojas de estilo de fuente de esta manera: wp_enqueue_style ('googlefonts-arvo', 'http://fonts.googleapis.com/css?family=Arvo'); wp_enqueue_style ('googlefonts-pt-sans', 'http://fonts.googleapis.com/css?family=PT+Sans'); add_action ('wp_enqueue_scripts', 'wptuts_googlefonts_styles'); Vamos a configurar Arvo para los encabezados (infundado) y PT Sans para copia de cuerpo. Podemos configurar la fuente con Familia tipográfica. También definimos serif y sans-serif, lo que significa que obtendremos una fuente predeterminada si no se puede cargar la fuente personalizada.
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: 'Arvo', serif; ...… body font-family: 'PT Sans', sans -serif;…
H1, pie de página, encabezamiento El tamaño de letra será 4em. Tenemos que modificar el footer.php para agregar contenido y la infundado archivo de estilos. Establecer el fondo (con fondo), borde inferior (con borde inferior) y relleno (arriba 10px, 0px para izquierda y derecha, y 15px para el fondo). 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 el huesos / biblioteca / imágenes carpeta. El código CSS entra en el infundado expediente. Los gráficos se repetirán horizontalmente (repetir-x) y comienza en la parte superior izquierda (0 0).
h1, .h1 font-size: 4em; /*2.5em*/ line-height: 1.333em;
© . Esta página está protegida por la XXYY gobierno y ejercito. Lee todo con cuidado. Puede contactarnos por correo a kukori @ kotkoda.com.
.pie de página claro: ambos; fondo: # f6f6f6; borde inferior: 5px sólido # FFD400; relleno: 10px 0 15px;
.header background: url (… /images/kotkoda_header_bg.gif) 0 0 repeat-x;
Así es como se ve después de modificar el pie de página..
Así se ve después de añadir los gráficos..
Podemos establecer un nuevo favicon 16x16 en el header.php expediente. En el href Parte establecemos el camino del icono, get_template_directory_uri Nos dará la URL del directorio principal de la plantilla. Para el título de la página, reemplace el código original con este y configure la descripción en la interfaz de administración. Este código PHP hará eco del campo de descripción del blog..
…<?php echo get_bloginfo( 'description', 'display' ); ?>
Se verá así después de agregar el ícono.
La navegación principal para páginas también tendrá un estilo mínimo. Con monitor ajustado a en línea el aspecto será horizontal y el borde izquierdo será blanco (borde izquierdo).
.menu border-left: 1px solid @white; relleno-izquierda: 1em; .menu ul relleno: 1em 0 1em; altura: 1.5em; .menu ul li display: inline; margen derecho: 1em;
La nueva imagen del menú principal..
Los comentarios tendrán un aspecto más sencillo. Los estilos nombrados impar y incluso debe estar vacío (o comentado) y el li elemento obtiene un borde izquierdo. El enlace de texto de la fecha correcta también será blanco, vamos a colorearlo para @blanco. El botón de respuesta obtendrá un nuevo estilo también. Tenemos que configurar el color, el color de fondo y las opacidades (se eliminan).
.commentlist li position: relative; Limpia los dos; desbordamiento: oculto; tipo de estilo de lista: ninguno; margen inferior: 1.5em; Acolchado: 0.7335em 10px; borde izquierdo: 1px solid @white;… / * clases de comentarios generales * / .alt .odd / * background: #eee; * / .even / * background: #fefefe; * /… / * vcard * / .vcard margin-left: 50px; cite.fn font-weight: 700; estilo de letra: normal; a.url time float: right; a color: @white;… / * comentario responder enlace * / .comment-reply-link text-decoration: none; flotar derecho; fondo: @blanco; relleno: 3px 5px; color: # 999; margen inferior: 10px; peso de la fuente: 700; tamaño de letra: 0.9em; &: hover, &: focus color: @ kotkoda-grey;
El nuevo look.
No necesitamos la frontera (frontera: 0) y el fondo debe ser @blanco (infundado). Hay muchos estilos de fantasía que no necesitamos (transición, redondeado, gradiente) Así que tenemos que cambiar los bordes y los fondos, y eliminar la redondez y la transición. Esto va en nuestro mixins.less expediente.
textarea relleno: 3px 6px; fondo: @blanco; / * # efefef; * / border: 0; / * 2px solid #cecece; * /
.botón, .button: visitó / * border: 1px solid darken (@ kotkoda-gray, 13%); color de borde superior: se oscurece (@ kotkoda-gris, 7%); color de borde izquierdo: se oscurece (@ kotkoda-gris, 7%); * / borde: 0; relleno: 4px 12px; color: # 999; pantalla: bloque en línea; tamaño de fuente: 13px; font-weight: negrita; texto-decoración: ninguno; / * text-shadow: 0 1px rgba (0,0,0, .75); * / cursor: puntero; margen inferior: 20px; línea de altura: 21px; /*.transition();*/ /*.rounded(4px);*/ /*.css-gradient(#999,darken(#999, 5%)); * / &: hover, &: focus color : @ kotkoda-gris; / * borde: 1px sólido se oscurece (@ kotkoda-gris, 13%); color de borde superior: se oscurece (@ kotkoda-gris, 20%); color de borde izquierdo: se oscurece (@ kotkoda-gris, 20%); * / borde: 0; /*.css-gradient(darken(#444, 5%), se oscurece (# 444, 10%); * / &: active /*.css-gradient(darken(@kotkoda-grey, 5%) , @ kotkoda-gris); * / color: @ kotkoda-gris;
El look after styling.
Cambiemos el fondo del cuadro de información a amarillo claro, que es @ alerta-amarillo (en mixins.less). No necesitamos un borde, así que ponlo a cero.
.info / * border-color: darken (@ alert-blue, 5%); * / frontera: 0; fondo: @ alerta-amarillo;
El último paso es eliminar la captura de pantalla predeterminada y reemplazarla con la Kotkoda que hicimos.
Aquí es cómo se ve el tema terminado en 600 píxeles de ancho. En los siguientes tutoriales limpiaremos el tema de partes innecesarias y luego lo prepararemos para enviarlo a ThemeForest.
