You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#116957 Caption Styles

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Wednesday, 20 November 2024 13:25 GMT

rusasadmins

We have been using the Pro Captions to insert a caption, and we see that by default the caption styles are not accessible (too light of a contrast).

 

I would prefer if the caption area used a 'class', this way I could change it across sites easier.

page:

https://sas.rutgers.edu/about/news/students/students-news-detail/the-one-credit-elective-thats-helping-rutgers-students-survive-general-biology

 

I found that if I run a 'replace' in the entire site of:

style="text-align: left; padding: 4px; color: #999999; background-color: #f2f0e8; display: block;"

and instead put:
class="caption-style"

And create a class for Caption style, I will fix this for the site.

My question is moving forward  is there a better way for me to add captions?  I prefer not having the user 'manually put in code', as they won't do it properly.

 

thanks,

Laura

Ryan

The markup created by the Captions tool is a little bit dated - Captions was created before the <figure> element was available - so it might be better to use Figure from the Format list instead. This will wrap the image in a <figure> tag with an accompanying <figcation> tag which you can write or paste the caption into.

Figure tags can be styled using the Captions tools, or you can style them using a css selector, eg:

figure {
    border: 1px solid #ccc;
}
figcaption {
    background-color: #eee
}

The <figure> tag is a block element, so it cannot exist inside a paragraph, but it is usually used with full width images or media. I use it for images in news articles - https://www.joomlacontenteditor.net/news/jce-pro-2-9-82-released

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan

Where you need "inline" captions inside paragraphs, as in the "Christy Beal" image here - https://sas.rutgers.edu/about/news/students/students-news-detail/the-one-credit-elective-thats-helping-rutgers-students-survive-general-biology - then the Captions tools are still the best solution. You can style them with css using the "w_caption" selector, eg:

.wf_caption {
    border: 1px solid #ccc;
}
/* caption text */
.wf_caption span {
    background-color: #eee;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.