Return to previous page

Is there a way to edit the style of the post galleries?

This topic has 8 replies, 2 voices, and was last updated 4 months ago ago by Luca Rossi

VincentC

Participant

August 19, 2024 at 16:04

Hello,

Is there a way to edit the style of the default gallery widget that you can add to a post? If you check the link I provided you can see the sizes of the images are different on each image. Is there a way to create a masonry or something? Using a new plugin is kinda hard as these posts are already made and creating new galleries will takes ages.

When they made the posts, they used the default gallery and it looked good on their old theme, but now it really looks off.

So I was wondering xstore has an option somewhere or if you have code that can fix it?

Kind Regards,
Vincent

Please, contact administrator
for this information.

#410741 Copied Theme version: 9.3.17

7 Answers

Luca Rossi

Support staff

August 20, 2024 at 10:47

Dear @VincentC,

We recommend utilizing Elementor for editing your posts, as it includes various masonry gallery elements that might be beneficial. Please consider trying them out.

For your reference, here are some examples:
– [https://prnt.sc/c7mHRN_QdJcv](https://prnt.sc/c7mHRN_QdJcv)
– [https://prnt.sc/Z1BvzKPf6hnT](https://prnt.sc/Z1BvzKPf6hnT)

Best regards,
The 8Theme Team

#410824 Copied

VincentC

Participant

August 20, 2024 at 10:56

Hello,

I am aware that Elementor has these options and we will use it for future posts however, my client already made 40+ posts the old way and we are now redesigning the layout with xstore. But now the galleries don’t look good. I don’t really want to redo the whole galleries as that will take a while.

Kind Regards,
Vincent

#410826 Copied
Luca Rossi

Support staff

August 20, 2024 at 16:17
Dear Vincent,

We hope this message finds you well. Regarding your inquiry, I recommend implementing the following custom CSS code to achieve the desired styling for your gallery images. Please navigate to XStore > Theme Options > Theme Custom CSS > Global CSS and add the code provided below:
```
div.gallery .gallery-item img {
    object-fit: cover;
    max-height: 250px;
}
```
You are welcome to adjust the max-height value from 250px to better suit your specific requirements.

Should you need any further assistance or have additional questions, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#410901 Copied
VincentC

Participant

August 20, 2024 at 17:44

Hello,

Works like a charm. Do you possibly know how I can make it when I hover over the images it does it like the example I showed you attached to this reply?

Kind Regards,
Vincent

Files is visible for topic creator and
support staff only.

#410910 Copied
Luca Rossi

Support staff

August 21, 2024 at 06:52
Hi @VincentC,

Please try adding this custom CSS codes also:
```
dl.gallery-item a {
    position: relative;
    display: block;
}
dl.gallery-item a::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 5%;
    left: 4%;
    width: 92%;
    height: 90%;
    border: 1px solid #fff;
    transition: all 0.5s ease-in;
    opacity: 0;
    background-image: url(https://cdn-icons-png.flaticon.com/128/11741/11741045.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px auto;
}
dl.gallery-item:hover a::before {
    opacity: 1;
}
```
Don’t forget to replace the search icon with your icon: https://cdn-icons-png.flaticon.com/128/11741/11741045.png.

Hope it helps!
#410945 Copied
VincentC

Participant

August 21, 2024 at 10:27

Hello,

This worked just great! Thanks for your help!

Kind Regards,
Vincent C

#410983 Copied

Luca Rossi

Support staff

August 21, 2024 at 10:32

Hi @VincentC,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#410986 Copied
Tagged: customize woocommerce post galleries, edit gallery style woocommerce, post galleries style edit, woocommerce theme gallery modification, woocommerce wordpress themes customization, wordpress themes gallery design
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Is there a way to edit the style of the post galleries?’' has been successfully resolved, and the topic is now closed for further responses

Is there a way to edit the style of the post galleries?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection