Añadir CSS en el HTML de Wordpress

Manueh · 7 Ene 2017

Buenas!

Pues aunque quizá a muchos os parezca muy básico, yo no consigo encontrar una respuesta clara a este asunto.

Si quiero hacer un botón en CSS y añadirlo a mi página creada con Wordpress, escribo el código CSS (en mi caso con Simply CSS), y posteriormente pongo el nombre que le haya dado de esta forma

"<nombre></nombre>"

De esa manera siempre debería funcionar?

si tuviera que meter el mismo código en muchas partes del texto y de diferentes páginas, me toca escribir entre esas llaves cada vez que lo necesita, tantas veces como botones quiera añadir?

A ver si me he explicado bien. Creo que queda claro lo novatazo que soy!! ;P

Un saludo!
Manu

Frangy · 7 Ene 2017

No entiendo lo que quieres decir. Para hacer un botón en html yo lo haría asi.

<div class="cssboton"> Texto botón </div>

Donde cssboton es el nombre de la clase css que tendrás que introducir en el archivo style.css

Manueh · 7 Ene 2017

Me imagine que sería complicado de entender, por lo que me ha costado a mi hacer la consulta en google y el buscador del foro.

Cada vez que se quiere meter algo de CSS en una página de HTML hecha en Wordpress, entramos en la sección donde añadimos manualmente el HTML y es ahí donde me pierdo.
Dependiendo de en que página consultes, cada uno te comenta un método, por lo tanto si quiero hacer otra cosa en CSS como poner cierto color, tamaño y tipografía a un título en particular, no se como hacerlo.

Precisamente el nombre al que me refería es la clase css que en el style.css será:

Insertar CODE, HTML o PHP:

.nombreclase {
  parametros
}

Así lo pongo en Simple Custom CSS(me confundí antes con el nombre del plugin).
Lo jodido viene cuando ese código que he creado para hacer un botón o cualquier otra cosa, no se como insertarlo correctamente en cualquier parte de un texto que estoy formateando directamente en HTML(me gusta mas que el edito visual de Wordpress porque tengo control mas directo).

Se me entiende mas claro?
:witless:

Un saludo!
Manu

Daviiz · 7 Ene 2017

Si no he entendido mal, tienes la clase ya creada con el nombre .nombreclase y lo que quieres es traspasarlo a HTML dentro del editor de wordpress (en la pestaña de HTML) no?

Para ello solo tienes que poner dentro del html que quieras modificar el class="nombreclase".

Por ejemplo:

HTML:

<h1 class="nomreclase"> Hola qué tal </h1>

y lo mismo sería para cualquier etiqueta html. Siempre y cuando hayas creado la clase antes en la hoja de CSS.

GustavoVM · 7 Ene 2017

claro mismo botón lo puedes añadir en miles de páginas y con la clase puedes cambiar el aspecto cuando gustes

por ejemplo si quieres añadir alguna info en la cabecera

en panel/editor/header.php

<div class="promo"> aquí tu contenido </div>

y en css (en el archivo styles.css)

.promo {}

si tu archivo styles está sobrecargada puedes usar la opción de ingresar a apariencia/personalizar/agregar style o algo así y ahí lo pones

Misael Alemán · 7 Ene 2017

Solo lo escribes una vez en la hoja de estilos (archivo style.css), luego haces el llamado a esa clase desde cualquier parte del theme, las veces que quieras.

mrguemez · 7 Ene 2017

Hola, no estoy entendiendo muy bien pero voy a explicarte como funciona.

Primero, hay que entenderlo que HTML y CSS son dos cosas diferentes, que van unidas, pero diferentes.

HTML es el lenguaje de marcado y el CSS el lenguaje de estilo. Es decir, con HTML vas a CREAR y con CSS vas a dar ESTILO. Qué quieres crear? un botón? un formulario? HTML.

Ejemplo:

Insertar CODE, HTML o PHP:

<div class="boton">SOY UN BOTON</div>

Para agregar HTML a Wordpress tienes dos opciones:
1. Editar los archivos php del theme. (index.php, home.php, single.php, etc...)
2. A través del panel de administración de Wordpress.

Una vez creado el botón, formulario, etc... le puedes dar el estilo:

Insertar CODE, HTML o PHP:

.boton{
     width:100%;
     border:1px solid black
     font-size:16px;
}

Espero que te haya podido ayudar, cualquier cosa no dudes en escribirme.

Sonyx18 · 7 Ene 2017

Esto va en style.css (Por ejemplo):

Insertar CODE, HTML o PHP:

.btn {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  color: #ffffff;
  font-size: 14px;
  padding: 10px;
  background: #3498db;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  text-decoration: none;
}

Y esto va en cualquier zona del sitio donde quieres el botón:

HTML:

<a href="http://google.com" class="btn">DESCARGAR</a>

NOTA: Si no es para dirigir a una url utiliza la etiqueta span.

Quedaría algo así: DEMO

Manueh · 14 Ene 2017

Wow!!!!

Muchas gracias a todos!!!

Ahora no me queda ninguna duda.

Muchas gracias, compis beteros!!

Manu

erickdmc13 · 29 Ene 2017

Veo que estas claro, pero quería indicar, capas le sirve a alguien
Actualmentre trabajando con css puedes hacer de dos maneras esto, 1, como indican todos los betas con clases y atributos id

HTML:

.btn {  -webkit-border-radius: 5;  -moz-border-radius: 5;  border-radius: 5px;  color: #ffffff;  font-size: 14px;  padding: 10px;  background: #3498db;  text-decoration: none;}.btn:hover {  background: #3cb0fd;  text-decoration: none;}

<a href="http://google.com" class="btn">DESCARGAR</a>

y otra que puedes usar las etiquetas personalizadas como en tu caso seria "nombre" se podria hacer

HTML:

.btn {  -webkit-border-radius: 5;  -moz-border-radius: 5;  border-radius: 5px;  color: #ffffff;  font-size: 14px;  padding: 10px;  background: #3498db;  text-decoration: none;}
.btn nombre { // propiedades exclusivas de texto mas no de atributo a}.btn:hover {  background: #3cb0fd;  text-decoration: none;}

<a href="http://google.com" class="btn"><nombre>DESCARGAR</nombre></a>

Añadir CSS en el HTML de Wordpress

Manueh

Frangy

Manueh

Daviiz

GustavoVM

Misael Alemán

mrguemez

Sonyx18

Manueh

erickdmc13

Temas similares