Need help with Custom CSS for Pagination Bullets for Google Reviews

Ask the Community Customization
1

Google Reviews

Hi Elfsight Team,

I’m trying to customize the pagination bullets for my widget to match my website’s design. I want the active bullet to look like a ‘pill’ (wider than the others) and have a specific color.

My goals:

  1. Inactive bullets: 12x12px, gray color (#d1d5db), no SVG icons inside.

  2. Active bullet: 35px width, 12px height, red color (#b81a1a).

I’ve tried adding Custom CSS and JS in the widget editor, but it doesn’t seem to apply to the elements (likely due to Shadow DOM or specific class naming).

Could you please provide the correct CSS selectors or a snippet that will bypass the default styling for this specific widget?

Thank you!

1 Like
2

You can try CSS like this

.es-bullets-control-item.es-bullets-control-item-active {
  height: 12px !important;
  width: 35px !important;
  background-color: #b81a1a !important;
}
.es-bullets-control-item {
  width: 12px !important;
  height: 12px !important;
  background-color: #d1d5db !important;
  transform: scale(1) !important;
}
3 Likes
4

Hello,

I am trying to customize the pagination bullets in my reviews widget. My goal is to make the active bullet look like a “pill” (wider than others), while keeping the inactive bullets as standard circles.

I used the following CSS:

.es-bullets-control-item.es-bullets-control-item-active {
width: 35px !important;
border-radius: 10px !important;
}

The Problem: When the active bullet expands to 35px, the other bullets either disappear or get cut off. It seems like the container .es-bullets-control (or its parent) has a fixed width calculated by JavaScript that only accounts for small circular dots. When one dot gets wider, there isn’t enough “room” in the container for the rest.

What I need: Could you please provide a CSS fix that allows the bullet container to expand dynamically or prevents it from hiding the bullets when the active one changes its width?

Thank you!

2 Likes
5

Hi there, @Tural_Aliyev :waving_hand:

Unfortunately, it’s impossible to change the size of the pagination bullets. I am really sorry!

However, I totally get your idea and I’ve added it to the Wishlist on your behalf - Change size of pagination bullets. If more users support this request, we might consider it in the future.

The good news is that it possible to change the color of active/inactive bullets using the CSS code below :slightly_smiling_face:

.es-bullets-control-item {
  background: #D1D5DB;
}

.es-bullets-control-item-active {
  background: #B81A1A;
}
3 Likes