Jump to content

Can't target a specific image gallery section (not add gallery block) with CSS

Go to solution Solved by Beyondspace,

Recommended Posts

Trying to apply CSS to a specific  image gallery section ((add gallery/images - not add gallery block)

I tried entering the section, then yui I see with inspect and ultimately even the entire page with collection but the damn code keeps applying to the entire site and not only on that particular gallery section . Am I getting the syntax wrong or is targeting gallery sections impossible? Forum seems to suggest is doable but cant get it right

section[data-section-id="65eba2ee2952eb7dd0fc1ef9"]     is the one in question. trying to apply it to the following code. Entering that, with or with out the word section, with or without * before { ...code ...}, doesnt seem to work.  What gives?

 

https://www.dphworld.com/santorini/homer

pass 1234

/* LIGHTBOX CONTROLS FOR FLOOR PLANS */
/* General controls and adjustments */
  .gallery-lightbox-controls {
    display: flex !important;
}
.gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * {
    stroke: white;
    stroke-width: 4px;
}
.gallery-lightbox-close-btn-icon * {
    color: white !important;
}
.gallery-grid.gallery-grid--layout-grid {
    align-items: center !important;
}

/* Change the background lightbox color - gallery */
.gallery-lightbox-background {
    background: #404040;
    opacity: 0.8;
}

/* Desktop gallery thumbnail position / per row */
@media screen and (min-width:933px) {
    .gallery-grid-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .gallery-grid.gallery-grid--layout-grid {
        padding-left: 25vw !important;
        padding-right: 25vw !important;
    }
}

/* Mobile gallery lightbox arrow position */
@media screen and (max-width:932px) {
    .gallery-lightbox-control-btn[aria-label="Previous Slide"] {
        left: -22px;
    }
    .gallery-lightbox-control-btn[aria-label="Next Slide"] {
        right: -10px;
    }
  } 
/* END LIGHTBOX CONTROLS FOR FLOOR PLANS */

 

Edited by takis-7124
Link to comment
  • takis-7124 changed the title to Can't target a specific image gallery section (not add gallery block) with CSS
3 hours ago, takis-7124 said:

Trying to apply CSS to a specific  image gallery section ((add gallery/images - not add gallery block)

I tried entering the section, then yui I see with inspect and ultimately even the entire page with collection but the damn code keeps applying to the entire site and not only on that particular gallery section . Am I getting the syntax wrong or is targeting gallery sections impossible? Forum seems to suggest is doable but cant get it right

section[data-section-id="65eba2ee2952eb7dd0fc1ef9"]     is the one in question. trying to apply it to the following code. Entering that, with or with out the word section, with or without * before { ...code ...}, doesnt seem to work.  What gives?

 

https://www.dphworld.com/santorini/homer

pass 1234

/* LIGHTBOX CONTROLS FOR FLOOR PLANS */
/* General controls and adjustments */
  .gallery-lightbox-controls {
    display: flex !important;
}
.gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * {
    stroke: white;
    stroke-width: 4px;
}
.gallery-lightbox-close-btn-icon * {
    color: white !important;
}
.gallery-grid.gallery-grid--layout-grid {
    align-items: center !important;
}

/* Change the background lightbox color - gallery */
.gallery-lightbox-background {
    background: #404040;
    opacity: 0.8;
}

/* Desktop gallery thumbnail position / per row */
@media screen and (min-width:933px) {
    .gallery-grid-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .gallery-grid.gallery-grid--layout-grid {
        padding-left: 25vw !important;
        padding-right: 25vw !important;
    }
}

/* Mobile gallery lightbox arrow position */
@media screen and (max-width:932px) {
    .gallery-lightbox-control-btn[aria-label="Previous Slide"] {
        left: -22px;
    }
    .gallery-lightbox-control-btn[aria-label="Next Slide"] {
        right: -10px;
    }
  } 
/* END LIGHTBOX CONTROLS FOR FLOOR PLANS */

 

Your code is applied for a lightbox, what is the page that lightbox? I dont see it on homepage...

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

Selector the section lightbox is

Quote

[data-lightbox-section-id="65eba2ee2952eb7dd0fc1ef9"]

eg

[data-lightbox-section-id="65eba2ee2952eb7dd0fc1ef9"] .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * {
    stroke: white;
    stroke-width: 4px;
}

 

image.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
6 hours ago, Beyondspace said:

Selector the section lightbox is

eg

[data-lightbox-section-id="65eba2ee2952eb7dd0fc1ef9"] .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * {
    stroke: white;
    stroke-width: 4px;
}

 

image.png

Excellent explanation. Works like a charm. Apparently I was using wrong syntax. Section and lightbox sections are different. Thanks

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.