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

Text Styling Part of Slideshow Gallery Captions in 7.1


Don42

Question

Site URL: https://www.aawcollective.com/shaun-oboyle-visual-dissonance-caption-test

Hello,

I am at my wits end, but I am sure there is someone here who has had to do this before, or would know how. I have searched the forums and found promising threads, but none specify for this, and none worked for me.

I have Slideshow Galleries in 7.1 and I need to format parts of the captions (descriptions). The images are artwork, and they have Artist, Title, Year under them. The Title must be in italics. 

I know there is no HTML editing of them in 7.1 (which is such glaring omission) as there was in 7.0. However, I am sure there is a way to do it in CSS, putting code on individual pages to specify by slide# and caption text which parts get font-style: italic; or font-style: oblique;, but getting the right CSS is beyond my skills.

Something like the code below by tuanphan I found on another thread? I know it would be a lot of work, but I don't know any other way to do it.

The page is not live, and is test page copy.

https://www.aawcollective.com/shaun-oboyle-visual-dissonance-caption-test

Password: F0RUMH3LP

Any help would be amazing. Thanks in advance, Don

 

/* image 1 */

.sqs-gallery-block-grid .slide:nth-child(1) .image-slide-title:after {

content: "Dinosaur line 2"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px;

}

/* Image 2 */

.sqs-gallery-block-grid .slide:nth-child(2) .image-slide-title:after {

content: "Banana 02"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px;

}

 

Edited by Don42
wrong URL
Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Thanks!

Site URL: https://www.aawcollective.com/shaun-oboyle-visual-dissonance-caption-test Hello, I am at my wits end, but I am sure there is someone here who has had to do this before, or would know

The nth-child code didn't seem to work as expected. It turned all the captions red even thought 5 was specified and when I change the number, none were turned red. The biggest issue is I need only PAR

Posted Images

7 answers to this question

Recommended Posts

  • 0
1 hour ago, Don42 said:

Site URL: https://www.aawcollective.com/shaun-oboyle-visual-dissonance-caption-test

Hello,

I am at my wits end, but I am sure there is someone here who has had to do this before, or would know how. I have searched the forums and found promising threads, but none specify for this, and none worked for me.

I have Slideshow Galleries in 7.1 and I need to format parts of the captions (descriptions). The images are artwork, and they have Artist, Title, Year under them. The Title must be in italics. 

I know there is no HTML editing of them in 7.1 (which is such glaring omission) as there was in 7.0. However, I am sure there is a way to do it in CSS, putting code on individual pages to specify by slide# and caption text which parts get font-style: italic; or font-style: oblique;, but getting the right CSS is beyond my skills.

Something like the code below by tuanphan I found on another thread? I know it would be a lot of work, but I don't know any other way to do it.

The page is not live, and is test page copy.

https://www.aawcollective.com/shaun-oboyle-visual-dissonance-caption-test

Password: F0RUMH3LP

Any help would be amazing. Thanks in advance, Don

 

/* image 1 */

.sqs-gallery-block-grid .slide:nth-child(1) .image-slide-title:after {

content: "Dinosaur line 2"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px;

}

/* Image 2 */

.sqs-gallery-block-grid .slide:nth-child(2) .image-slide-title:after {

content: "Banana 02"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px;

}

 

You can select the caption the gallery on your page using

#collection-5fff8ca47e274a46bd1eadf3 .gallery-slideshow-item:nth-child(5) .gallery-caption-content {
  color: red;
}

So far I selected item 5th, you can add more by your own

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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

It's a bit of a hack and it could break at any minute but at this time the Gallery page section does allow the entry of some html in the description field.

Shaun O’Boyle, <span class="gallery-caption-content-italic">Sample Italic or Oblique Title Here</span>, 2015 image

328318288_ScreenShot2021-01-13at5_47_02PM.png.6c2d885355786c577898d03a627af489.png

Ignore the typo in the sample image. If you get it right it will work! 🙂 For now.

Now that a class has been added via the span tag you can target it with some CSS. Add the following to Design > Custom CSS.

.gallery-caption-content-italic {

  font-style: italic;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

The nth-child code didn't seem to work as expected. It turned all the captions red even thought 5 was specified and when I change the number, none were turned red. The biggest issue is I need only PART part of a caption to be effected.

The hack with HTML in gallery description block worked a treat. I guess I will just have to be prepared to delete the code if it breaks.

I would hope there is a fix for this hole in the functionality for 7.1 coming.

Thanks, Don

Link to post
  • 0
On 1/17/2021 at 8:52 AM, Don42 said:

The hack with HTML in gallery description block worked a treat. I guess I will just have to be prepared to delete the code if it breaks.

If it does break in the future come back to us and let us know. There are other things that might be done but they involve going a litter deeper into the issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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