Imagenes texto incrustado de nuevo  

 
WebMaster
 WebMaster
Estimable Member

Hola de nuevo,
vengo con el mismo tema que hace unos días pero no puedo reabrir el link, aquí se lo pego https://www.webempresa.com/foro/32-Joomla!-30/142700-Im%C3%A1genes-con-texto-incrustado.html . Despues de estar probando alguna que otra opción hemos decidido hacer los circulos con css lo que nos trae a otros problemas, haber si serian tant amables de darnos una mano ya que creemos que es poco lo que nos queda por dejarlo listo, les explico:
Hemos puesto los circulos con un z-index (de momento solo el primer círculo) ya que en la parte inferior de ellos tienen que estar cortados (estilo media luna, desconocemos si podriamos hacer esta forma con css tambien y precindir de la imagen) pues bien si hacemos esto la opción :active para que nos cambie de color al pulsar dichos circulos no funciona.
Como podriamos hacer que despues de esconder la parte inferior de los circulos se quede tapada la parte inferior pero que funcione la opción de cambiar de color cuando se haga clic sobre cada circulo?
Les adjunto una imagen tal y como ahora esta

saludos y gracias de antemano

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 03/06/2015 5:54 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Ponle un ID también a la imagen

Usa z-index positivos, por ejemplo para los circulos sería z-index:1 , z-index:2 y z-index:3, pero para la imagen puedes ponerle z-index:4 y adicionalmente position:relative

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 03/06/2015 6:48 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

WebMaster
 WebMaster
Estimable Member

Hola Jhon,
muchas gracias todo perfecto 😉 +100
Lo que pasa es que si visualizamos la web desde un dispositivo mobil, tablet, etc no se visualiza correctamente (adjunto un par de capturas).

Supongo que sera porque lo que hace que los circulos se visualizen cortados por la parte inferior es una imagen y no código css.
Hay alguna manera de hacer la curva de la imagen para que el efecto de circulos cortados sea el mismo y lo podamos visualizar correctamente desde otro dispositivo que no sea un pc?
Agradeceria mucho vuestra ayuda tanto si se puede con codigo css o con la imagen

Saludos

ResponderCitar
Respondido : 04/06/2015 5:14 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

La solución más práctica sería que cambies la manera de mostrar los cirulos a determinada resolución, por ejemplo quitando la imagen y luego haciendo q los círculos se muestren uno debajo de otro

Prueba el siguiente código, agregalo al final del archivo :
/templates/yoo_master2/css/custom.css

@media (max-width:1200px){
	#img-globos img{
		display:none;
	}
	
	#sphere-a, #sphere-b, #sphere-c{
		position:static;
		display:block;
    margin:auto;
	}
}

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/06/2015 6:45 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

WebMaster
 WebMaster
Estimable Member

Hola Jhon, (disculpa mi retraso en la contesta)
perfecto! funciona bien así y nos vale.
Por otra parte (ya será la última molestia que os ocasione) como podriamos hacer para que se mantenga el color azul más oscuro activo en el circulo seleccionado?
Cada círculo de los 3 que hay tiene un enlace a otro artículo de Joomla pues queremos que se mantenga con el azul más oscuro activo dependiendo de el círculo clicado.
hemos puesto la opción :active en el css pero solo se muestra en azul más fuerte al hacer clic sobre el, luego se vuelve a quedar el azul más claro.
Os adjunto una captura de como tendria que quedar despues de hacerle clic encima

Mil gracias de nuevo y disculpad!

ResponderCitar
Respondido : 08/06/2015 10:23 am
Julen
 Julen
Miembro Admin

Hola,

Puedes aplicar el efecto indicado, modificando la hoja e estilos .CSS.

Te recomiendo revisar la siguiente informaron, donde podrás ver como realizar cambios en las hojas de estilos:

