Jump to content

Left-aligned Text on specific Poster Images

Recommended Posts

Site URL: https://www.compagnievlast.com/spectacles/codebreakers

specific page URL: https://www.compagnievlast.com/spectacles/codebreakers

Hi everyone!

Screenshot attached: instead of the default centered-text on Poster Images, I'm looking to left-align only that text on that specific image (so I'm not looking for a CSS code that would apply to the entire website).

Also, and if possible, I'm looking into a 2nd snippet of code for that same Text on that same Poster Image that would top-align that text. Ideally, this text would look best if it was starting right under the top black margin so I'd be looking for a CSS code with a customizable padding in pixels for example, so I can adjust it by myself in the future.   

Any help would be greatly appreciated, thank you!

Screen Shot 2020-11-06 at 8.31.28 PM.png

Link to comment

Copy this custom css and change the top value as you need

I used Find Squarespace Ids extension to get the id

#block-yui_3_17_2_1_1604320727529_4873 .image-title.sqs-dynamic-text {
  text-align: left;
}
#block-yui_3_17_2_1_1604320727529_4873.sqs-block-image .design-layout-poster .image-card-wrapper {
    align-items: flex-start;
    top: 10%;
}

 

image.png

Greeting, it's 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, Keyword Highlighter
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

Hey @bangank36, on that very same topic: how can I get the subtitle text on this other Poster Image centered-align?  (screenshot attached)

same website, different page URL: https://www.compagnievlast.com/spectacles/huis-clos
top poster image, #block-yui_3_17_2_1_1604248252976_6344

I've applied a general justify-text code (which I need for most of that website), but it is having an effect on subtitle texts in Poster Images that is not wanted: left-aligned instead of centered-aligned.  Title still looks fine and hasn't been affected. 

I'm trying to either a) keep the general justify-text code, and find another code to isolate which blocks should not be justified (aka #block-yui_3_17_2_1_1604248252976_6344 should not be justified), or b) replace the current general justify-text code with a smarter one that could filter out text paragraphs placed on images (aka Poster Images).

Would you be able to take a look at it and let me know what you think?
Thank you!

FYI here's the general justify-text code I've been using:
p {
  text-align: justify;
}

 

PS: I also tried customizing your snipped of code to bypass the general justify-text code but I it didn't work out so far...

#block-yui_3_17_2_1_1604248252976_6344.image-subtitle.sqs-dynamic-text {
  text-align: center;
}

Screenshot at Nov 08 00-59-35.png

Link to comment

I used this

#block-yui_3_17_2_1_1604248252976_6344 .image-subtitle.sqs-dynamic-text p {
    text-align: center;
}

 

Greeting, it's 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, Keyword Highlighter
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
  • 2 weeks later...

Hi @bangank36!  On that same Poster Image/Text Alignement topic, here's another thing I'd love to know how to do.

See pic attached (did it on Preview app but I'd like to get the custom css to do that on SquareSpace...)

Page URL: https://www.compagnievlast.com/spectacles/la-ligne-de-partage-des-eaux

On this specific Poster Image (#block-yui_3_17_2_1_1605724655611_3822), I'd like to:

  • reduce the default right margin to push that 'title text' to the far right (ideally a snippet of code so I can customize the margin size by pixel)
  • get that 'column' look so that the text doesn't go above the picture details
  • finally, justify the whole text 

PS: I'm reposting here as your previous answers on that topic were so helpful, but lmk if you'd prefer me to open a new thread for this!  Thanks!

 

Screen Shot 2020-11-18 at 8.52.15 PM.png

Link to comment
3 hours ago, gmajou said:

Hi @bangank36!  On that same Poster Image/Text Alignement topic, here's another thing I'd love to know how to do.

See pic attached (did it on Preview app but I'd like to get the custom css to do that on SquareSpace...)

Page URL: https://www.compagnievlast.com/spectacles/la-ligne-de-partage-des-eaux

On this specific Poster Image (#block-yui_3_17_2_1_1605724655611_3822), I'd like to:

  • reduce the default right margin to push that 'title text' to the far right (ideally a snippet of code so I can customize the margin size by pixel)
  • get that 'column' look so that the text doesn't go above the picture details
  • finally, justify the whole text 

PS: I'm reposting here as your previous answers on that topic were so helpful, but lmk if you'd prefer me to open a new thread for this!  Thanks!

 

Screen Shot 2020-11-18 at 8.52.15 PM.png

#block-yui_3_17_2_1_1605724655611_3822.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
  width: 50%;
  left: auto;
}
#block-yui_3_17_2_1_1605724655611_3822.sqs-block-image .design-layout-poster .image-card {
    width: 80%;
    text-align: justify;
}
#block-yui_3_17_2_1_1605724655611_3822.sqs-block-image .design-layout-poster .image-card>* {
    text-align: justify !important;
}

image.thumb.png.1a713d6271e99a197681c1193094e578.png

Greeting, it's 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, Keyword Highlighter
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
10 hours ago, gmajou said:

Many thanks @bangank36, really helpful!  

On the same image, is there also a css code to reduce the line spacing of this text?  So it looks as close as possible to the screenshot attached.  That'd be great!

#block-yui_3_17_2_1_1605724655611_3822.sqs-block-image .sqs-dynamic-text {
  line-height: 1em !important;
}

 

Greeting, it's 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, Keyword Highlighter
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

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.