Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 17, 2021 at 6:44 pm #1288766
    peterolle

    I will have a site where the posts need a different design per category.

    So if category is blog, it will have a design, if the category is tech it will have a different design, if category is trips it will have a different design.

    How can I apply styles to single posts based on categories?

    Thanks.

    March 18, 2021 at 3:02 am #1288845
    Nikko

    Hi peterolle,

    You can use this format as your base CSS:

    .single-post .category-name {}

    You’ll just need to replace name to the name of your category, so if it’s tech, it should be category-tech.
    The code should look something like:

    .single-post .category-name .post-title {

}

.single-post .category-name .entry-content {

}

    Hope this helps.

    Best regards,
    Nikko

    March 19, 2021 at 1:07 pm #1289151
    peterolle

    Thank you Nikko.

    How can I separate category page from single post under the same category?

    For example, when I go to the category page I need a border around each post.

    .post-entry.category-mycategory {
border: 1px solid #000000;
}

    But when I see the single post in that category I don’t want the border, but it is displaying as well.

    So the idea is to have.

    1- One page with blog posts from builder displaying one category. Style that.
    2- The single post itself. Style that completely different from the page.

    So both are under the same category, but one is a page with all the posts and another one is after you click one of them.

    Thanks.

    March 19, 2021 at 1:55 pm #1289169
    Nikko

    Hi peterolle,

    You can separate them by the first selector, for single post:

    .single-post .category-name {}

    for a page:

    .page .category-name {}

    then for a category page:

    .category .category-name {}

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.