Widget Style Customization Guide #

1. Reviews Widget Settings #

1.1 Width and Margin Settings #

Modify widget width and margins:

#vstar-reviews.trustoo-widget {
    max-width: 1600px;     /* Maximum width is 1600px */
    padding: 100px 200px;  /* Top/bottom padding 100px, left/right padding 200px */
}

1.2 Hide UI Elements #

Remove sorting button:

#vstar-reviews div.head-sort {
    display: none;
}

Hide photo upload option in review form:

.trustoo-write-review .upload-area {
    display: none !important;
}

2. Star Rating Widget Settings #

2.1 Icon Size Settings #

Product Page Rating Icons:

.product-icon-list .star-item,
.product-icon-list svg {
    width: 18px !important;   /* Default size is 20px */
    height: 18px !important;
}

Collection Page Rating Icons:

.collection-icon-list .star-item,
.collection-icon-list svg {
    width: 16px !important;   /* Default size is 16px */
    height: 16px !important;
}

2.2 Text Color Settings #

Modify rating text color:

.product-icon-list.vstar-star>.tt-rating-text {
    color: white !important;  /* You can use color names, hex (#fff) or RGB values (rgb(255,255,255)) */
}

2.3 Margin Adjustments #

Modify top and bottom margins:

.product-icon-list.vstar-star {
    margin-top: 10px !important;     /* Default top margin is 10px */
    margin-bottom: 10px !important;  /* Default bottom margin is 15px */
}

3. Carousel Widget Settings #

3.1 Image and Text Carousel #

Width and Margin Settings:

#tt-carousel[data-type=primary] {
    max-width: 1600px !important;
    padding: 100px 200px;
}

Image Size Settings:

#tt-carousel[data-type=primary] .tt-card-footer .tt-reviews-image {
    width: 100px;
    height: 100px;
}

3.2 Text-only Carousel #

#tt-carousel[data-type=text]>.tt-swiper-wrapper {
    max-width: 1600px !important;
    padding: 100px 200px;
}

3.3 Photo Carousel #

#tt-carousel[data-type=photo]>.tt-swiper-wrapper {
    max-width: 1600px !important;
    padding: 100px 200px;
}

3.4 Testimonials Carousel #

#tt-carousel[data-type=barrage]>.tt-swiper-wrapper {
    max-width: 1600px !important;
    padding: 100px 200px;
}

4. Usage Tips #

Size Unit Options #

• Use pixels (px) for precise control or percentages (%) for responsive layouts
• Consider responsive design requirements when choosing units
• Test layouts across different screen sizes to ensure proper scaling

Color Value Support #

• Color names: white, black, etc.
• Hexadecimal values: #fff, #000000
• RGB values: rgb(255, 255, 255)

Best Practices #

• Use !important declarations sparingly to maintain CSS specificity hierarchy
• Implement media queries for mobile responsiveness
• Test changes across different devices and screen sizes
• Note that hidden elements (display: none) will not be accessible to users
• Consider performance implications when modifying carousel settings