# Star Position and Font Change
**URL:** https://community.elfsight.com/t/star-position-and-font-change/143800
**Category:** Customization
**Tags:** testimonials-slider
**Created:** [February 6, 2026, 2:37pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800 "2026-02-06T14:37:17Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@user2283](https://community.elfsight.com/u/user2283)
#### Post date: [February 6, 2026, 2:37pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/1 "2026-02-06T14:37:17Z")
@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!
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [February 6, 2026, 2:46pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/3 "2026-02-06T14:46:10Z")
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 😉
---
### Author:  [@user2283](https://community.elfsight.com/u/user2283)
#### Post date: [February 6, 2026, 3:02pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/4 "2026-02-06T15:02:14Z")
@Max I just did it. Please check. Thanks!
---
### Author:  [@user2283](https://community.elfsight.com/u/user2283)
#### Post date: [February 6, 2026, 4:16pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/5 "2026-02-06T16:16:50Z")
@Max Any Update on this? Thanks
---
### Author:  [@user2283](https://community.elfsight.com/u/user2283)
#### Post date: [February 9, 2026, 8:44am UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/6 "2026-02-09T08:44:43Z")
@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!
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [February 9, 2026, 10:58am UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/8 "2026-02-09T10:58:28Z")
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:
```auto
.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:
```auto
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](https://help.elfsight.com/article/1471-how-to-share-widget-via-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:
```auto
.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 🙂
---
### Author:  [@user2283](https://community.elfsight.com/u/user2283)
#### Post date: [February 9, 2026, 12:53pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/9 "2026-02-09T12:53:21Z")
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!
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [February 9, 2026, 1:20pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/10 "2026-02-09T13:20:53Z")
Sure! Here is a CSS code to move the rating in the popup and remove empty space:
```auto
.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 🙂
---
### Author:  [@user2283](https://community.elfsight.com/u/user2283)
#### Post date: [February 9, 2026, 1:42pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/11 "2026-02-09T13:42:40Z")
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
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [February 9, 2026, 2:05pm UTC](https://community.elfsight.com/t/star-position-and-font-change/143800/13 "2026-02-09T14:05:53Z")
Yep, here is a code to change the size of the bullets:
```auto
.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:
```auto
.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 😉