Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
jessewaugh

Change Gallery Block Background Color?

Question

Is there anyone out there who can tell me how to change the color of a gallery block background? Code would be okay, but I don't have a developer account / access. Basically I would like a black background behind the images in the gallery. Or dark gray.

Edited by JesseWaugh

Share this post


Link to post

17 answers to this question

Recommended Posts

  • 8
Guest

You can accomplish this with CSS by changing the color of the .sqs-gallery-block-slideshow. Add the following to your CSS:


.sqs-gallery-block-slideshow {
background-color: rgba(255,255,255,0); 
}

The above will set it to transparent. You can replace "rgba(255,255,255,0)" with anything you'd like to set the color to whatever you'd like.

Share this post


Link to post
  • 0

Also, a good "color picker" site is: http://www.colorpicker.com. You would just change the first three "255" values to red, green and blue respectively. The last value, "0", ranges from 0 to 1 (1 being visible and 0 being transparent). So if you wanted to use red that was half transparent, you would use:


rgba(255, 0, 0, 0.5);


Hey there.

Share this post


Link to post
  • 0

Hi, I have the same problem and I was wondering if you could give me a step by step on how/where to insert that code? I have no experience in using coding in any way but I do want to change the background colour of my images to white or transparent (it's currently light grey). Thank you.

Share this post


Link to post
  • 0

That code goes in the Custom CSS area. Here's the code modified to white rather than transparent (just replaced the last 0 with a 1):

.sqs-gallery-block-slideshow { background-color: rgba(255,255,255,1); }

Share this post


Link to post
  • 0

Hi I tried the code above and did not work for my page gallery block... Is there something else we need to insert in the CCS editor at the beg or end along with the code provided? THANKS!

Share this post


Link to post
  • 0
Guest

Anyone know if this can be used to for a background image?

Share this post


Link to post
  • 0

Thank you so much for this code:.sqs-gallery-block-slideshow { background-color: rgba(255,255,255,1); }

This worked perfectly on Flatiron template!

Edited by juanita187
Initial Revision

Share this post


Link to post
  • 0

I was having trouble with it working b/c I inserted it into the "advanced" settings tab of the specfic page with the gallery block. Instead, I was able to get it to work by inserting the code under DESIGN > CUSTOM CSS with nothing additional.

Share this post


Link to post
  • 0

If you use a Grid Gallery Block, you can add this code to the Custom CSS panel


.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown){
 background-color:white;
 padding-bottom:1px;
}

Hope it helps!

Edited by jcuvdb
Initial Revision

Share this post


Link to post
  • 0

hello, I tried this yesterday and it worked. But I later noticed that on 2 other pages, my "spacers" became white as well. Please can you help out with a code that will limit the white color change to only the gallery block background?Many thanks!

Edited by StN
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...