This is a fresh install of category-banners, on a category with an icon. For some reason, it duplicates the icon. Is there a way to default to the original category icon
being hidden when the category banners theme component is on?
AI-generated summary
The discussion revolves around an issue with the category banners theme component, where enabling it causes duplicate category icons. jordan-violet shared an image of the issue and asked if there’s a way to hide the original category icon when the component is on. Moin suggested using a CSS solution from a related topic on Meta Discourse. However, jordan-violet mentioned that the solution didn’t address the issue of text alignment. CocoQuark provided a potential fix for the alignment issue by modifying the grid layout in the CSS, allowing for vertical alignment of the title.
I think you can use the css solution that was shared in Default category heading not hidden when category banner is used
Didn’t even find that bug…sorry!
It still doesn’t align the text to the center of the icon, which I guess is another issue also mentioned in that topic with no resolution.
@Moin any chance you know that one?
I don’t know very well the grid layout. That said…
If you don’t display the category descriptions at all, you can replace
.category-title-contents {
display: grid;
grid-template-areas:
"logo title"
"logo description";
grid-template-columns: auto 1fr;
}
with
.category-title-contents {
display: grid;
grid-template-areas:
"logo title";
grid-template-columns: auto 1fr;
}
The original layout splits the container into 4 cells, which misaligns the title:
Removing the “logo description” area makes it 2 cells:
Which allows you to vertically align the title by replacing:
.category-title-contents .category-title {
grid-area: title;
align-self: end;
}
with
.category-title-contents .category-title {
grid-area: title;
align-self: center;
}
