The WordPress sidebar design is prime real estate—it’s one of the first places a visitor’s eye goes besides your main content. In the popular and flexible Astra theme, a little bit of custom CSS can transform a plain sidebar into a stylish, high-engagement area.
This guide provides two distinct CSS styles to customize your WordPress sidebar, focusing on visually enhancing the widget titles and the appearance of recent posts. For both of these styles, you will need the “Recent Posts Widget With Thumbnails“ functionality enabled.
You can apply this code by navigating to Appearance > Customize > Additional CSS in your WordPress dashboard
Style 1: Clean, Boxed, and Hover-Ready List- WordPress sidebar design
This style is perfect for a clean, modern blog, using subtle shadows and a smooth hover effect to draw attention to each item in your recent posts list.
The CSS code is:
/* Sidebar Title Styling – more specific */
div.sidebar-main h2,
div.sidebar-main h3,
div.sidebar-main .widgettitle,
div.sidebar-main .widget-title {
font-size: 18px !important;
font-weight: bold !important;
text-transform: none;
margin-bottom: 10px;
}
/* Recent Post List Styling */
div.sidebar-main ul li {
font-family: “Poppins”, sans-serif;
font-size: 15px;
margin-left: 5px;
background: #fff;
padding: 10px 10px;
margin-bottom: 10px;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
/* Hover effect (optional) */
div.sidebar-main ul li:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
Style 2: Gradient Titles and Engaging Thumbnails
This style is more vibrant and is designed to create a “Trending Posts” look by featuring post thumbnails prominently and using a bright gradient for the widget titles.
The CSS Code is:
/* Sidebar Title Styling */
div.sidebar-main h2,
div.sidebar-main h3,
div.sidebar-main .widgettitle,
div.sidebar-main .widget-title {
font-size: 18px !important;
font-weight: 700 !important;
color: #fff;
background: linear-gradient(90deg, #1ac9a3, #00a2e8);
padding: 10px 15px;
border-radius: 8px;
text-align: center;
margin-bottom: 20px;
}
/* Trending Post List Styling */
div.sidebar-main ul {
list-style: none;
padding: 0;
margin: 0;
}
div.sidebar-main ul li {
display: flex;
align-items: center;
background: #fff;
border-radius: 10px;
margin-bottom: 12px;
padding: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
/* Thumbnail Styling */
div.sidebar-main ul li img {
width: 85px;
height: 55px;
border-radius: 6px;
object-fit: cover;
margin-right: 10px;
}
/* Post Title Styling */
div.sidebar-main ul li a {
font-size: 14px;
font-weight: 500;
color: #333;
text-decoration: none;
line-height: 1.4;
display: block;
transition: color 0.3s ease;
}
/* Hover Effects */
div.sidebar-main ul li:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
div.sidebar-main ul li a:hover {
color: #00a2e8;
}
/* Post Categories Styling with Bullet */
div.sidebar-main ul li.cat-item {
position: relative;
padding-left: 25px;
font-size: 14px;
color: #333;
}
div.sidebar-main ul li.cat-item::before {
content: “•”;
position: absolute;
padding-left: 5px;
left: 5px;
top: 0;
color: #00a2e8;
font-size: 18px;
line-height: 1.2;
}
________________________________________________________________________________________
For, OceanWP theme:
The WordPress sidebar is valuable visual space—it’s one of the first areas visitors notice alongside your main content. With the powerful and highly flexible OceanWP theme, a touch of custom CSS is all it takes to turn a simple sidebar into a modern, stylish, and high-engagement feature of your website. Now Click here for get all CSS code and paste Customise>CSS or copy from below
/* Strong override: enlarge the “Recent Posts” sidebar heading */
aside#secondary h2.wp-block-heading,
#secondary h2.wp-block-heading,
.sidebar-box.widget_block h2.wp-block-heading,
.sidebar .wp-block-group h2.wp-block-heading,
.widget_block .wp-block-heading h2,
.widget .wp-block-heading h2 {
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: 0.4px !important;
margin: 8px 0 16px !important;
color: inherit !important;
display: block !important;
padding: 5px;
color: #fff;
background: linear-gradient(90deg, #1ac9a3, #00a2e8);
padding: 10px 15px;
border-radius: 8px;
text-align: center;
margin-bottom: 20px;
}
/* Style each latest post item in a shadow box */
.wp-block-latest-posts__post-title {
background: #ffffff;
border-radius: 5px; /* reduced from 8px to 5px */
padding: 13px;
margin-bottom: 15px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
transition: box-shadow 0.3s ease;
/* adds slight line gap */
list-style: none; /* removes default bullet */
position: relative;line-height: 1.8; padding: 12px;
}
/* Hover effect */
.wp-block-latest-posts__list-item:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* Post title styling with arrow and small font */
.wp-block-latest-posts__post-title {
color: #1a1a1a;
font-weight: 430;
font-size: 13px;
text-decoration: none;
display: block;
padding-left: 20px;
position: relative; font-family: ‘poppins’, sans-serif;
}
/* === Below Blog Post Card Style === */
.blog-entry {
background: #ffffff;
border-radius: 12px; /* Rounded corners */
padding: 10px;
margin-bottom: 40px;
box-shadow: 0 4px 18px rgba(0,0,0,0.2); /* Soft shadow */
transition: all 0.3s ease;
overflow: hidden;
}
/* Hover effect */
.blog-entry:hover {
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
transform: translateY(-4px); /* Slight lift */
}
/* === Blog Thumbnail Styling === */
.blog-entry-header img,
.blog-entry .thumbnail img,
.archive .blog-entry-thumbnail img {
border-radius: 12px; /* Rounded image */
width: 100%;
height: auto;
object-fit: cover;
transition: all 0.3s ease;
}
/* Image zoom on hover */
.blog-entry:hover img {
transform: scale(1.03);
}
/* === Title Styling === */
.blog-entry .entry-title a {
color: #000;
font-weight: 700;
text-decoration: none;
transition: color 0.3s ease;
}
.blog-entry .entry-title a:hover {
color: #d30000; /* Your brand red */
}
/* === Meta Info (Date, Comments) === */
.blog-entry .entry-meta span {
opacity: 0.7;
font-size: 14px;
}