Star Position and Font Change

[user2283]

@Max I want to move the stars next to name on the right side not under the name. How I can do that? Also I want to change the font of name, review and read more. Can you guide me how I can do that? Thanks!

[Max]

Hi @user2283

I’ve checked your account and haven’t found the Testimonials Slider widget there. Could you please create it and once it’s done, we’ll customize it for you

[user2283]

@Max I just did it. Please check. Thanks!

[user2283]

@Max Any Update on this? Thanks

[user2283]

@Max Hi, I’ve created the slider and attached the pic below for your reference. Can you please help me to do the changes? Thanks!

[Max]

Hi @user2283

Apologies for the delayed response!

To move rating to the right upper corner, please add the code below to the Custom CSS field on the Style tab of your widget’s settings:

.es-review-author-block-info-container,
.es-review-author-name-container {
  width: 100%;
}

.es-review-author-name-container {
  justify-content: space-between;
}

.es-review-content-rating {
  margin-bottom: 0;
}

And this script should be placed in the Custom JS field on the Settings tab of your widget’s settings:

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 150) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

widget.on("init", async ({
  widgetContainer
}) => {
  const swiperWrapper = await waitForElement('.swiper-wrapper', widgetContainer);

  const callback = (mutationList, outerObserver) => {
    mutationList.forEach(({
      addedNodes
    }) => {
      addedNodes.forEach((node) => {
        const reviewCallback = (_, reviewObserver) => {
          outerObserver?.disconnect();
          reviewObserver?.disconnect();

          const rating = node.querySelector('.es-rating-container');
          const nameContainer = node.querySelector('.es-review-author-name-container');

          if (!rating || !nameContainer || nameContainer.contains(rating)) {
            outerObserver?.observe(swiperWrapper, {
              childList: true,
              subtree: true
            });
            reviewObserver?.observe(node, {
              childList: true,
              subtree: true
            });
            return;
          }

          nameContainer.appendChild(rating);

          outerObserver?.observe(swiperWrapper, {
            childList: true,
            subtree: true
          });
          reviewObserver?.observe(node, {
            childList: true,
            subtree: true
          });
        };

        reviewCallback(null, null);

        const reviewObserver = new MutationObserver(reviewCallback);
        reviewObserver.observe(node, {
          childList: true,
          subtree: true
        });
      });
    });
  };

  callback([{
    addedNodes: swiperWrapper.childNodes
  }], null);

  const observer = new MutationObserver(callback);
  observer.observe(swiperWrapper, {
    childList: true,
    subtree: true
  });
});

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link

To individually change a font of the reviewer name, review text and Read More button, please use the code below in the Custom CSS field:

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

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

.es-text-shortener-control {
font-family: Times New Roman
}

You can use any other font providing it’s installed on your website and supported by your brower.

Give it a shot and let me know if it worked for you

[user2283]

It works @Max Thanks. I want to do some more things. Can you guide me how I can increase the name font size? On click read more, the stars still under the name. can we move next to name like we did and remove the extra white space after the text in the box? I’m looking forward to your response. Thanks!

[Max]

Sure! Here is a CSS code to move the rating in the popup and remove empty space:

.es-popup-container {
  min-height: unset;
}

.es-popup-container .es-review-container {
  position: relative;
}

.es-popup-container .es-review-content-rating {
  margin-bottom: 0;
}

.es-popup-container .es-review-link-container {
  height: 22px;
}

.es-popup-container .es-review-content-rating {
  margin-bottom: 0;
  position: absolute;
  inset: 0 32px auto auto;
}

To change the size of the reviewer name, just add font-size: 20px; here:

Please test it out and let me know if it worked

[user2283]

It works @Max I want to increase the dot navigation size and change the color of active and non active dots. how I can do that? Thanks

[Max]

Yep, here is a code to change the size of the bullets:

.es-bullets-control-container {
  --bullet-size: 12px;
  width: calc(3 * (4px + var(--bullet-size))) !important;
}

.es-bullets-control-item {
  min-width: var(--bullet-size);
  width: var(--bullet-size);
  height: var(--bullet-size);
}

Feel free to adjust the bullet-size value to your liking.

The color of the pagination bullets is controlled in the Pagination section on the Style tab:

And here is a CSS code to change a color of the active bullet:

.es-bullets-control-item-active {
background: red;
}

If you have any other customization requests, feel free to list all of them right away. I’ll pass it to the devs and they’ll customize the widget for you