Cómo cambiar el color de elementos en plantilla de WordPress

alexsaporta · 5 Feb 2016

Holaaaa!!!! Tengo un problema con una plantilla de wordpress e imagino que se soluciona con css pero no se como actuar... la web es: Aquilesia - Aquilesia y quiero modificar el color de fondo que hay en los 3 iconos que hay debajo del slider, así como el fondo que aparece en los logos que hay debajo de los 3 iconos (para estos últimos en la página hay metida una tabla y por defecto viene el fondo así, he intentado modificarlo añadiendo estilos a la tabla pero no se modifica...) Espero vuestra ayuda amigos! Muchas gracias 🙂

drummerkick · 5 Feb 2016

Hola buenas,

¿en el tema tienes apartado para meter css personalizado?

alexsaporta · 5 Feb 2016

Si tengo:

Captura de pantalla 2016-02-05 a las 10.51.32.webp

KennySanchez · 5 Feb 2016

alexsaporta dijo:
Si tengo:

Ver el archivo adjunto 70716

Puedes hacerlo por el editor que te da el theme style.css y alli buscas el slider cambias el color y listo por que como te dice drumm es un poco mas complicado, diviertete buscando codigos hay en el style.css :welcoming:

drummerkick · 5 Feb 2016

Le metes esto en css personalizado:

para iconos
.container.marketing { background-color:tucolor; }

para los logos
#page-97 tr:nth-child(odd) td , #page-97 tr:nth-child(odd) th { background-color:tucolor; }

cambia "tucolor" por un valor hexadecimal del color que quieras:

alexsaporta · 5 Feb 2016

drummerkick dijo:
Le metes esto en css personalizado:

para iconos
.container.marketing { background-color:tucolor; }

para los logos
#page-97 tr:nth-child(odd) td , #page-97 tr:nth-child(odd) th { background-color:tucolor; }

cambia "tucolor" por un valor hexadecimal del color que quieras:

Gracias amigo, eso me soluciona lo de la tabla pero los iconos siguen igual. Por cierto...como se el número de la página si quiero editar más tablas como esa en otras páginas? Gracias de nuevo!

drummerkick · 5 Feb 2016

alexsaporta dijo:
Gracias amigo, eso me soluciona lo de la tabla pero los iconos siguen igual. Por cierto...como se el número de la página si quiero editar más tablas como esa en otras páginas? Gracias de nuevo!

Si lo quieres cambiar es el icono naranja, con photoshop ya que es un png. Si no es así, manda un pantallazo de lo que quieres cambiar.

Para averiguar el id o clase del elemento que quieres cambiar:
Google Chrome: Inspeccionar un elemento con el cÃ³digo fuente

ramonjosegn · 5 Feb 2016

Para cambiar los íconos tienes que ir a la ubicación y reemplazarlos, por CSS me parece que no te va a funcionar bien

Por ejemplo

PHP:

/wp-content/plugins/floating-social-media-icon/images/themes/20/twitter.png

y sobreescribirlo (pero cuando actualicen el plugin tendrás que volver a sobreescribirlo)

alexsaporta · 8 Feb 2016

drummerkick dijo:
Si lo quieres cambiar es el icono naranja, con photoshop ya que es un png. Si no es así, manda un pantallazo de lo que quieres cambiar.

Para averiguar el id o clase del elemento que quieres cambiar:
Google Chrome: Inspeccionar un elemento con el cÃ³digo fuente

El icono es tan sólo la imagen principal de la página a la que enlaza. En realidad lo que quiero cambiar exactamente es el borde grisaceo que sale alrededor del icono:

Captura de pantalla 2016-02-08 a las 14.02.40.webp

drummerkick · 8 Feb 2016

alexsaporta dijo:
El icono es tan sólo la imagen principal de la página a la que enlaza. En realidad lo que quiero cambiar exactamente es el borde grisaceo que sale alrededor del icono:

Ver el archivo adjunto 70961

Photoshop es la solución, ya que al pasar el ratón por encima se produce un aumento del tamaño del 30% que es lo que permite ver la sombra.

alexsaporta · 8 Feb 2016

drummerkick dijo:
Photoshop es la solución, ya que al pasar el ratón por encima se produce un aumento del tamaño del 30% que es lo que permite ver la sombra.

