I like you category styles 6 and 8 but do not want the images fill the whole background. The images should stay in the given image area in the box.
(How) is that possible?
Hi zumaxb,
For this category style, header container are transparent and practically in this container you can see the background image. This can be set within Theme panel. There is not an easy option for it in panel to change this, sorry.
Also, another possibility for you, would be to use a bit of Css to make some customization. Please try the code below in your Theme panel->Custom Css area to fix the problem, like this: http://screencast.com/t/gtGlwFvufE
.td-category-header.td-image-gradient-style8 {
background-image: url('enter your URL image');
background-repeat: no-repeat;
}
Note: If you want to follow the above variant, please use a background color/image (white color for example)
Hope this help and let us how it goes!
Thank you!
Thank you for that snippet but that seems a bit too hard-coded for what I was looking for. If I understand that snippet correctly that would give all categories with Style 8 one and the same image. But I want to use different images, one for each category.
Maybe I rephrase my question:
Is the a category style for which I can set an image in your theme panel. Where the image does not cover the whole background but only the “image box” above the content and below the menu?
A third way of phrasing this would be:
Is there any way – not necessarily a category style but maybe a dynamically inserted “category featured image” – to set one image for a category page, where the image appears above the content and below the menu – but does not cover the whole background?
======
FYI: I use a child theme and custom CSS file.
======
Hello,
Unfortunately the theme does not have such an option at this moment. The only method to do it is hard-coding it. CSS is not very hard to figure out. It is better than the alternative which involves altering the PHP files and adding conditionals to td_category_template.php.
You can use css without altering core files and you can have control over it from the theme panel which is a big plus.
You can set the code Catalin gave you to apply to a specific category only. Every category has an custom class set to it. You can get this class by inspecting the category page with your browser inspector: http://screencast.com/t/5uS8nYlTc6u
For example mine is category 66. So i would add this to the beginning of the code like so:
.category-66 .td-category-header.td-image-gradient-style8 {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Winnersh_Meadows_Trees.jpg');
background-repeat: no-repeat;
}
Now the code will only apply to that specific category. So if you need to use the code for another category you can simply copy and paste it and change the category number and the image.
I hope this helps.
Thank you!
that is an elegant solution.
thank you!
