This Post hast the Category „red“
In this examples I change the entire color of the post by selecting one of the categories green, red or gaga. To do this, I am overwritting the global colours in an hooked HTML Element that is displayed by category. I also added some css to color the post images in the global color.
Colored examples by selected Category
Element Example for green
<style>
:root {
--global-palette1: #639734;
--global-palette2: #48791c;
--global-palette3: #1A202C;
--global-palette4: #3a3a3a;
--global-palette5: #636363;
--global-palette6: #aeaeae;
--global-palette7: #c4d5b5;
--global-palette8: #eef4e9;
--global-palette9: #ffffff;
}
.wp-site-blocks .post-thumbnail img, .wp-block-image img {
filter: grayscale(1);
mix-blend-mode: overlay;
}
.article-post-thumbnail, .wp-block-image {
background-color: var(--global-palette1);
}
</style>Display Settings for the Elements
This are my display settings in the Hooked HTML Element. You can probably do so much more with this technique.
If you want to change the font family take care that Kadence will load the font’s. Non coding soution is: Create an other Hooked Element with placment after content, place a Kadence Row with Advanced Text blocks where you select your needed font families and weights. Afterwards hide it by the visibility settings of the Row.