www.webempresa.com/blog/item/1837-como-modificar-estilos-css-en-plantillas-joomla-wordpress-o-prestashop.html

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 08/06/2015 11:38 am

Cursos Gratuitos WordPress

WebMaster
 WebMaster
Estimable Member

Hola Julen,
disculpa pero si lees bien en el post anterior al tuyo ya ponemos que hemos puesto un selector :active, o sea entendemos que ya sabemos como modificar .css.
Simplemente necesitamos saber como aplicarlo correctamente, no como aprender a modificar .css tal y como nos indicas tu.

Saludos

ResponderCitar
Respondido : 08/06/2015 11:58 am
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

La pregunta sería por que quieres este comportamiento ?, Algunas cosas que tienes que tener en cuenta:

- La página se recarga asi que el efecto de q fue visitado se perdería
- Usas javascript, por lo que tendrías que hacerlo con javascript , esto posiblemente te fuerce a usar cookies
- Por CSS podrías usar visited si la estructura fuese otra y se tratara de un link http://www.w3schools.com/cssref/sel_visited.asp

En resumen creo que te estas complicando con esto, lo si que podrías evaluar es sólo hacer un :hover que cuando pase el mouse cambie de color para saber que hay algo más al hacer click

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 08/06/2015 10:15 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

WebMaster
 WebMaster
Estimable Member

Hola Jhon, gracias de nuevo,
seguro que tienes razón y me este complicando, pero necesito este efecto para nuestro cliente, haber si me explico un poco mejor, la idea és que si yo estoy en cualquier apartado del menú de la web (en el ejemplo que os pongo estoy en el apartado del menu "Activitats") y el usuario hace clic encima del circulo de "Entorn" (és un ejemplo, podra ser cualquier de los otros dos que hay), adjunto imagen.

Esto anterior tendría que llevarlo al apartado de "Entorn" y ademas tendría que mantenerse resaltado el circulo de "Entorn" con color azul más fuerte tal y como se puede visualizar en la siguiente imagen adjunta

Alguna idea de como podria hacerlo?
Mil gracias de nuevo

Saludos

ResponderCitar
Respondido : 09/06/2015 12:59 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

En este caso veo que los circulos son parte del contenido, podrías evaluar pintar los circulos directamente en el artículo, es decir si entra al artículo de "Entorn" , en este artículo el circulo "Entorn" debería ya estar pintado , es como un artificio ya que los circulos son independientes y se repiten en cada articulo, esto te favorece a que puedas pintar el circulo activo.

Podrías usar por ejemplo

.... más codigo

Fijate en la parte de style="background:red"

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 09/06/2015 6:20 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

WebMaster
 WebMaster
Estimable Member

Hola Jhon,
perfecto! gracias crack! Nos vale la opción que mencionas

Mil gracias de nuevo, +1000 🙂

Saludos

ResponderCitar
Respondido : 11/06/2015 9:45 am
Julen
 Julen
Miembro Admin

Gracias por tu confianza 🙂

Nos alegra que te guste nuestro servicio. 🙂

Nos sería de mucha utilidad que nos dejases tu testimonio, solicitamos testimonios para colocar en nuestra página y ayudar a otros posibles clientes a decidirse por nuestros servicios:

Puedes crear el testimonio aquí: https://www.webempresa.com/testimonios.html?view=form&layout=edit

Si nos quieres enviar tu experiencia con nuestro servicio, la publicaremos en nuestra página con un link hacia tu Web. Nuestro dominio webempresa.com tiene una autoridad alta, así que el link siempre te ayudará en el posicionamiento en buscadores de tu Web.

Si ya lo solicitamos anteriormente y nos lo facilitaste, puedes dejar otro testimonio si tienes otra página que quieras posicionar mejor al tener un link en la nuestra con tu testimonio.

Gracias por publicar tu testimonio y por tus palabras de agradecimiento.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 11/06/2015 10:13 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Por favor Iniciar Sesión o Registro