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

CSS Injection To Move/Change Image Title in Gallery Page Wells


Frank_Mound

Question

Site URL: http://www.frankmeuschke.com

Hi. Looking for help with CSS injection to change position of the image title in Wells 7.0 Gallery Page. It appears to be either on the left sidebar when large or overlapping image when medium size. I'd really like it to be 1.5 lines beneath the image, left side and stick with that placement regardless of browser window size.

I've used this forum to find code to inject to change the font size of the image title (great, thanks!), but I see it is still the same in mobile (thick font -darn ugly) and I'd like that to be the same lightweight (normal?) font as on the desktop version.

Thank you. Attached are some page examples of the image title location problem and the mobile version thick font.

 

www.frankmeuschke.com

Screen Shot 2022-01-17 at 1.40.48 PM.png

Screen Shot 2022-01-17 at 1.41.03 PM.png

Screen Shot 2022-01-17 at 1.48.06 PM.png

Link to comment
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 0
6 hours ago, Frank_Mound said:

Ok, so seems to me too many complications -didn't really work on all browser sizes. So I have changed the page to a blank with a gallery block. It is not as responsive, but I can have the description below the images.

Is there CSS to change the characteristics of the hover title and scroll arrows -i.e. color of font, background transparency color and size, or even to push titles below image and arrows off the image. Thank you!

Try for the title

#block-a80fd1152cabf450a72f .slide.loaded .meta {
  position: relative;
  opacity: 1 !important;
  margin:0;
  background: transparent;
}

#block-a80fd1152cabf450a72f .slide.loaded .meta-title {
  color: #000;
  white-space: nowrap;
}

#block-a80fd1152cabf450a72f .sqs-gallery-block-slideshow .meta-inside {
  padding-left: 0;
}
#block-a80fd1152cabf450a72f .sqs-gallery {
  margin-bottom: 50px;
}

Let me know how it works on your site

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
10 hours ago, Frank_Mound said:

Site URL: http://www.frankmeuschke.com

Hi. Looking for help with CSS injection to change position of the image title in Wells 7.0 Gallery Page. It appears to be either on the left sidebar when large or overlapping image when medium size. I'd really like it to be 1.5 lines beneath the image, left side and stick with that placement regardless of browser window size.

I've used this forum to find code to inject to change the font size of the image title (great, thanks!), but I see it is still the same in mobile (thick font -darn ugly) and I'd like that to be the same lightweight (normal?) font as on the desktop version.

Thank you. Attached are some page examples of the image title location problem and the mobile version thick font.

 

www.frankmeuschke.com

Screen Shot 2022-01-17 at 1.40.48 PM.png

Screen Shot 2022-01-17 at 1.41.03 PM.png

Screen Shot 2022-01-17 at 1.48.06 PM.png

Try adding to Home > Design > Custom Css

#collection-614cd47a24319c70ccde0401 #galleryWrapper  .meta {
  width: 100%;
  max-width: unset;
  margin-left: 240px;
  right: unset;
}

#collection-614cd47a24319c70ccde0401 #galleryWrapper .image-title strong {
  font-weight: bold;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

My testing

image.thumb.png.c362f07e46f6603dd6844fa87aa41e25.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 1/18/2022 at 12:22 AM, bangank36 said:

My testing

image.thumb.png.c362f07e46f6603dd6844fa87aa41e25.png

It seems to work, thank you! However, two details I need to fix. As in the sample below, it appears the image title isn't in line with the image, it is to the left. The other issue that has changed since the CSS -on other gallery pages, where there is a description below the image, the description appears double spaced. Examples below:

Screen Shot 2022-01-19 at 12.58.41 PM.png

Screen Shot 2022-01-19 at 12.59.01 PM.png

Link to comment
  • 0

Ok, I can change the double spacing via the text box formatting, so that problem is solved. What I'd like to see is the image title change with the left edge of the image instead of being fixed on the left edge of the image wrapper or container. Is that possible?

Link to comment
  • 0

Also, now with your helpful CSS, playing around with adding a description under the image. That overlaps the image now. I'm sure there is code to drop the text below an image which has no set size (based on browser window size). Getting closer!

Link to comment
  • 0

Kindly try removing this line in my previous code

width: 100%;

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
16 hours ago, bangank36 said:

Kindly try removing this line in my previous code

width: 100%;

 

Ok, so seems to me too many complications -didn't really work on all browser sizes. So I have changed the page to a blank with a gallery block. It is not as responsive, but I can have the description below the images.

Is there CSS to change the characteristics of the hover title and scroll arrows -i.e. color of font, background transparency color and size, or even to push titles below image and arrows off the image. Thank you!

Edited by Frank_Mound
Link to comment
  • 0

My testing

image.thumb.png.f94128cd17faf8253286dfc6b56a2591.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 1/20/2022 at 5:00 PM, bangank36 said:

My testing

image.thumb.png.f94128cd17faf8253286dfc6b56a2591.png

Ok! Seems to be working after I removed former CSS. What I would like to do now is remove the light gray box that bounds the image (see attached) and if possible, make the title text a bit smaller font, or maybe Italic. I added -1REM to get the title box a bit closer to the image. Seems to work. Here is the code as it stands now:

#block-a80fd1152cabf450a72f .slide.loaded .meta-title {
  color: #696969;
  white-space: nowrap;
}
  #block-a80fd1152cabf450a72f .sqs-gallery {
  margin-bottom: 20px;
}
#block-a80fd1152cabf450a72f .slide.loaded .meta {
  position: relative;
  opacity: 1 !important;
  margin: -1rem;
  background: transparent;
}
#block-a80fd1152cabf450a72f .sqs-gallery-block-slideshow .meta-inside {
  padding-left: 10;
}

 

Screen Shot 2022-01-21 at 10.30.05 AM.png

Edited by Frank_Mound
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...