JavierSam: 14. Como resetear y reconstruir los CSS de su Tema de WordPress y definir su diseño

domingo, 22 de diciembre de 2013

14. Como resetear y reconstruir los CSS de su Tema de WordPress y definir su diseño

(El artículo original y en inglés, fue publicado el 12 de noviembre de 2012)

ThemeShaper es el sitio del Equipo de Temas de Automattic, que, en junio de 2009, publicó una muy popular serie de 11 artículos de Ian Stewart, bajo el título: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (Como crear un Tema de WordPress: el tutorial definitivo).
El año pasado, reflotó y actualizó ese tutorial. Esta vez con 16 artículos a cargo de Michelle Langston: The ThemeShaper WordPress Theme Tutorial: 2nd Edition (Tutorial de Temas de WordPress de ThemeShaper. Segunda edición).
Me propongo traducir libremente esas 16 entradas (además de la introducción) e ir publicándolas a medida que las tenga listas.
Al final de cada entrada va el listado con todas las entradas de este tutorial.

Las hojas de estilos (css) pueden ser complicadas. También pueden ser muy fáciles. Cuando estaba comenzando con estos temas tuve mucha ayuda para meter mi cabeza en esto del css y me da mucho placer ayudar a los demás de la misma manera me ayudaron al principio: con sólidos ejemplos de código de los cuales aprender.

Aquí vamos a exponer un arsenal de desarrollo de css de Temas de WordPress para usted:

Una hoja de estilos que resetea los css predefinidos de todos los navegadores y crea un estándar sensato sobre el que podemos trabajar.
Un set de 5 hojas de estilo fluídas que crearán TODOS los diseños más comunes que usted espera de blogs y sitios web - y cada uno listo para adaptarse a un diseño de ancho fijo.
Fuentes con unidades rem, para que sean fáciles de adaptar.
Muchos estilos de marcado predefinidos, globales y comunes.
Menú de navegación simple y adaptativo, para pantallas pequeñas.
Estilos de botones predefinidos.
Una hoja de estilos en blanco y comentada, con todos los selectores principales incluidos, lista para sus estilos personalizados.
Una hoja de estilo de ejemplo, con un diseño exclusivamente con css, para que pueda ver a los selectores en acción y, basado en ella, construir los suyos propios.
Una introducción a hojas de estilo rtl, con una hoja de estilo rtl funcional para su diseño exclusivamente con css de ejemplo.

¿Listo para dar en el blanco?

Reset CSS

Nuestra "Reset css" es una adaptación de la famosa "Reset css" de Eric Meyer (Nota de la traducción: Eric Meyer es conocido, entre muchas otras cosas, también por ser el autor de S5) con algunos cambios muy muy menores. Básicamente lo que hace es quitar todos los valores tipográficos predeterminados de todos los navegadores y... obliterarlos. Se quedará con una porquería, gris y blanduzca.
Es hermosa.
Lo que hace es igualar las representaciones de todos los navegadores, permitiéndole ignorar las incontables peculiaridades y caprichos de cada uno.
Su uso es simple. Agregue lo que sigue a su style.css, bien al principio, inmediatamente después de la sección de comentarios inicial.

/* =Reset
-------------------------------------------------------------- */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
html {
    font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
    overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
    -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
body {
    background: #fff;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}
ol, ul {
    list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
a:focus {
    outline: thin dotted;
}
a:hover,
a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
    outline: 0;
}
a img {
    border: 0;
}

No hay necesidad de memorizárselo. Simplemente péguelo al principio de su hoja de estilos cada vez que comience un nuevo proyecto. Vuelva a cargar su página y, si es posible, revise cómo se ve en diferentes navegadores. Es maravillosamente bruto ¿no le parece?

css para Reconstruir

Nuestro css para Reconstruir es una invención personal, adaptada de las primeras versiones de las hojas de estilos tipográficas de Blueprint y redefinidas primero en Thematic y, más recientemente, en el proyecto Underscores. Lo que hace es recuperar algo del ritmo vertical en nuestras páginas, pero de una manera inteligente.
Lo que he intentado hacer con esta iteración de mi css tipográfico para Reconstruir es combinar lo mejor de los dos mundos para la tipografía web: usar rems (con respaldos en pixeles) para la altura de las fuentes, con interlineados relativos para la declaración principal en el elemento body, y Ems para todos los subsiguientes márgenes verticales (como en los párrafos y las listas).
¿Qué significa todo esto? Que es realmente sencillo, después, definir la altura de la fuente -sin necesidad de hacer cálculos- y tener todos sus elementos tipográficos siguiendo el ejemplo, con un ritmo vertical apropiado (el espacio vertical entre los elementos tipográficos, como párrafos y listas).
Agreguemos las reglas de estilo de reconstrucción enseguida después de las de "reset".

/* =Global
----------------------------------------------- */
 
body,
button,
input,
select,
textarea {
    color: #404040;
    font-family: sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
}
 
/* Headings */
h1,h2,h3,h4,h5,h6 {
    clear: both;
}
hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}
 
/* Text elements */
p {
    margin-bottom: 1.5em;
}
ul, ol {
    margin: 0 0 1.5em 3em;
}
ul {
    list-style: disc;
}
ol {
    list-style: decimal;
}
ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
    margin-left: 1.5em;
}
dt {
    font-weight: bold;
}
dd {
    margin: 0 1.5em 1.5em;
}
b, strong {
    font-weight: bold;
}
dfn, cite, em, i {
    font-style: italic;
}
blockquote {
    margin: 0 1.5em;
}
address {
    margin: 0 0 1.5em;
}
pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    padding: 1.6em;
    overflow: auto;
    max-width: 100%;
}
code, kbd, tt, var {
    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}