No entiendo lo que quieres decir... por mucho que utilice photoshop el elemento gris seguirá saliendo. Si te refieres a la imagen ya he utilizado imágenes de todos los tamaños y sigue saliendo igual, no es que se amplie la imagen sino que se abre el circulo y muestra más parte de la imagen. Lo que quiero es que no salga lo griso que salga blanco en su defecto, quizás me he explicado mal. Si no se puede quitar quizás se puede poner transparente para que no se vea pero no se dónde modificarlo...

drummerkick · 8 Feb 2016

Mete ésto en css del tema para que no agrande el icono:
.widget-front.hover .round-div {-webkit-transform:scale(1)!important;-ms-transform:scale(1)!important;transform:scale(1)!important;}

o borra esto de tc-scripts.js para que le meta la clase .hover

// Add hover class on front widgets
$(".widget-front, article").hover(
function () {
$(this).addClass( 'hover' );
},
function () {
$(this).removeClass( 'hover' );
});

alexsaporta · 9 Feb 2016

drummerkick dijo:
Mete ésto en css del tema para que no agrande el icono:
.widget-front.hover .round-div {-webkit-transform:scale(1)!important;-ms-transform:scale(1)!important;transform:scale(1)!important;}

o borra esto de tc-scripts.js para que le meta la clase .hover

// Add hover class on front widgets
$(".widget-front, article").hover(
function () {
$(this).addClass( 'hover' );
},
function () {
$(this).removeClass( 'hover' );
});

Vale!! Parece que vamos adelantando algo ejejeje 🙂 de momento hemos conseguido que no agrande el icono añadiendo el codigo al css pero falta que el color que envuelta el icono sea blanco o en su defecto transparente (sería lo ideal).

- - - Actualizado - - -

Vale!! Parece que vamos adelantando algo ejejeje de momento hemos conseguido que no agrande el icono añadiendo el codigo al css pero falta que el color que envuelta el icono sea blanco o en su defecto transparente (sería lo ideal).

alexsaporta · 12 Feb 2016

Alguna solución a ello???

Pepe207 · 12 Feb 2016

ramonjosegn dijo:
Para cambiar los íconos tienes que ir a la ubicación y reemplazarlos, por CSS me parece que no te va a funcionar bien

Por ejemplo

PHP:

/wp-content/plugins/floating-social-media-icon/images/themes/20/twitter.png

y sobreescribirlo (pero cuando actualicen el plugin tendrás que volver a sobreescribirlo)

Si fuer un Child Theme, no tendría porque,no?

ramonjosegn · 12 Feb 2016

Pepe207 dijo:
Si fuer un Child Theme, no tendría porque,no?

Claro puedes usar un child theme pero si cambian el código te van a fastidiar... a los programadores nunca se sabe por dónde salen con sus ideas a la hora de cambiar código...

Pepe207 · 12 Feb 2016

ramonjosegn dijo:
Claro puedes usar un child theme pero si cambian el código te van a fastidiar... a los programadores nunca se sabe por dónde salen con sus ideas a la hora de cambiar código...

Pues yo entendia que con los CT eso no podía pasar, que para eso servían.

ramonjosegn · 12 Feb 2016

Pepe207 dijo:
Pues yo entendia que con los CT eso no podía pasar, que para eso servían.

Pues no sé hasta qué punto, no soy programador, ni nunca he conseguido que me funcione uno de esos (ni los que ya están prediseñados).

Pepe207 · 12 Feb 2016

ramonjosegn dijo:
Pues no sé hasta qué punto, no soy programador, ni nunca he conseguido que me funcione uno de esos (ni los que ya están prediseñados).

Ufff trabajar en wordpress sin childtheme es muy arriesgado.

ramonjosegn · 12 Feb 2016

Pepe207 dijo:
Ufff trabajar en wordpress sin childtheme es muy arriesgado.

Yo los cambios sólo los hago en el CSS y ya bastante dolores de cabeza me da...

Cómo cambiar el color de elementos en plantilla de WordPress

alexsaporta

drummerkick

alexsaporta

KennySanchez

drummerkick

alexsaporta

drummerkick

ramonjosegn

alexsaporta

drummerkick

alexsaporta

drummerkick

alexsaporta

alexsaporta

Pepe207

ramonjosegn

Pepe207

ramonjosegn

Pepe207

ramonjosegn

Temas similares