Soporte » Diseño – Temas y plantillas » Centrar los Widgets del tema Agama-

  • Resuelto ferrtx

    (@ferrtx)


    Hola
    Mucho he podido leer sobre este problema y no doy con la solución almenos para el theme Agama.
    En la versión escritorio viendo los widgets de la barra lateral, apenas se nota que no están centrados aunque depende de su anchura, pero en la versión móvil se aprecia claramente que los widgets de la barra lateral al verse debajo del contenido, se muestran todos a la izquierda, bien sea un widget incluido del tema o buen sea mediante HTML aunque lo envuelva con el atributo «text algin center» no hay forma de centrarlos.
    Además de esto en la pagina de contacto donde tengo añadido un formulario de contacto mediante el Shortcode del plugin Contact form 7, al entrar desde la versión escritorio, también esto aparece a la izquierda.
    Lo mismo ocurre con los títulos de cada widget aunque eso no me preocupa , lo que quiero es que queden los widgets centrados.

    Vamos que es obvio que a nadie le gusta que los widgets queden alineados a la izquierda dejando media pantalla vacia y descompensando el diseño, no entiendo como puede seguir este problema sin ofrecer una solución prácticamente fácil.

    Por ello me gustaría saber como solucionarlo, si lo puedo hacer desde la edición del código del tema o de que manera ya que muchos widgets no muestran su código para editarlos y los que lo permiten no se pueden centrar.

    Agradezco la atención, un saludo.

Viendo 14 respuestas - 1 de 14 (de 14 total)
  • Moderador almendron

    (@almendron)

    Indica la URL de tu sitio y así lo vemos mejor.

    https://aviba.org

    • Esta respuesta fue modificada hace 1 semana, 6 días por  ferrtx. Razón: corrección de la url

    Por cierto, desde el navegador internet explorer se ve todo distinto y no he logrado adaptar la visualización en este navegador.

    Moderador LGrusin

    (@lgrusin)

    Los widgets están alineados a la izquierda pero ocupan todo el ancho, algo has debido tocar porque el tema no viene así. Igual es por el tipo de contenido de los widgets que tienes, por tener ancho fijo. Prueba con otros widgets y verás lo que digo.

    De todas formas también puedes jugar con los widgets del footer esos si aparecen centrados.

    Hola
    Desactivé los widgets del pie de pagina porque todos estaban alineados a la izquierda y no había forma de centrarlos, uno de ellos era simplemente un widget de enlaces.
    Los que hay en la barra lateral que son pocos de momento, el único que he tocado es el de twitter porque en versión móvil ocupaba todo el ancho mientras que el de Facebook quedaba debajo a la izquierda, asi que le puse el mismo ancho a twitter que a Facebook.

    Por lo demás no he tocado nada, es mas he vuelto a instalar el tema para evitar errores que haya podido causar.
    Pero cuando me refiero a la versión móvil, también me refiero a la versión tableta, es decir al girar el móvil es cuando queda enfocado todo a la izquierda.
    Pero ya que el formulario de contacto quede a la izquierda en cualquier dispositivo ya me parece fatal .

    Perdonar, creo que no me he explicado bien, aunque el tema padre es Agama, el que tengo activado es el hijo.. Agama Blue, quizás esa es la diferencia de que lo puedan ver distinto a lo que he explicado.

    Moderador LGrusin

    (@lgrusin)

    @ferrtx a todos los temas les pasa eso, centrar los widgets no me parece nada estético, pero es cuestión de gustos.

    Prueba esto en CSS adicional:

    @media (max-width: 768px) {
     .widget-area .widget, .widget-area .widget h3 {
      text-align:center;
     }
    }

    Las imágenes que añades a los widgets deben ser a tamaño completo para que funcione el responsive y se adapte a la pantalla del visitante. Si pones una imagen pequeña se quedará de ese tamaño.

    Recuerda que el tema Agama Blue no es compatible con las versiones 5.0 en adelante y parece que el autor no tiene interés en actualizarlo. Lo digo porque todo ese trabajo que estás haciendo no te servirá de nada si el tema deja de funcionar bien en un futuro.

    • Esta respuesta fue modificada hace 1 semana, 5 días por  LGrusin.
    Moderador almendron

    (@almendron)

    Me meto por medio: a ver si está metiendo iframes en los widgwts y por eso le salen alineados a la izquierda.

    ¿Ha probado a poner un widget de los que lleva por defecto WordPress?

    Moderador LGrusin

    (@lgrusin)

    Exacto @almendron todo lo que meta con ancho fijo, sean imágenes o iframes le pasa lo mismo.

    Vamos a ver
    En pimer lugar agradecer la atención
    El único iframe que he puesto ha sido el video de la portada ya que poner un video con la función video de WordPress en el pie de pagina y usando el plugin de accesibilidad WP Accessibility que incorporé a esta web por que se trata de una web dedicada a la «accesibilidad visual» el resultado era que al cambiar el contraste pulsando en su herramienta, el video quedaba opaco y solo se podía escuchar y de esta forma mediante un iframe ese problema se soluciona.
    Pero en breve voy a armar nuevamente el ie de pagina con widgets de WordPress para que veais el resultado, cierto es que en según que casos no queda mal alinear a la izquierda pero queda horrible en la versión móvil.
    Voy a probar ese CSS pero si es el tema todo lo que me puede estar causando problemas.. lo mejor será elegir otro.

    Acabo de añadir los Widgets al pie de pagina como se ve en la versión móvil girado, quedan todos alineados a la izquierda, con el CSS que me has indicado he solucionado únicamente los títulos y widgets de la barra lateral menos el de Facebook, y el plugin de formulario en contacto sigue quedando a la izquierda, no es solo estética esque en la parte izquierda están presentes los botones de accesibilidad y también importa.

    Moderador LGrusin

    (@lgrusin)

    Es complicado por los diferentes anchos de los elementos que añades al widget.

    Se me ocurre que pongas un ancho fijo para la columna de widgets de manera que puedas centrar un poco la misma.

    El CSS Adicional quedaría asi:

    @media (max-width: 768px) {
      #secondary {
      width: 250px;
      margin: 0px auto;
      }
     .widget-area .widget, .widget-area .widget h3 {
      text-align:center;
     }
    }

    Esto tiene un inconveniente y es que los elementos que añadas al widget, incluídas las imágenes, no superarán los 250 pixeles. Juega con los valores a ver que consigues.

    • Esta respuesta fue modificada hace 1 semana, 4 días por  LGrusin.

    Gracias @lgrusin
    Creo que para la barra lateral es suficiente, centra casi todo menos los iconos del plugin peroalmenos ahora quedan los contenidos centrados y basta con ese ancho aunque si, si es necesario lo modificaré, lo que no afecta es al pie de página ni al formulario de contacto, estaría bien lograr este resultado también en estas secciones.
    Ya va quedando más acorde, también siguiendo tus consejos, he activado Agama y he dejado de usar Agama Blue y aunque mucho no cambia, hay aspectos que se muestran mejor como el tamaño de Titulos.

    Moderador LGrusin

    (@lgrusin)

    Si te refieres al formulario que hay en la página Contacto, puedes usar

    @media (max-width: 768px) {
     .entry-content .wpcf7 {
      width:80%;
      margin: 0px auto;
     }
    }

    Aunque te advierto que casi no queda espacio para el formulario cuando accedes con un móvil.

Viendo 14 respuestas - 1 de 14 (de 14 total)
  • Debes estar registrado para responder a este tema.