¿Cómo modificar el padding-top en código CSS de un theme?

  • Autor Autor naismith
  • Fecha de inicio Fecha de inicio
naismith

naismith

Gamma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Hola compañeros.

Tengo una duda para introducir una modificación en la sección de código CSS de un theme que estoy preparando.
El codigo es este y quiero modificar el valor a: padding-top: 10px;

css_err_01.webp

En el campo CSS del theme se que tengo que meter el código para modificarlo pero con este caso no me aclaro.... he probado algo así pero no funciona:

Insertar CODE, HTML o PHP:
fusion-fullwidth fullwidth-box fusion-blend-mode nonhundred-percent-fullwidth {
    padding-top: 10px;
}

Si alguien me puede iluminar se lo agradeceria porque por mucho que leo y pruebo no caigo, seguro que es una tonteria.

Gracias.
 
naismith,

No hace falta que actúes sobre todas las clases diferentes de ese elemento. Modificando una de ellas ya te debería funcionar.

Lo más seguro es que la clase última de ese elemento sea exclusiva del mismo así que algo así te debería funcionar:

Insertar CODE, HTML o PHP:
.nonhundred-percent-fullwidth {
padding-top: 10px;
}

Si así no te funciona entonces el código que tú estás escribiendo carga antes que el código original y éste sobreescribe el tuyo. Si lo estás cargando en la misma hoja de estilo entonces coloca el nuevo código al final del todo, si no estás seguro de si lo estás colocando en la misma hoja de estilo entonces lo puedes poner así para sobreescribir el código que no deseas allá donde se encuentre:

Insertar CODE, HTML o PHP:
.nonhundred-percent-fullwidth {
padding-top: 10px!important;
}

Si sólo deseas actuar en ese div en concreto y con todas esas clases en concreto entonces también lo puedes hacer así, pero no te recomiendo cargar código innecesario si de la otra forma te funciona bien sin afectar a otros elementos de la página:

Insertar CODE, HTML o PHP:
div.fusion-fullwidth.fullwidth-box.fusion-blend-mode.nonhundred-percent-fullwidth {
padding-top: 10px!important;
}
 
Última edición:
Hola piano.

La segunda me ha funcionado perfecto.

Ahora entiendo mejor como funciona ese punto, me será de utilidad en un futuro.

Muchas gracias por tu ayuda! :encouragement:
 
Hola piano.

La segunda me ha funcionado perfecto.

Ahora entiendo mejor como funciona ese punto, me será de utilidad en un futuro.

Muchas gracias por tu ayuda! :encouragement:

De nada compi, ha sido un placer.
El "!important" es un modificador muy útil en CSS pero no debes abusar de él porque estás cargando la hoja de estilo con código innecesario. Cargas el mismo código dos veces, primero el que no vale y luego el que vale. Acostúmbrate, siempre que te sea posible, a modificar el código original en lugar de meter un "!important" por muy cómodo y rápido que pueda resultar. :encouragement:
 
Ok, queda claro.

Lo tendre en cuenta y por ahora lo usaré así pero luego en producción ya lo modificaré en código.

Gracias.
 
Atrás
Arriba