Soporte » Guías – Resolución de problemas » cambiar fuente y tamaño en sidebar storefront

  • Resuelto pepe2017

    (@pepe2017)



    Hola
    Siento no poder incluir la url ya que la pagina no está todavía visible al publico.
    Me estoy volviendo mico buscando como cambiar la fuente y el tamaño de la misma en la lista de categorías que es un widget en el sidebar. Utilizo storefront, bueno un hijo de esta que se llama Deli. Tengo el plugin Easy Google Fonts, pero creo que no llega a dejarte cambiar esa parte. Cambio otras fuentes y tamaños como el párrafo y los títulos, pero no el tipo de letra del widget que tengo en la sidebar izquierda.
    He probado a añadir esto, sacado de una web en inglés pero no veo que haga nada de nada:
    Following code will only affect the category widget
    .widget.widget_categories{
    font-size: 16px;
    }

    Quizás no lo haga bien…Voy a Apariencia/Personalizar/Css adicional y pego ese código en la ventana. Publicar y listo…Pues no aprecio cambio ninguno, incluso subiendo el tamaño a 40px.
    Agradecería un cable. GRACIAS

Viendo 15 respuestas - 1 de 15 (de 18 total)
  • Moderador almendron

    (@almendron)

    Como lo tienes en local, te voy a explicar como identificar la etiqueta que luego deberás modificar.

    1) Clic con botón derecho en la página, justo en la letras cuya fuente quieres varias.
    2) Clic en la opción “Inspeccionar elemento” o “Inspeccionar”
    3) Buscas la etiqueta (DIV, SPAN, …) que define el elemento a modificar.
    4) Modificas “en vivo” para ver como queda.
    5) Los cambios los llevas al CSS adicional y listo.

    Moderador almendron

    (@almendron)

    De todas formas, en la vista previa del tema me sale que la etiqueta que afecta a lo que está dentro del widgtet es

    .widget-area .widget {
    	font-size: .875em;
    }

    El estilo lo hereda del “body”. Tendrás que añadir esta propiedad en la etiqueta anterior.

    Moderador almendron

    (@almendron)

    Para el título:

    .widget .widget-title, .widget .widgettitle {
    	font-size: 1.41575em;
    	letter-spacing: 0;
    	border-bottom: 1px solid rgba(0,0,0,.05);
    	padding: 0 0 1em;
    	margin-bottom: 1em;
    	font-weight: 300;
    }

    Lo mismo. El tipo de fuente lo coge del “body”.

    Hola Almendron.

    Muchas gracias. Consigo localizar la zona donde está el texto, como me has dicho con inspeccionar. En la columna de la derecha, hago cambios y me cambia. La pega ahora es donde hacerlo en el panel de control de WP. Tengo ele plugin SIMPLE CUSTOMS CSS. No ssé si copiar y pegar el codigo ahí o en apariencia/editor.

    En tu código, faltaría el tipo de letra, creo, no ???

    Muchas gracias

    Vaya por delante que te agradezco enormemente tu ayuda, pero no consigo ver cambios…Solo en la web con el método de inspeccionar.
    Sin embargo con el plugin SIMPLE CuSTOMS CSS y un trozo de código copiado en una web en inglés… Pego ese código en el Simple Custom Css y modifica algunas cosas…Aun no consigo en todos los sitios, pero es cuestión de ir encontrando el nombre de cada widget en inglés…
    Esto es lo que pego y modifico…

    .widget.widget_top_bar{
    font-style: normal;
    font-family: tahoma;
    font-size: 16px;
    }
    ahí modifico el tamaño y tipo de fuente para la top bar. Algo es algo…ahora quiero hacer lo mismo pero en otros widgets.
    Obviamente estoy todavía muy verde, pero sigo intentando.
    Gracias

    Moderador almendron

    (@almendron)

    No es neecsario que uses ningún plugin. Basta con que añadas en “CSS adicional” lo que ye he dicho:

    .widget-area .widget {
    	font-size: .875em !important;
    }

    Te añado lo de !important para que lo coja sí o sí.
    Y sí, ahí faltaría la fuente.

    Este código debería afectar a todos los widgtes.

    Y para el título:

    .widget .widget-title, .widget .widgettitle {
    	font-size: 1.41575em !important;
    }

    Y también aquí añade la fuente que quieras. Debería afectar a todos los título de los widgtes.

    Moderador almendron

    (@almendron)

    Si quieres que solo afecte a un solo widget, entonces fíjate en la CLASS. Por ejemplo, para los post recientes es class="widget widget_recent_entries"

    En este acaso, te vas al CSS adicional y añades:

    .widget .widget_recent_entries {
    	font-size: .875em !important;
    }

    y añades la fuente que quieras en la misma regla.

    • Esta respuesta fue modificada hace 2 meses, 1 semana por  almendron.

    Bueno….funciona en parte…
    He deseactivado el plugin SIMPLE CUSTOM CSS y he copiado tus codigos…
    He retocado el tamaño de la fuente y añadido el tipo de fuente.
    Ahora bien, solo afecta al texto de la sidebar (izquierda) y a su titulo. No a todos los widgets.
    Así está ahora:
    .widget-area .widget {
    font-size: .999em !important;
    font-family: tahoma;
    font-style: normal;
    }
    .widget .widget-title, .widget .widgettitle {
    font-size: 1.41575em !important;
    font-family: tahoma;
    font-style: normal;
    }
    Puede que esté en conflicto con el plugin Easy Google Fonts que tambien lo tengo (Anterior a la consulta). Con ese plugin, conseguía cambiar el tipo de fuente y su tamaño para párrafos…ahora no se mueven..
    Antes de que me contestaras, conseguí cambiar algunas cosas en el Css adicional, indicando widget por widget, pero no recuerdo como… era algo así como:
    .widget.widget_top_bar{
    font-style: normal;
    font-family: tahoma;
    font-size: 16px;
    }
    Insisto, est codigo actual, solo me modifica la fuente del sidebar. No otros textos
    Gracias de nuevo..

    Moderador almendron

    (@almendron)

    Los códigos que te he pasado solo deberían afectar a los widgets y a los títulos de éstos.

    Para otras partes, debes comprobar la CLASS que determina su tamaño y tipo de fuente para poder luego cambiarlo.

    Hasta que aprenda más sobre estos codigos y no estancarme (Que quedan meter 450 articulos uno a uno), solo me falta cambiar el tamaño de la fuente de los precios debajo de cada articulo…Sale super pequeño..Por logica he probado con esto pero nada, jejejeje:
    .widget.widget_woocommerce-Price-amount amount{
    font-style: normal;
    font-family: tahoma;
    font-size: 16px;
    }
    Acabaré de meter productos y volveré a estudiarme algún tutorial sobre codigo…
    Gracias de nuevo.

    Precisamente, a eso me refiero… Solo me actúa sobre el widget de la sidebar…no en otros.

    Moderador almendron

    (@almendron)

    Con .widget.widget_woocommerce-Price-amount amount imposible que te funcione.

    Prueba .widget .widget_woocommerce-Price-amount{ (dejando espacio entre uno u otro nombre).

    Sin ver la página online no puedo hacer nada más.

    • Esta respuesta fue modificada hace 2 meses, 1 semana por  almendron.

    No, tampoco funciona, pero no te molesto más. Me pondré a chapar para aprender y que no me lo deis todo masticado.
    Lo de no poder mostrar la pagina tiene su motivo:
    Tengo un hosting en Arsys, en el que tengo una tienda virtual de ellos funcionando perfectamente. Como es muy cara, me he puesto a diseñar la mia por mi cuenta y sin prisa.
    El motivo de no poder mostrarla es que quería usar ya el dominio tienda Wp. Como ahora está apuntando a la tienda virtual de Arsys (Archivos ocultos en su servidor), tengo que hacer una modificación en mi archivo host para que al teclear mi dominio (solo n mi PC), no vaya a la tienda operativa, sino que vaya a la WP del hosting…Buff mno sé si lo habré liado con tanto rollo.
    Tengo otros hostings, pero tenía miedo que luego al migrar la tienda WP al hosting definitivo, hubiese creado urls que luego no siguieran el camino correcto.
    Si por mi fuera, claro que te la enseñaba, hubieses resuelto las dudas en un periquete.
    insisto gracias

    Moderador almendron

    (@almendron)

    No te preocupes que lo entiendo. Cuando quieras migrar alguna página, usa el plugin duplicator: https://es.wordpress.org/plugins/duplicator/

    Un saludo.

    PD. Doy por resuelto el hilo.

    Hola

    Estoy que no me lo creo…la logica a veces funciona… Simplemente cambiando titulos de la primera linea, lo he conseguido:
    .widget-area .widget {
    font-size: .999em !important;
    font-family: tahoma;
    font-style: normal;
    }
    .widget .widget-title, .widget .widgettitle {
    font-size: 1.41575em !important;
    font-family: tahoma;
    font-style: normal;
    }
    .woocommerce-price-suffix{
    font-size: 16px;
    font-family: tahoma;
    font-style: normal;
    }
    .price{
    font-size: 16px;
    font-family: tahoma;
    font-style: normal;
    }
    Por dios, ahora a por el resto de fuentes.

    Gracias y saludos.

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