mark, ins {
    background: #fff9c0;
    text-decoration: none;
}
sup,
sub {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    bottom: 1ex;
}
sub {
    top: .5ex;
}
small {
    font-size: 75%;
}
big {
    font-size: 125%;
}
figure {
    margin: 0;
}
table {
    margin: 0 0 1.5em;
    width: 100%;
}
th {
    font-weight: bold;
}
button,
input,
select,
textarea {
    font-size: 100%; /* Corrects font size not being inherited in all browsers */
    margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
    vertical-align: baseline; /* Improves appearance and consistency in all browsers */
    *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
button,
input {
    line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
    *overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid #ccc;
    border-color: #ccc #ccc #bbb #ccc;
    border-radius: 3px;
    background: #e6e6e6;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
    color: rgba(0,0,0,.8);
    cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
    -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
    font-size: 12px;
    font-size: 1.4rem;
    line-height: 1;
    padding: 1.12em 1.5em 1em;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa #bbb;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
}
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    border-color: #aaa #bbb #bbb #bbb;
    -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
    padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
    -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    border: 0;
    padding: 0;
}
input[type=text],
input[type=email],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
    color: #111;
}
input[type=text],
input[type=email] {
    padding: 3px;
}
textarea {
    overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
    padding-left: 3px;
    vertical-align: top; /* Improves readability and alignment in all browsers */
    width: 98%;
}
 
/* Links */
a {
    color: royalblue;
}
a:visited {
    color: purple;
}
a:hover,
a:focus,
a:active {
    color: midnightblue;
}

Los estilos estándar

Hay algunos elementos en WordPress que tendrá que estilizar cada vez. Esto incluye estilos para flotar todas las imágenes, así como para manipular menúes, leyendas, galerías de imágenes, widgets, el contenido de las entradas y los comentarios. Agreguémoslos ya mismo. Pegue lo siguiente enseguida después de los estilos que recién agregó.

/* Alignment */
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}
.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}
.aligncenter {
    clear: both;
    display: block;
    margin: 0 auto;
}
 
/* Text meant only for screen readers */
.assistive-text {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
 
/* =Menu
----------------------------------------------- */
 
.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    display: block;
    text-decoration: none;
}
.main-navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    position: absolute;
        top: 1.5em;
        left: 0;
    z-index: 99999;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul a {
    width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}
 
/* Small menu */
.menu-toggle {
    cursor: pointer;
}
.main-small-navigation .menu {
    display: none;
}
 
 
/* =Content
----------------------------------------------- */
 
.sticky {
}
.hentry {
    margin: 0 0 1.5em;
}
.entry-meta {
    clear: both;
}
.byline {
    display: none;
}
.single .byline,
.group-blog .byline {
    display: inline;
}
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}
.page-links {
    clear: both;
    margin: 0 0 1.5em;
}
 
 
/* =Asides
----------------------------------------------- */
 
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
    display: none;
}
 
 
/* =Media
----------------------------------------------- */
 
