Help with a widget design customization

Ask the Community Customization
1

Hello,

I would like to use a bold and highly legible font, similar to the examples shown in the screenshot I’ve attached. The current font looks too thin and low-impact for my brand style.

Additionally, I would like the background of the review boxes to be shorter. Right now, they stretch too far downward and appear oversized, which affects the visual balance.

Another issue is the “More” link inside the comments – it’s not clearly visible. I would like it to stand out more, like the “Give us a review on Google” button above it.

Finally, please let me know exactly which parts of the code I need to modify if I want to make further changes myself. That way, I won’t need to contact support for every small update.

Thank you in advance for your help.

image
image1920×752 100 KB

image
image1920×862 62.4 KB

1 Like
2

Hi there, @Adnan_Aytekin :waving_hand:

Apologies for the delayed response!

  1. Do you want to apply the same font family to all widget elements and make the whole text bold? Or would you like to apply these changes only to specific elements?

  2. I see that you’ve applied the same height to all reviews using the CSS code, this is why shorter reviews have extra spacing in the review container. With the aligned height, it’s impossible to remove this space. I’d also like to let you know, that you don’t need to use a CSS code to align reviews by height because we have a setting for this:

image
image328×561 18.1 KB
image
image328×884 16.7 KB


By the way, you can reduce the Preview Text Length to change the review card height. The cards will still be aligned when changing this setting.

  1. To apply the styles of the Write a Review button to the Read More button, please use the CSS code below :slightly_smiling_face:
.es-text-shortener-control {
  padding: 8px 20px;
  border-radius: 22px;
  background-color: rgba(88, 133, 0, 0.94);
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  max-width: 100%;
  text-decoration: none;
}

.es-text-shortener-control::before {
  content: '';
  border-radius: 22px;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s;
}

.es-text-shortener-control:hover:before {
  background: rgba(255, 255, 255, 0.1);
}
3

Hello Max, Yes I would like to use same or diffirent font variabler, I tried gemini and chatgp, but does not work.

Can you please send me the necessary codes as a bold title and other name fonts like the ones in the screenshots I threw to you as an example, and I also wonder if you can design any known and existing font to try and see it easily and quickly without reaching you myself.

16 Haz 2025 Pzt, saat 17:37 tarihinde Max via Elfsight Community <notifications@elfsight.discoursemail.com> şunu yazdı:

4

Okay, here are the solutions to change the font family and font weight for all widget elements right away:

And here is the code to individually control the font family and font weight of all widget elements:

/* Header */

.es-header-heading-text {
  font-weight: 700;
  font-family: Times New Roman;
}

/* Rating */

.es-rating-value {
  font-weight: 500;
  font-family: Times New Roman;
}

/* Review text */

.es-text-shortener { 
font-weight: 700;
font-family: Times New Roman; 
}

/* Write a Review button text */

[class*="ButtonBase__Ellipsis-sc"] {
  font-weight: 700;
  font-family: Times New Roman;
}

/* Author name */

.es-review-author-name { 
  font-family: Times New Roman;
   font-weight: 700;
}

/* Date */

.es-review-info-date {
  font-family: Times New Roman;
   font-weight: 700;
}

You’re very welcome to use any other font providing it’s supported by your browser and installed on your website. Please try it out and let me know if it worked for you :slightly_smiling_face:

1 Like