Jump to content

How to center-align text of a Slideshow overlay in Adirondack

Recommended Posts

Hello, I'm using the Adirondack template and I have a slideshow for images on a page. I like the idea of having a caption appear when I hover over the image, and have that option checked in the "Design" tab of Edit. The problem I have is I would like the text to be center aligned in the overlay (on hover). Currently, it's left justified. Note: I do see the dropdown in the "Design" tab that allows me to move the overlay (on hover) to a part of the image. Ex: center, bottom left, bottom right, etc. But that just moves the overlay's placement on the image. I'm looking to move the text within the overlay itself. 

Furthermore, I don't see any place to adjust the text's font, color, size, etc. of the overlay. 

Does anyone know have any code or steps that can be inserted to allow me to make these adjustments? Thanks so much.

 

Cheers.

Link to comment

Hi @natejmedia

Try adding this code to Design > Custom CSS:

.sqs-gallery-block-slideshow .meta .meta-title, .sqs-gallery-block-slideshow .meta .meta-description {
  text-align: center;
}

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

Thank you so much! That worked perfectly 🙂 Thanks, again! Any chance you might know how to also change the text font, color, weight, etc.? And lastly (and least importantly), what about that fade that the text sits on? Currently, it sits on a horizontal black bar that spans the image and starts and maybe 50% opacity at the bottom and goes to 0% opacity about 35 pixels or so upward. Great effect, but just looking to maybe charge the starting opacity at the bottom to maybe 70%. Or perhaps increase the height of the overlay bar. Thanks so much!! I can't tell you how much I appreciate it. 

Edited by natejmedia
Additional question
Link to comment

Sure. For the font color, weight, etc. you can just add those lines in with the code above, so something like this:

.sqs-gallery-block-slideshow .meta .meta-title, .sqs-gallery-block-slideshow .meta .meta-description {
  text-align: center;
  font-size: 30px;
  color: #000000;
  font-weight: 700;
}

Changing the font, you'd add in a line for font-family: new-font;
You'd just want to make sure that font is actually loaded on the site.
 

For the opacity, this adjusts the starting opacity at the bottom to 70%:], but you can play around with the colors and percentages. There's different code for the different rendering engines (-ms is for Internet Explorer, etc.):

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
    background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(30,30,30,.7)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(30,30,30,.37) 100%);
}

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 6 months later...
3 hours ago, Sharayah said:

This doesn't work for me! I have no idea what I am doing wrong, but I have tried everything, I can not get my Grid gallery block to centre-align the descriptions!

 

Can you share link to page where you inserted Gallery Grid? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
7 hours ago, rsdelfabbro said:

This worked great for me (thanks!)...except the captions are not showing up on mobile. Any ideas?

Try adding to Design > Custom CSS

@media screen and (max-width:900px) {
	.sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
.sqs-gallery-block-slideshow .meta .meta-title {
    line-height: 20px !important;
}
.meta-inside {
    padding-top: 0 !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    height: auto !Important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks @tuanphan This worked but seems spotty. I'll keep working with it though. I have another couple questions regarding this same site.

  1. I want to add a pre-footer so that it appears on every page. I would like to use the predesigned layout "General 2" and remove everything but the simple list section. How can I do that? That layout is not an option to select when designing the footer.
  2. I added my own backround image to my slideshows. But in mobile they run very long (see screenshot). How can I reduce them for mobile only?

What's the best way to send you the site info privately so you can see what I'm talking about?

Screen Shot 2022-06-16 at 11.57.08 AM.png

Edited by rsdelfabbro
adding a screenshot
Link to comment
On 6/16/2022 at 10:53 PM, rsdelfabbro said:

Thanks @tuanphan This worked but seems spotty. I'll keep working with it though. I have another couple questions regarding this same site.

  1. I want to add a pre-footer so that it appears on every page. I would like to use the predesigned layout "General 2" and remove everything but the simple list section. How can I do that? That layout is not an option to select when designing the footer.
  2. I added my own backround image to my slideshows. But in mobile they run very long (see screenshot). How can I reduce them for mobile only?

What's the best way to send you the site info privately so you can see what I'm talking about?

Screen Shot 2022-06-16 at 11.57.08 AM.png

Can you share link to page in screenshot? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.