Imágenes en diseños temáticos niño wordpress

Muchos temas utilizan imágenes para añadir toques agradables a un diseño de WordPress. Típicamente, se añaden estas imágenes a la imágenes directorio dentro del tema. Del mismo modo que un tema padre puede hacer referencia a las imágenes en su style.css archivo, temas a su hijo puede tener su propio directorio de imágenes. Los siguientes son ejemplos de cómo se pueden utilizar estas imágenes.

Video: 5 Temas para Decorar tu Baby Shower HD

Cómo utilizar una imagen de temática infantil en una hoja de estilo temático infantil

La inclusión de una imagen Tema del niño en una hoja de estilo temático infantil es común. Para ello, basta con añadir la nueva imagen para el niño el tema de imágenes directorio y se refieren a ella en el tema de los niños style.css archivo. Para tener una idea de la mecánica de este proceso, siga estos pasos:

1. Crear un imágenes directorio dentro del directorio del tema de los niños / wp-content / themes / twentythirteen-hijo / images.

2. Añadir una imagen para el directorio.

3. Añadir el estilo necesario para el niño el tema de style.css presentar, de la siguiente manera:

/ * Nombre del Tema: TwentyThirteen ChildDescription: mi hijo fabulosa themeAuthor: Lisa Sabin-WilsonVersion: url twentythirteen * / @ import (` ../ twentythirteen / style.css `) - body {background:: 1.0Template url (` images / cuerpo -bg.jpg `) repetir-x-}

Con una actualización rápida del sitio, que ahora tiene un nuevo fondo. Se puede ver cómo el fondo cambió de blanco normal de una imagen de rayas de color canela blanco y a.

Video: Ambientes amigables con diseños e imágenes divertidas

Cómo utilizar una imagen de un tema principal en una hoja de estilo temático infantil

imágenes del tema del niño son aceptables para la mayoría de los propósitos. A veces, sin embargo, es mejor usar imágenes suministradas por el tema de los padres. Se podía copiar la carpeta de la imagen el tema de los padres, con todas sus imágenes, con el tema niño, pero eso sería evitar que el tema de niño de que coincida con el tema de los padres si la imagen el tema de los padres cambia nunca, como por ejemplo después de una actualización.

Afortunadamente, puede hacer referencia a una imagen en el tema de los padres con el @importar gobernar la misma manera se puede hacer referencia al tema de los padres style.css archivo.

En el área de menú de navegación del diseño Veinte Trece, un icono de lupa aparece en el lado derecho que designa el área de búsqueda - los usuarios hacen clic en él para mostrar el buscador. Este es un tema de imagen de los padres.

Video: Mas de 3,800 fotos con ideas de decoraciones de fiestas infantiles

En este ejemplo, se agrega el icono de la lupa delante del título de la entrada. Debido a que la imagen del icono ya existe dentro del tema de los padres, simplemente puede añadir una personalización a la de niños del tema de style.css presentar para realizar este cambio, de la siguiente manera:

/ * Nombre del Tema: TwentyThirteen ChildDescription: mi hijo fabulosa themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentythirteen url * / @ import (` ../ twentythirteen / style.css `) - entrada-título {background:. Url (` ../twentythirteen/images/search-icon.jpg `) a la izquierda centro no-repeat-padding-left: 30px;}

Guarde el archivo y actualizar su sitio web para mostrar la lupa antes de que el título de la entrada.

Cómo utilizar una imagen de temática infantil en una hoja de estilo tema de los padres

En los ejemplos anteriores, usted puede preguntarse si la sustitución de una imagen utilizada en hoja de estilo de los padres con los que se encuentra en el directorio del tema de los niños es posible. Si lo hace, sería necesario un cambio en stylesheet- del tema de los padres la idea detrás de un tema de los niños es evitar cambios en la matriz, por lo que no, eso no es posible.

Sin embargo, puede anular la regla del tema de los padres para hacer referencia a la nueva imagen del tema de los niños por la simple creación de una regla primordial en la hoja de estilo del tema de los niños que apunta a la nueva imagen.

Por encima, se coloca el icono de la lupa a la izquierda del título de la entrada. Tome un paso que ULTERIORES el icono de lupa junto al título de la entrada es pequeña. Se puede hacer mejor con un icono más grande. Para este ejemplo, utilizar una diferentes icono de la lupa que se puede descargar. derecha, haga clic en la imagen en su navegador para guardarlo en su computadora local.

Después de agregar la imagen deseada en el directorio de imágenes de su hijo como tema de aumento-glass.jpg, el seguimiento style.css archivo reemplaza el icono de la lupa del tema de los padres con el nuevo que acaba de descargar:

/ * Nombre del Tema: TwentyThirteen ChildDescription: mi hijo fabulosa themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentythirteen url * / @ import (` ../ twentythirteen / style.css`) - entrada-título {background:. Url (imágenes /magnifying-glass.jpg) a la izquierda centro no-repeat-padding-left: 50px;}

Observe cómo se modifican algunas reglas más allá de sólo el fondo para anular el estilo el tema de los padres que no funciona bien con el nuevo icono, como la adición de la padding-left: 50px - que se pone en marcha para facilitar el espacio correcto para la lente de aumento. Ahora su tema niño muestra la nueva lupa a la izquierda del título de la entrada. El nuevo aspecto es bastante agradable si usted me pregunta.

No se puede reemplazar directamente imágenes del tema de los padres. Más bien, debe proporcionar una nueva imagen en el tema de los niños y anular el estilo del padre para referirse a esta nueva imagen.