Custom Styles Based on Category

Apply custom styles to a grid’s skin based on grid item’s category. Useful for when using the Lyndon skin, but can also be applied to any skin.

Intro

Normally when setting up a post-based grid, you can make custom skin modifications for each individual post.

This can be done in the “Essential Grid Custom Settings” section, under “Skin Modifications”.  However, these custom styles are only specific to each post, and therefore need to be applied for each individual post.

But if you want to apply a skin modification based on what category the post belongs to, this can be accomplished with some custom CSS.

1. Get the “slug” name for your post’s category.

2. Get the skin’s “Class Prefix” from inside the Item Skin Editor.

3. Use the following code format for the custom CSS style.

.filter-POST_CATEGORY_SLUG.SKIN_CLASS_PREFIX-wrapper .esg-overlay {
    background-color: #0000FF
}

3.1 Example CSS to apply a custom background color for two different categories:

.filter-category-one.eg-washington-wrapper .esg-overlay {
    background-color: #0000FF
}
.filter-category-two.eg-washington-wrapper .esg-overlay {
    background-color: #FF0000
}

4. Where to add the Custom CSS

Custom Styles Based on Category

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!