Como mudar a cor de elementos em template de WordPress

alexsaporta · 05/02/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 · 05/02/2016

Hola buenas,

¿en el tema tienes apartado para meter css personalizado?

alexsaporta · 05/02/2016

Si tengo:

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

KennySanchez · 05/02/2016

alexsaporta disse:
Si tengo:

Ver o anexo 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 · 05/02/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 · 05/02/2016

drummerkick disse:
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 · 05/02/2016

alexsaporta disse:
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 · 05/02/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 · 08/02/2016

drummerkick disse:
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 · 08/02/2016

alexsaporta disse:
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 o anexo 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 · 08/02/2016

drummerkick disse:
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 · 08/02/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 · 09/02/2016

drummerkick disse:
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/02/2016

Alguna solución a ello???

Pepe207 · 12/02/2016

ramonjosegn disse:
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/02/2016

Pepe207 disse:
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/02/2016

ramonjosegn disse:
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/02/2016

Pepe207 disse:
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/02/2016

ramonjosegn disse:
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/02/2016

Pepe207 disse:
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...

Como mudar a cor de elementos em template de WordPress

alexsaporta

drummerkick

alexsaporta

KennySanchez

drummerkick

alexsaporta

drummerkick

ramonjosegn

alexsaporta

drummerkick

alexsaporta

drummerkick

alexsaporta

alexsaporta

Pepe207

ramonjosegn

Pepe207

ramonjosegn

Pepe207

ramonjosegn

Tópicos similares