.site-header img,
.entry-content img,
.comment-content img,
.widget img {
    max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
.site-header img,
.entry-content img,
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
.site-header img,
.entry-content img,
img.size-full {
    max-width: 100%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
.wp-caption {
    border: 1px solid #ccc;
    max-width: 100%;
}
.wp-caption.aligncenter,
.wp-caption.alignleft,
.wp-caption.alignright {
    margin-bottom: 1.5em;
}
.wp-caption img {
    display: block;
    margin: 1.2% auto 0;
    max-width: 98%;
}
.wp-caption-text {
    text-align: center;
}
.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}
.site-content .gallery {
    margin-bottom: 1.5em;
}
.gallery-caption {
}
.site-content .gallery a img {
    border: none;
    height: auto;
    max-width: 90%;
}
.site-content .gallery dd {
    margin: 0;
}
.site-content .gallery-columns-4 .gallery-item {
}
.site-content .gallery-columns-4 .gallery-item img {
}
 
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
    max-width: 100%;
}
 
 
/* =Navigation
----------------------------------------------- */
 
.site-content .site-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}
.site-content .nav-previous {
    float: left;
    width: 50%;
}
.site-content .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}
 
/* =Comments
----------------------------------------------- */
 
.bypostauthor {
}
 
/* =Widgets
----------------------------------------------- */
 
.widget {
    margin: 0 0 1.5em;
}
 
/* Search widget */
#searchsubmit {
    display: none;
}

Ahora ya tiene algunos estilos básicos en su lugar y sobre ellos puede continuar construyendo. Si quiere una guía de cómo estilizar esos elementos, por favor, descargue una de las hojas de estilo de ejemplo, que están vinculadas en la sección "Hojas de estilo de ejemplo" al final de esta lección.

Todos los diseños que alguna vez necesitará

El Tema _s incluye 5 sólidos e indestructibles diseños: content-sidebar, sidebar-content, sidebar-content-sidebar, sidebar-sidebar-content y content-sidebar-sidebar.
Si lo desea, puede hacer una copia de cada una de esas hojas de estilo en el directorio layouts que creó en Plantillas y estructura de directorios de un Tema de WordPress.
De esta manera, tendrá todos los diseños a mano, como referencia. Este paso es enteramente opcional; si no va a utilizar todos estos diseños, no dude en solo copiar los que planee utilizar.
Para utilizar uno de estos diseños en su Tema, tan solo copie sus declaraciones de estilo en el archivo style.css. Yo prefiero colocar las reglas de estilo relativas al diseño en una nueva sección dentro de style.css a la que llamo “Structure”. Normalmente coloco esta sección “Structure” justo debajo de la sección “Global”, pero la puede colocar donde mejor sea para su proyecto.
Como un ejemplo, si lo que desea es un diseño contenido-barra lateral, debería copiar lo siguiente de content-sidebar.css:

/* =Structure
----------------------------------------------- */
#primary {
float: left;
margin: 0 -25% 0 0;
width: 100%;
}
#content {
margin: 0 25% 0 0;
}
#secondary { /* Sidebar 1 */
float: right;
overflow: hidden;
width: 25%;
}
#tertiary { /* Sidebar 2 */
clear: right;
}
.site-footer {
clear: both;
width: 100%;
}

Por su parte, si lo que desea es un diseño barra lateral-contenido-barra lateral, debería pegar lo siguiente, de sidebar-content-sidebar.css.

/* =Structure
----------------------------------------------- */
#primary {
float: left;
width: 100%;
}
#content {
margin: 0 20%;
}
#main .widget-area {
float: left;
overflow: hidden;
width: 20%;
}
#secondary { /* Sidebar 1 */
margin: 0 0 0 -100%;
}
#tertiary { /* Sidebar 2 */
margin: 0 0 0 -20%;
}
.site-footer {
clear: both;
width: 100%;
}

Para un diseño barra lateral-barra lateral-contenido (sidebar-sidebar-content.css), lo logrará con este código

/* =Structure
----------------------------------------------- */
#primary {
float: right;
margin: 0 0 0 -40%;
width: 100%;
}
#content {
margin: 0 0 0 40%;
}
#main .widget-area {
float: left;
overflow: hidden;
width: 20%;
}
.site-footer {
clear: both;
width: 100%;
}

Para un diseño contenido-barra lateral-barra lateral (content-sidebar-sidebar.css), aquí tiene lo que debería pegar.

/* =Structure
----------------------------------------------- */
#primary {
float: left;
width: 100%;
}
#content {
margin: 0 40% 0 0;
}
#main .widget-area {
float: left;
overflow: hidden;
width: 20%;
}
#secondary { /* Sidebar 1 */
margin: 0 0 0 -40%;
}
#tertiary { /* Sidebar 2 */
margin: 0 0 0 -20%;
}
.site-footer {
clear: both;
width: 100%;
}

