Hi,
How can I add a background to different categories which is based on a CSS gradient?
i.e. under ‘Newsmag’ > ‘Theme panel’ > ‘Categories’ > ‘Per category settings’ > ‘Background color’
If this can be done in the raw code this would be fine.
I know I could upload a ‘gradient image’ but this is not preferable for optimisation reasons.
Hi
This can be achieved using some custom css in theme panel > custom code > custom css: For example if you have a category with named Apple and its slug is apple you can use this css to add a gradient background color: http://pastebin.com/Gf0qn6aX – http://pastebin.com/Gf0qn6aX
I hope this help.
Thanks!
This isn’t quite what is required, because it applies the background to the post behind the text, whereas I want to apply it to the td-container background (which is what changing the colour through the theme panel actually does).
Hi
The above code apply the background color for the same sections as this option from category settings: http://screencast.com/t/zhnLfxP2Lfb – http://screencast.com/t/au8otM9E
If this is not what you mean please provide more details about what you’re trying to do, also a screen pointing the desired rezult would help.
Thanks!
Ah, I think I see the misunderstanding.
I’ve checked my category page in question, and the result is the same as yours.
But I’d also like this background gradient to apply to the single post pages which fall within the category.
When I use your custom code – and hopefully you’ll see what I mean here – the background has also been applied behind the text and images etc. of the main container of the article.
On single post pages, the background doesn’t apply to the td-container outer area.
Hi
The above code works only for one or more category pages, that depends by the selectors used. To have the same style for posts you need to adapt the css for each post using post-id selector. The code would be
.postid-12, .postid-13, .postid-14 {
/*background code goes here;*/
}
This code will display the same background for posts with ids 12, 13, 14 so you can use the same implementation in your case.
Thanks!
Thanks, but how can I apply this style to all posts within a category? This code only adds it to a specific post.
The category has 10 new posts everyday, the CSS can’t be updated manually every time.
Hi
To make this process automatic you’ll need some customizations in theme’s core files. Basically you need to edit the panel generator in categories section and make it accept a custom css filed.
This is a complex task which require many customizations and lots of tests in order to be achieved. We can’t offer customization services at the moment so if you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you.
Thanks!
