Blog layout with sidebar

Hey Julie,
Thank you for the link to your site, but I can’t login I get an error: undefined please check.
1: Color sections are full width elements so the sidebar will always show below it, try using a column instead.
2: the border-bottom-right-radius doesn’t support negative values, perhaps an easier way will be to use an image for the corner like this:

this corner has a transparent background and you can use white text over it.

Best regards,
Mike

Hi,
I would recommend adding the categories as a class to the single posts, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('body_class','add_category_to_single');
  function add_category_to_single($classes) {
    if (is_single() ) {
      global $post;
      foreach((get_the_category($post->ID)) as $category) {
        $classes[] = $category->category_nicename;
      }
    }
    return $classes;
  }

This will add the categories as a body class, so for example if your post belongs to the categories News, Personal, Uncategorized

the body will have these classes:

So if you wanted to use CSS to target this it would look like:

#top.news.personal.uncategorized {
/* your color here */
}

You can make this would for only one category if you wish, my example just happened to have three.

Best regards,
Mike

Hi,
Try changing your border-radius so the top left side is zero:
border-radius: 0 35px 35px 35px !important;
then for the image make left:
left: -10px !important;
for this:

Best regards,
Mike

Hi,

Thank you for the update.

It should be -10px. You forgot to include the unit. Please replace the css rule with the following code:

.post-border-jd::before {
    content: url(//welstestdev.wpenginepowered.com/wp-content/uploads/2024/06/blogTabPerspective.png);
    position: relative;
    top: -62px !important;
    left: -10px;
}

Best regards,
Ismael