Share
En este tutorial, veremos cómo hacer cinco personalizaciones rápidas de CSS que hacen que su blog se destaque. Incluso si no sabes qué es CSS, podrás seguir las instrucciones y cambiar el aspecto estándar de tu tema.
Si aún no sabe cómo, le mostraré cómo encontrar y configurar estas cosas. De esa manera, puede editar de forma segura el diseño de su sitio web o blog. Si su sitio web ya está activo y está obteniendo tráfico, puede ser una buena idea usar un complemento "de mantenimiento" para que los visitantes no se confundan con el diseño siempre cambiante..
Otra alternativa sería configurar un entorno de desarrollo en su máquina local y luego cargar los cambios en el servidor una vez que se hayan completado..
En última instancia, depende de ti.
Algunos temas ya tienen la opción de anular partes de la hoja de estilo CSS, lo que le permite crear su propio diseño sin instalar complementos adicionales o crear un tema secundario. Esto se puede encontrar bajo la Apariencia> Opciones de tema menús.
A veces se encuentra en una de las subcategorías, pero busque un cuadro que tenga "Editar CSS" como título.
Si su tema no tiene tal opción, el complemento Jetpack viene con una función de editor de CSS, pero para usarlo, debe conectar el complemento con su cuenta de WordPress.com, o crear una nueva.
Guarda tus revisiones, lo que hace que sea más fácil volver a un diseño anterior si sientes que has cometido un error en algún lugar de la carretera, pero si no estás interesado en las otras funciones del plugin Jetpack, una alternativa más rápida sería la alternativa. complemento CSS simple y personalizado.
Una vez que haya instalado y activado el complemento, puede editar el css desde Apariencia> css personalizado. (En Jetpack, se encuentra en la opción de menú Apariencia> Editar CSS).
Si está preparado para realizar cambios extensivos, la mejor idea es configurar un tema secundario. El problema con la personalización a través de la anulación es que obtiene líneas de código superfluas, y para una edición extensa puede hacer que el blog o el sitio web se carguen más lentamente..
Además, es mucho más fácil hacer un seguimiento de las cosas cuando editas el código en un solo lugar. Puedes usar un plugin como Orbisius Child Theme Creator o duplicar tema para crear instantáneamente un tema secundario.
Alternativamente, puede simplemente crear una nueva carpeta de temas, llamarla El nombre del tema hijo, cree style.css en la nueva carpeta de temas e importe la hoja de estilos principal. (THEMENAME debe ser reemplazado por el tema que desea editar).
Accentsconagua
@import url ("... /THEMENAME/style.css"); Para obtener más información sobre cómo crear un tema infantil, puede consultar nuestra guía. Ahora que ya está todo listo, es hora de comenzar a ensuciarnos las manos. Vamos a comenzar con algo muy básico: cambiar el fondo de su blog / sitio web. También te mostraré cómo agregar una imagen de fondo con estilo.
Para cambiar el fondo de su sitio web, primero debe familiarizarse con el estilo del tema. Es el color de fondo simplemente debajo del cuerpo, o está integrado en su propio marco?
Algunos temas no son tan intuitivos como otros, por lo tanto, si el que está utilizando actualmente es inteligible, es posible que desee cambiar a un tema diferente antes de comenzar a editar. (El que estoy usando en el ejemplo es el tema gratuito de Catchbox y un tema de inicio muy común es veintiuno).
Con la mayoría de los temas que no son de ancho completo, el color de fondo es simplemente debajo del cuerpo. Y anularlo es bastante simple..
cuerpo color de fondo: # 477C67;
Puedes usar el selector de color HTML de W3Schools para obtener tus colores, o instalar una extensión de Chrome, un complemento aFirefox o un complemento de WordPress para acelerar las cosas cuando estás editando sobre la marcha..
Elegí un color de fondo verde azulado profundo: # 477C67:
Si este fragmento de código no cambia el color de fondo de tu blog, es probable que utilice contenedores vacíos estilizados para llenar el fondo..
Si desea establecer una imagen como fondo, primero cargue la imagen. Asegúrese de que sea de alta resolución, de lo contrario no se verá muy bien. Luego copia la URL. Solo necesitas la parte después del blog, así que si subiste el archivo a través de WordPress, entonces la ruta debería verse así: "wp-content / uploads / 2014/01 / IMAGE.jpg"
cuerpo fondo: url (ubicación / img.jpg) centro central fijo sin repetición; -webkit-background-size: cubierta; -moz-background-size: cubierta; -o-fondo-tamaño: cubierta; tamaño de fondo: cubierta;
El resultado final debe verse algo como esto:
Lo bueno es que la imagen permanece estática incluso cuando se desplaza por la página. Para fotos geniales que puede usar sin dar crédito (aunque probablemente sea bienvenido), puede visitar unsplash.com.
A veces te topas con un gran tema. Parece increíble, pero solo hay un problema. La fuente es pequeña y gris, por lo que es casi ilegible. Pero no te preocupes, puedes cambiar esto en un simple paso..
cuerpo font-size: 16px; color: # 000
Agregue este breve fragmento de código al CSS personalizado, y solucionará el problema. (Póngalo después del código del fondo si cambió el suyo).
Un buen tamaño para la fuente estándar de su sitio web o blog es de 14-16 píxeles. Evite los 12 píxeles que eran obligatorios en, por ejemplo, los informes escolares, ya que su principal objetivo no es ahorrar papel. Quieres que tu contenido respire y que sea más legible. Si crees que la fuente estándar de tu tema no es profesional, puedes agregar esta línea:
body font-family: Arial, Helvetica, sans-serif;
Haciendo que todo se vea así:
body font-family: Arial, Helvetica, sans-serif; tamaño de fuente: 16px; color: # 000
Si desea cambiar el color de los enlaces, puede hacerlo con bastante facilidad. Todo lo que tienes que hacer es usar el parámetro para los enlaces en css "a" y luego cambiar el color a lo que quieras.
a color: # BA2323;
Decidí ir por un rojo (# BA2323) y terminó pareciéndose a esto.
Hay un par de opciones más sobre cómo desea estilizar sus enlaces. Por ejemplo, puedes decidir cómo quieres que reaccione el enlace cuando alguien se cierne sobre él. El más común es el subrayado, pero puede hacer que cambie su color primario o de fondo..
a: hover color: # 222; color de fondo: # BA2323;
Por ejemplo, cambiando el texto a gris y cambiando el color de fondo al color de texto habitual. A continuación, puede cambiar el estilo de los enlaces visitados. Lo más común es que haya un cambio de color, pero también puede usar cualquiera de los cambios anteriores..
a: visitado color: # 004A4A;
El título de una publicación suele estar en un elemento h1, y el subtítulo utilizado en las publicaciones suele estar en un elemento h2 (aunque esto es algo que usted elige al crear una publicación). Pero si su tema da un estilo específico al color de los títulos de las publicaciones, cambiar el estilo de las etiquetas h1 no ayudará. Así que tienes que averiguar si el tema que usas hace esto o no.
Puede verificar si su tema usa un estilo específico para los títulos de las publicaciones abriendo la fuente de la página y buscando (presione Control-f) para "título de la publicación". Si los resultados muestran ""entonces no le da estilo a h1, debe proporcionar un estilo en el atributo" some-style ".
Alternativamente, si va a realizar varios cambios, puede instalar una extensión de navegador que le muestre el estilo CSS del texto seleccionado. Normalmente será un "título de entrada" ya que es el estándar para el desarrollo de WordPress.
Para ello, ve a la Editor bajo la Apariencia menú. y busca "algo de estilo". Como mencioné, ese estilo suele ser "título de entrada". A continuación, vea qué líneas necesita anular. A veces, hay un estilo específico para el título vinculado, por lo que es posible que también deba cambiarlo. Esto se muestra como "h1 a " o "algún estilo a ".
Para editar el color y el tamaño de mi titular, tendría que agregar estas líneas:
.entry-title color: #WANTEDCOLOR; tamaño de letra: WANTEDSIZEpx; .entry-title a color: #WANTEDCOLOR;
Elegí un azul claro (# 5CBDBD).
Tenga en cuenta que estoy usando colores bastante evidentes para que quede claro qué cambios he hecho en el tema. Probablemente quieras ser un poco más sutil y encontrar un mejor esquema de colores..
Si desea editar el estilo de los titulares que utiliza en su contenido, en lugar de .algo de estilo, abres con h1 o h2 o h3 .
Si hay algunas esquinas molestas que deberían redondearse, o algunas que se han redondeado demasiado, aquí hay una solución rápida..
Localice el contenedor en el estilo de la pregunta en la hoja de estilo original. (Abra la hoja de estilo original dentro del tablero de WordPress, o en un archivo de texto y luego busque un texto que sea único para el contenedor que desea editar. O puede usar un complemento). .widget, y el contenedor de correos está generalmente bajo contenido.
El código a utilizar aquí es:
-moz-border-radius: SIZEpx; radio del borde: SIZEpx;
Si desea anular una esquina curva actual y girarla, simplemente configure el tamaño en 0. Si desea ver cómo se ven las curvas para un contenedor en particular, comience con 5 y vea cómo se ve..
En general, puede buscar en la página si desea editar las esquinas de toda la página. Generalmente puedes encontrar el contenedor de contenido buscando .hentry Si quieres editar las esquinas del contenido. Es posible que tenga que editar el encabezado y el pie de página por separado. O encuentra el widget buscando el widget.
Una de las formas más fáciles de configurar una combinación de colores geniales para sus widgets es tener un color de fondo diferente para el widget en sí que el título del widget. Para ello, identifique la clase de estilo del título del widget. (Si no recuerda cómo, copie el título de un widget y búsquelo en la fuente de la página. En la h1 leyenda alrededor del título, la clase se revela.)
Tiende a ser simplemente título del widget. Y si desea cambiar el color de fondo del propio widget, busque el estilo para el widget, que generalmente está debajo de .widget. Luego elige un color y agrega este código a su tema css o hijo personalizado:
.widget fondo: #COLOR; .widget-title background-color: #COLOR;
Elegí naranja y verde azulado por ninguna razón en particular. Como puede ver, si no hay título, no incluye la parte del título de la combinación de colores, por lo que si desea coherencia, debe agregar títulos a todos sus widgets..
Si bien al principio puede parecer increíblemente desalentador comenzar a jugar con el código de su sitio web, la mayoría de las hojas de estilo son lo suficientemente intuitivas, de modo que si tiene conocimientos básicos de la funcionalidad de Wordpress, podrá mantenerse al tanto.
Por supuesto, con esto apenas hemos raspado la superficie, pero usted sabe lo suficiente como para hacer algunas ediciones para mejor..
