WordPress: crear y usar su propio estilo CSS en un tema

WordPress usa temas y plantillas para el diseño. Temas que ya están hechos con estilos CSS incorporados. Pero a menudo es posible que necesite más estilos para ayudar a que las cosas se destaquen. Como un título, por ejemplo. Es posible que desee aplicar un estilo diferente a un cierto título o encabezado, pero no tiene el estilo que desea. Esto a menudo es muy útil al crear páginas estáticas en WordPress. Para crear su propio estilo y usarlo, siga los pasos a continuación.

Creando su propio estilo CSS

Inicie sesión en su panel de administración WordPress . Luego haga clic en Presentación> Editor de temas . Cuando se cargue la página del editor de temas, busque la hoja style.css en esa página. Por lo general, cuando se carga la página del editor de temas, ya está en la página CSS Styles. Cuando la página de estilo CSS se desplaza hacia abajo hasta el final de la página. Aquí es donde agregará su nuevo estilo CSS .

Le daré un ejemplo de estilo pero, por supuesto, puede cambiarlo a lo que desee. Deberá escribir o copiar y pegar el siguiente código en su hoja de estilo CSS.

.Mytitle {
Color: #FF5500;
Color de fondo: transparente;
Font-Family: Verdana;
Font-Size: 14px;
Font-Weight: Bold;
}

Ese es su CSS básico. Puede agregar un borde para colocar una línea debajo de su título o elegir un color para el fondo en lugar de ser transparente. Las posibilidades son infinitas con CSS. También puede nombrarlo lo que le gusta, pero porción de un nombre fácil de recordar. Una vez que haya creado el estilo de la manera que lo desee, vaya a la parte inferior de su página WordPress y haga clic en Actualizar el archivo. Eso guarda su nuevo estilo CSS que acaba de crear.

READ  Los 8 motores de búsqueda más rápidos

usando su nuevo estilo CSS

Como dije antes, nuevos estilos CSS en WordPress < /b> a menudo se usan en páginas estáticas . Para aquellos que no saben qué es una página estática , déjame explicarte. A Página estática se usa en WordPress para darle páginas individuales .htm o .html. Dado que WordPress es un software de blog , es más fácil usar páginas estáticas para crear su página de inicio. También se usa para páginas como Acerca de mí , contáctame , faq , etc. Cuando creas una página de inicio, colocarás todo lo que tú Desea en la página de inicio en esa página en su administrador de WordPress. Entonces, con eso fuera del camino, sigamos adelante.

Suponiendo que ya tenga una página de inicio o algún tipo de “página”. En su panel de administración WordPress Haga clic en Manaye> Pages . Una lista de páginas que ha creado se extraerá. Haga clic en editar en una de sus páginas. Usaré mi código de inicio para darle un ejemplo de lo que estoy hablando mientras explico esto. Una vez que haya hecho clic en Editar y se carga en la página, haga clic en el pequeño icono HTML en la ventana donde escribe su contenido.

Eche un vistazo a mi Home Page para obtener una idea De lo que estoy hablando.

En mi página de inicio tengo cuatro estilos principales. Tengo encabezados, títulos, enlaces y contenido. Mi primer bit de código se ve así:

Noticias de reality TV

 

Kevin Concais es votado de American Idol

 

Kevin Convais se paró Los tres inferiores junto con Bucky Covington y Lisa Tucker. Desafortunadamente, Kevin Concais fue el que se fue el 22-06.

READ  Creación de botones de transferencia de imágenes en Dreamweaver usando CSS

 

Últimas resúmenes de reality tv

 

unan1mous 3-22-06

<< Br>

American Idol 3-22-06

 

Nasville Star 3-21-06

 

American Idol 3-21-06

Mirando mi código, verá que tengo tres clases; hpheaders , hptitle y boxtext . Si está familiarizado con CSS, sabe que la clase de enlace no se muestra y es por eso que no tengo cuatro clases para ir con mis cuatro estilos principales.

para usar el estilo que creó WordPress , decida dónde desea colocar ese estilo en el código. Permítanme mostrarle el código sin los estilos.

Noticias de la televisión de realidad

 

Kevin Concais es votado de American Idol

 

Kevin Concais Se paró en los tres últimos junto con Bucky Covington y Lisa Tucker. Desafortunadamente, Kevin Concais fue el que se fue el 22-06.

 

Últimas resúmenes de reality tv

 

unan1mous 3-22-06

<< Br>

American Idol 3-22-06

 

Nasville Star 3-21-06

 

American Idol 3-21-06

Así es como se verá el código sin ningún estilos. Entonces, digamos que queríamos agregar un estilo al título “Kevin Concais es votado de American Idol”

iríamos a la línea

Kevin Concais es votado de American Idol

Escriba al comienzo de la línea

Reemplazar Mytitle con lo que haya llamado su estilo CSS al comienzo de esta guía. Ahora su línea debería verse así:

Kevin Concais es votada de American Idol

Luego haga clic en Actualizar y guardar. Y eso es todo lo que hace para agregar su propio estilo.

Aquí hay algunos consejos.

Al crear su propio código en WordPress : </P >

 

  •  
  • Asegúrese de poner los soportes en el lugar correcto } {< /b>
  • No olvides colocar tu ; después de cada línea
  • No olvides tu . antes de la título de tu nuevo estilo.
  • No olvides tu : después de cada nombre
  •  
READ  Top 10 semillas de Minecraft

. mytitle {
color: #ff5500;
Color de fondo : Transparente ;
Font-Family: Verdana;
Font-Size: 14px;
Font-Weight: Bold;
}

Esto puede sonar loco para algunos, pero he pasado numerosas horas en WordPress frustrado porque no funcionaría Solo para darme cuenta de que olvidé A ; al final o olvidé cerrar un soporte. Muchas personas en estos días usan WordPress como un cms por lo que crear y usar sus propios estilos es útil. Si tiene alguna pregunta, no dude en enviarme un correo electrónico. WordPress puede ser muy difícil a veces, por lo que no tengo problemas para responder preguntas e intentar ayudar.

referencia: