Home › Forums › WoodMart support forum › Info Boxes With Hover y social icons
Info Boxes With Hover y social icons
- This topic has 22 replies, 3 voices, and was last updated 3 years, 7 months ago by Artem Temos.
-
AuthorPosts
-
March 23, 2021 at 2:18 am #275607
DelopWebParticipantHola,
1.- Quiero poner un infobox como en la página https://woodmart.xtemos.com/blog/woodmart_element/info-boxes-with-hover/, pero al incluir una imagen en svg no realiza el cambio de color a blanco, como incluyo el relleno al sgv para que realice el hover con cualquier icono?. Hay algún plugin que funcione para este tema? Incluyo imagen images-info-box.jpg
2.- Quiero colocar el nombre de la red social a los iconos correspondientes colocados en listado, como se hace?Actualmente la web está en construcción y no se puede visualizar fuera del servidor.
Muchas gracias.
Attachments:
You must be logged in to view attached files.March 23, 2021 at 12:54 pm #275752
Elise NoromitMemberHello,
find
style="fill:#FF7800;"
in the path tag and replace the color as per your needs https://gyazo.com/3eedd0661e5ec290b914da71d8919186Then you will need to re-upload your icons in the WordPress Dashboard.
You can configure the icons in the Theme Settings > Social Profiles.
Best Regards
March 24, 2021 at 8:23 pm #276108
DelopWebParticipantHello,
1.- En Theme Settings > Social Profiles no aparece ningún campo de texto para incluir el nombre de la red social que quiero incluir al lado del icono “image social-icons-texts”. Solo aparece el campo de texto en el apartado LINKS TO SOCIAL PROFILES donde debe ir el link a la red social, también debe de ir el texto? Y en ese caso, como debo incluirlo “image enlaces-perfiles-sociales”.
2.- Como cambio el orden iconos de las redes sociales? “image social-icons-texts”
Muchas gracias. Saludos.
Attachments:
You must be logged in to view attached files.March 25, 2021 at 8:58 am #276205
Elise NoromitMemberHello,
Unfortunately, there is no option to add the text or change the order.
You can copy this file in the child theme
wp-content/themes/woodmart/inc/shortcodes/social.php
find this function http://prntscr.com/10uv959 and change it as per your needs.If you have any questions please feel free to contact us.
Best Regards
March 26, 2021 at 12:55 am #276390
DelopWebParticipantHola,
1.- Espero que no vaya a crearse alguna incompatibilidad al tocar la programación y deje de funcionar el tema con las modificaciones que deseo incorporar. Al modificar la programación también se modificaría los iconos que tengo en el head?(imagen social-icons-head.jpg)
2.- Sigo sin entender el efecto de rollover del color del objeto a blanco en los svg. La imagen que he tomado como referencia es de la dirección “https://lindsaycolchon.com/wp-content/uploads/2021/03/wood-layout-green-chair-1-1-2.svg”, el código del svg en el fill es el color verde y tendría que ser blanco, que es el color de relleno al hacer el rollover cuando se pasa encima del botón, no aparece en la programación el relleno #FFFFFF. No será que es una propiedad css que transforma la imagen y el texto a blanco?
He cambiado el color fill de la imagen y me funciona (imagenes blue-chair.jpg y white-chair.jpg), pero de donde viene el #FFFFFF al hacer el rollover? Tiene algo que ver el id=”chair-green” o el id=”wood-layout-green-chair-1″?
3.- Hay alguna librería de iconos svg compatibles con WordPress y el tema Woodmart?
Muchas gracias. Saludos.
Attachments:
You must be logged in to view attached files.March 26, 2021 at 1:17 pm #276553
Elise NoromitMemberHello,
Everything depends on a developer’s qualification. I recommend you to add all the changes into the child theme and make a full backup o the site each time you amend anything considerably.
Our theme SVG was created as a demo for a certain purpose. We do not have the tutorials on how to create and change SVG, please contact a designer or try to find the appropriate tutorials.
If you have any questions please feel free to contact us.
Best Regards
March 29, 2021 at 8:47 am #277160
DelopWebParticipantBuenos días,
Hemos decidido no tocar nada de programación porque no sabemos si funcionará al insertar nuestro propio código en el tema y se crearía algún desajuste, ya que no está desarrollado por nosotros, de todas formas, nos valdría al menos poder tener activo el Alt en los iconos de redes sociales, o eso tampoco es posible? Existe algún plugin compatible 100% con el tema WoodMart para poder manejar los iconos de redes sociales a nuestro antojo?
Resulta que el infobox que queremos adaptar a nuestras necesidades está en “WoodMart templates library”, en concreto es la plantilla “Info boxes with hover” que casualmente utiliza imágenes .svg, no se pueden adaptar esa plantilla al tipo de diseño y negocio del que se quiera personalizar? Cuando se dice plantilla, significa que es un modelo o un patrón del cual se pueden crear nuevos diseños, entonces, se tendría que poder realizar cualquier cambio, ya sea de los iconos y los textos, sin problema. Tendría que funcionar perfectamente el efecto de cambio de color al pasar el ratón por encima con cualquier icono, ya sea .svg o de cualquier extensión. Lo único que queremos es que se realice el efecto de cambio de color con cualquier icono que queramos poner.
Un saludo.
Attachments:
You must be logged in to view attached files.March 29, 2021 at 8:23 pm #277368
Elise NoromitMemberHello,
You can use the Infobox element and upload your SVG images, contact your designer to create SVG that can change the color on hover with custom CSS.
You are welcome! If you have any questions please feel free to contact us.
Best Regards
March 31, 2021 at 10:23 am #277841
DelopWebParticipantHola,
No nos han respondido a si se pueden añadir Alt a los iconos de redes sociales, es posible?
Saludos.
March 31, 2021 at 1:14 pm #277928
Elise NoromitMemberHello,
We do not have instructions and deep skills in SVG creation, the designer should know that, please consult your designer.
Best Regards
March 31, 2021 at 9:06 pm #278017
DelopWebParticipantHola,
Nuestra consulta acerca de los .svg ya quedó aclarada en la respuesta del 29 de marzo, lo que queremos saber ahora es si hay alguna manera de colocar etiquetas Alt en los iconos de las redes sociales.
Saludos.
March 31, 2021 at 10:00 pm #278052
Elise NoromitMemberHello,
Please have a look at the screen: https://prnt.sc/1111gly
You can fill out the files in the Media libraty for each image.
Best Regards
April 9, 2021 at 12:23 pm #280774
DelopWebParticipantBuenos días,
Seguimos sin tener un respuesta clara de si se puede poner etiquetar Alt a los iconos de la redes sociales. No queremos completar con más archivos el grupo de redes sociales que tenemos. Hemos constatado que las imágenes de los iconos de las redes sociales provienen de una biblioteca font awesome y queremos saber en que página se encuentran definidos los iconos de las redes sociales para poder incluir una etiqueta Alt a cada uno de los iconos, no buscamos la página CSS, buscamos la página raíz donde estén contenidos. Ya que no hay una manera más sencilla de poner el nombre de la red social al lado de su correspondiente icono de la marca solamente nos queda el método de incluir una etiqueta Alt para que por lo menos al pasar el ratón por encima salga el nombre de la red social.
Adjuntamos retoque de imagen de como queremos que aparezca.
Saludos.
Attachments:
You must be logged in to view attached files.April 10, 2021 at 9:55 am #281187
Elise NoromitMemberHello,
Please find this file:
woodmart/inc/shortcodes/social.php
Then find this function and edit it as per your needs:
function woodmart_shortcode_social($atts)
copy this function into functions.php of the child theme and edit as per your needs.Best Regards
April 20, 2021 at 9:45 am #284578
DelopWebParticipantBuenos días,
Queremos saber donde están definidas las reglas “id” CSS.
Gracias, saludos.
April 20, 2021 at 3:06 pm #284733
Elise NoromitMemberHello,
What do you mean? Please provide the page and screen of the element.
Best Regards
April 21, 2021 at 9:08 am #284985
DelopWebParticipantHola,
Son las “id” de las imágenes “id.css-1” “id.css-2” “id.css-3” de la biblioteca de la plantilla Info boxes with hover de la imagen “info-boxes-with-hover”. Queremos utilizar esa plantilla en nuestra web.
Saludos.
Attachments:
You must be logged in to view attached files.April 21, 2021 at 9:16 am #284987
DelopWebParticipantImágenes “id.css-1” “id.css-2” “id.css-3”
Attachments:
You must be logged in to view attached files.April 21, 2021 at 7:45 pm #285229
Elise NoromitMemberHello,
You can extract the images here: https://woodmart.xtemos.com/blog/woodmart_element/info-boxes-with-hover/
You can read here how to do that: https://phancybox.co.nz/news/how-to-save-an-image-from-a-website/
If you have any questions please feel free to contact us.
Best Regards
April 21, 2021 at 9:08 pm #285254
DelopWebParticipantHola.
Sabemos como manejar estas imágenes, lo que no queremos es perder el tiempo generando id´s que ya están generadas para evitar conflictos con los selectores porque las id´s solo se pueden usar una vez. Por eso queremos ver todas las id´s, en que CSS se encuentran?
Saludos.
April 22, 2021 at 8:38 am #285428
Elise NoromitMemberHello,
We do not provide images and we declare it in our documation: https://xtemos.com/docs/woodmart/installation-process/
Please take care of the images for the site, providing images, creating images are not covered by our support policy.
Best Regards
April 23, 2021 at 12:47 am #285751
DelopWebParticipantNos estamos empezando a cansar de las respuestas que nos están proporcionando, sin sentido, desviando el tema hacía otros que no tienen nada que ver con el tema del que estamos tratando. Las imágenes de las que estamos manejando son de nuestra propia creación o adquiridas por otros canales ajenos a xtemos y woodmart, de hecho, no creemos que vayamos a utilizar ninguna imagen del tema woodmart, porque no tienen nada que ver con el argumento de nuestro sitio web.
No sabemos si no entienden bien el español o si las personas que nos responden no están correctamente preparadas, son desconocedoras del tema woodmart. Cuando realizamos preguntas técnicas es para entender como funciona el tema woodmart, no queremos que nos realicen nuestro trabajo, para eso estamos nosotros.
En nuestro última pregunta, no queremos que nos regalen ninguna imagen, lo que queremos es saber que selectores ID´s están creados y donde están definidos para evitar general nuestro propias ID´s repetidas y crear conflicto con las existentes, si no entienden esto, no sabemos como formular la preguntan de otra manera. En la respuesta recibida en la que nos dicen que utilicemos las mismas ID´s que aparecen el la página https://woodmart.xtemos.com/blog/woodmart_element/info-boxes-with-hover/, prácticamente ninguna de las ID´s funciona, entonces la única manera de saber que ID´s están definidas es conocer cuales son, para poder crear la nuestras propias y no perder más tiempo en este tema.
Hagan el favor de respondernos claramente lo que preguntamos y si no atienden en español, hágannos saber si no es posible.April 28, 2021 at 7:07 am #287471
Artem TemosKeymasterHello,
Sorry for the delay.
These IDs are part of the SVG images and are not generated by our theme. You can download this SVG image, open it with some text editor, and edit or remove the ID attribute. Here is a screenshot https://prnt.sc/126p0gb
Kind Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register