Jump to content

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

Go to solution Solved by Beyondspace,

Recommended Posts

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
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

My testing

image.thumb.png.c362f07e46f6603dd6844fa87aa41e25.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
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

Kindly try removing this line in my previous code

width: 100%;

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
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
  • Solution
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

My testing

image.thumb.png.f94128cd17faf8253286dfc6b56a2591.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
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...

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.