Existe um plugin de algum tipo para ter um ícone ao lado de uma categoria?

Suporte
1

Olá, estou me perguntando se existe algum tipo de plugin que permita ter um ícone ao lado de uma categoria, semelhante a algo assim? Eu sei que existe um, mas não me lembro o nome.

image
image493×287 18.2 KB

2

Olá @Glow :wave:

Não é necessário um plugin ou componente de tema. Vá para as Configurações da Categoria através da chave inglesa no canto superior direito de cada categoria para a qual você deseja um ícone de imagem e vá para a aba “imagens” e lá você pode fazer upload de imagens para aparecer como na sua captura de tela. A que você quer é a primeira “Category Image Logo”. Note que ela também aparecerá no topo da página da Categoria.

1 curtida
3

Obrigado! E há alguma forma de torná-lo menor? Está bem grande demais

image
image1138×429 32.5 KB

4

Em comum - css de um tema ou componente de tema, você pode fazer isto:

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

Apenas altere o valor da largura para o que desejar. Também pode usar porcentagem em vez de pixels. Espero que isto ajude :slight_smile:

1 curtida
5

hmm, tenho quase certeza de que ainda existe um plugin, pois me lembro de ter usado algo assim, porque isso parece bem estranho quando o redimensiono, e não parece exatamente com a imagem, mas não me lembro do nome.

image
image1184×412 14.9 KB

6

você pode usar CSS para personalizar ainda mais a imagem e sua colocação.

há também este, mas não tenho certeza se é o que você quer.

2 curtidas
7

Este é um código que escrevi 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 curtidas