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 6 months ago ago by Luca Rossi

  • Avatar: VincentC
    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
    Avatar: Justin
    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
    Avatar: VincentC
    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
    Avatar: Justin
    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
    Avatar: VincentC
    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
    Avatar: Justin
    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
    Avatar: VincentC
    VincentC
    Participant
    August 21, 2024 at 10:27

    Hello,

    This worked just great! Thanks for your help!

    Kind Regards,
    Vincent C

    #410983 Copied
    Avatar: Justin
    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: , , , , ,

  • 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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Pet Shop – WordPress WooCommerce Theme
lazy-placeholder
Photographer – WordPress WooCommerce Theme
lazy-placeholder
Business – WordPress WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Handtools Store – WooCommerce Theme
lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme
lazy-placeholder
Niche Market 02 – Multivendor WP WooCommerce Theme
lazy-placeholder
Restaurant – WordPress WooCommerce Theme
lazy-placeholder
Rental Car – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.