¿Hay algún tipo de plugin para tener un icono junto a una categoría?

Soporte
1

Hola, me pregunto si existe algún tipo de plugin que permita tener un icono junto a una categoría, similar a esto? Sé que hay uno pero no recuerdo el nombre.

image
image493×287 18.2 KB

2

Hola @Glow :wave:

No necesitas un plugin ni un componente de tema. Ve a la Configuración de Categoría a través de la llave inglesa de administrador en la esquina superior derecha de cada categoría para la que desees un icono de imagen y ve a la pestaña “imágenes” y allí podrás subir imágenes para que aparezcan como en tu captura de pantalla. La que quieres es la primera “Logotipo de Imagen de Categoría”. Ten en cuenta que también aparecerá en la parte superior de la página de Categoría.

1 me gusta
3

¡Gracias! ¿Y hay alguna forma de hacerlo más pequeño? Es bastante grande

image
image1138×429 32.5 KB

4

En común - css de un tema o componente de tema, puedes hacer esto:

.category-logo.aspect-image {
    width: 100px;
}

Solo cambia el valor del ancho por el que desees. También puedes usar porcentajes en lugar de píxeles. Espero que esto ayude :slight_smile:

1 me gusta
5

hmm, estoy bastante segura de que todavía hay un plugin, ya que recuerdo haber usado algo así, porque esto se ve bastante raro cuando lo reduzco y no se parece exactamente a la imagen, pero no recuerdo el nombre.

image
image1184×412 14.9 KB

6

Puedes usar CSS para personalizar aún más la imagen y su ubicación.

También está este, pero no estoy seguro de que sea lo que quieres.

2 Me gusta
7

Este es un código que escribí antes…


:root {
    --category-logo-width: 70px;
    --category-spacing: 0px;
}

.desktop-view table.category-list .category-logo.aspect-image {
    width: var(--category-logo-width);
    height: calc(var(--category-logo-width) - 45px);
    margin: 0 5px 0 0;
    padding: 0;
    transform: translatey(-35px);
}
table.category-list .category-logo.aspect-image img{
    width: var(--category-logo-width);
    height: var(--category-logo-width);
}
.desktop-view .has-logo .category-text-title {
    margin-left: calc(var(--category-logo-width) + 5px);
}
.mobile-view .category-title-link {
    display: flex;
}
.mobile-view .category-logo.aspect-image {
    margin: 0 5px 0 0;
    margin-top: 0 !important;
    padding: 0;
    order: -1
}
.mobile-view .category-text-title {
    margin: auto 0;
}


.desktop-view td.category {
    margin: var(--category-spacing);
}
.desktop-view table.category-list {
    border-collapse: separate;
    border-spacing: 0 var(--category-spacing);
}
.desktop-view table.category-list tr {
    margin: var(--category-spacing);
}
2 Me gusta