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

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

Question

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.

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

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;
}

 

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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%);
}

 

Share this post


Link to post
  • 0

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!

 

Share this post


Link to post
  • 0
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.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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...