Edit preset CSS in Upfront Gallery

Good morning,

I would like to make some changes to a gallery in a site using Upfront.
Firstly I would like to change the default font. I have clicked Edit Preset CSS in the Appearance sidebar and made changes to "Image Captions" (in grab reads as .ugallery-thumb-title)
However this seems to have no effect.

I could live with the font but I would like to change the thumbnails. I would like them to be slightly larger and arranged 3 x 3 rather than current setting. As they are now they are not distributing correctly in the container. Is it possible to change this setting?

I've searched support but can find very little about the Upfront theme. My site is hosted locally as I work on it so I'm afraid I can't give you access. I hope you can still give me guidance.

Thanks in advance!
Roseanne

  • Luís

    Hi Roseanne ,

    Hope you're doing well today!

    Firstly, you should always avoid to change the default presets, because it will be applied to all elements of this type (in this case Gallery elements), the best option should be create a new preset to the element. Unless, you want all elements use those styles.

    1) Regarding to the font issue, you should apply the font to the "p" HTML element, so try add this code to your preset custom CSS:

    .ugallery .ugallery-thumb-title p {
        font-family: Oswald;
    }

    2) Regarding to the thumbnails, you can use the panel to increase the size and the padding (the max value allowed is 250px for the size), as shown in the image attached.

    If you want the thumbnails have a bigger size, we will need to use custom CSS. You can try this CSS code:

    /* change thumbnail size */
    .ugallery-image {
        width: 300px !important;
        height: 300px !important;
    }
    
    /* change space between each thumbnail */
    .ugallery_item {
        margin: 0 40px;
    }
    
    /* change caption width */
    .ugallery-thumb-title {
        width: 300px !important;
    }

    However, it's possible that we will need to adjust the code to the other breakpoints (tablet and mobile).

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís