Text Styling Part of Slideshow Gallery Captions in 7.1

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

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

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.

Thanks for responses. I will give these a try and let you know. Don

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

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.

Thanks!