Finalmente, para un diseño barra lateral-contenido (sidebar-content.css), aquí está el código mágico.

/* =Structure
----------------------------------------------- */
 
#primary {
float: right;
margin: 0 0 0 -25%;
width: 100%;
}
#content {
margin: 0 0 0 25%;
}
#secondary { /* Sidebar 1 */
float: left;
overflow: hidden;
width: 25%;
}
#tertiary { /* Sidebar 2 */
clear: left;
}
.site-footer {
clear: both;
width: 100%;
}

El método más simple de convertir cualquiera de estos diseños en un diseño de ancho fijo es agregar es agregar un ancho (width) y un margen centrado al div .site. Por ejemplo:

.site {
    margin: 0 auto;
    max-width: 980px;
}

Agregar una hoja de estilos rtl

Si planea distribuir su Tema, es altamente recomendable que agregue una hoja de estilos rtl. Las hojas de estilo rtl invierten la dirección horizontal de su Tema para acomodarse a los lenguajes que se leen de derecha a izquierda. Por lo tanto, en su hoja de estilos rtl, debe:

Convertir todas sus reglas “float: left” a “float: right”, y viceversa.
Convertir los márgenes y padding “left” a “right”, y viceversa.
Si ha agregado cualquier imagen que dependa de una dirección (como las flechas), probablemente necesite crear versiones rtl de las mismas, para que las pueda llamar en su hoja de estilos rtl.

Para comenzar su hoja de estilos rtl, abra rtl.css (o, si no lo tiene, cree este archivo en su directorio raíz). Pegue este código al principio.

/*
Theme Name: Shape
 
Adding support for language written in a Right To Left (RTL) direction is easy -
it's just a matter of overwriting all the horizontal positioning attributes
of your CSS stylesheet in a separate stylesheet file named rtl.css.
 
http://codex.wordpress.org/Right_to_Left_Language_Support
 
*/
 
body {
    direction: rtl;
    unicode-bidi: embed;
}

¡Ahora necesita sus estilos rtl! Cómo construirlos depende de usted. Puede hacerlo manualmente, recorriendo su hoja de estilos y convirtiendo, una por vez, todas las reglas horizontales. El Codex de WordPress tiene instrucciones que son de gran ayuda para este proceso.

Si su hoja de estilos es muy grande o no se siente como para hacer el trabajo manualmente, puede utilizar una herramienta que convierta automáticamente las propiedades ltr a rtl. Un buen ejemplo es css Janus. Puede copiar y pegar su css y ¡él generará las propiedades rtl por usted, para pegarlas en su hoja de estilos rtl!

Aún si utiliza una herramienta de conversión, seguirá necesitando revisar y ajustar sus estilos rtl, porque el conversor podría haberse salteado algunas propiedades. Yo recomiendo el "rtl tester plugin", que agrega un elegante vínculo “Switch to rtl” en su barra administrativa. ¡Podrá ver sus estilos rtl en acción!

Agregar una captura de pantalla del Tema

Necesitará agregar una captura de pantalla que muestre de forma precisa la apariencia del Tema. Actualmente, el tamaño recomendado para las capturas de pantalla es 600 píxeles de ancho por 450 de alto. Deben estar guardados con el formato png y llamarse “screenshot.png”.

Diríjase al Codex de WordPress por los lineamientos más recientes en relación a las capturas de pantalla.

Hojas de estilo de ejemplo

Si desea ver una hoja de estilos de ejemplo que estiliza a la mayoría de los elementos del Tema con un diseño simple, descargue shape-sample-style.zip.

Para aplicar la hoja de estilo de ejemplo al Tema que acaba de crear, siga las instrucciones en el archivo readme incluido junto con la descarga.

Hoja de Estilos de Aprendizaje
La Hoja de Estilos de Aprendizaje es para aquellos que tienen un espíritu aventurero. Contiene todos los principales id o selectores de clases del Tema, vacíos y listos para ser rellenados por usted. Alguno de los selectores tienen un estilo básico aplicado, como punto de partida, pero la mayoría están vacíos. También se incluyen comentarios, como una guía de ayuda en el proceso. Descargue la Hoja de Estilos de Aprendizaje de aquí. Para instalarla, renómbrela como “style.css” y luego arrástrela al directorio raíz de su Tema, reemplazando su hoja de estilos actual.

Sumario de entradas

No hay comentarios.:

Publicar un comentario

Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.

JavierSam

Páginas