Joomla Templates Club 406,261 posts

[desiretart Friend desiretartJoin date: March 2009Posts: 75Downloads:19Uploads:8 Thanks: 20]

#662205

Hi

We would like to customize the caption on the photos.

We would like a frame around the photo and on the bottom insert the caption. Please see photo below

We tried to include on custom.css the code below however it is not working properly

.timeline figcaption {
font: 900 190% ‘Roboto’;
text-transform: uppercase;
-webkit-text-stroke: .25px;
}
figcaption {
background: #eee none repeat scroll 0 0;
clear: both;
color: #666
font-size: 10px;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}

and this is the result. Please see the photo

How can we achieve the result?

Thank you very much

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#662347

Hi @desiretart,

The JCE Editor has built-in function to that so you might want to give it a try.

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#662524

I have tried to enter image captions with JCE in Teline V using ‘caption’ class as I use in Teline IV but without success. Also, unlike in Teline IV this class does not automatically add image margins.

[desiretart Friend desiretartJoin date: March 2009Posts: 75Downloads:19Uploads:8 Thanks: 20]

#662527

Dear Adam m.

Thank you very much for the advise. However, in the same line that @timtecsa the component is not working as expected.

Do you know how can we standardize the code on the custom.css?

Again thank you very much for your recommendation

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#662549

Hi @timtecsa, @desiretart :

First, you will have to use JCE Editor to insert image caption there, then I will continue with the CSS part. In case you don’t use caption for image, just open file templatesja_teline_vcsscustom.css (if you don’t have this file, create a new one) then add this code :

.article-full .article-content img {
border: 1px solid #ddd;
margin: 10px;
padding: 20px;
}

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#745737

Hi @timtecsa, @desiretart :

First, you will have to use JCE Editor to insert image caption there, then I will continue with the CSS part. In case you don’t use caption for image, just open file templatesja_teline_vcsscustom.css (if you don’t have this file, create a new one) then add this code :

.article-full .article-content img {
border: 1px solid #ddd;
margin: 10px;
padding: 20px;
}

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#662636

H Adam,

I added custom code suggested and added an image and caption with JCE in test site article here: http://gpmt5d.gpmnews.com/index.php/world/22-us-canada/371-obama-says-he-ll-order-action-to-aid-immigrants

But no caption appeared. See below.

Tim

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#745794

H Adam,

I added custom code suggested and added an image and caption with JCE in test site article here: http://gpmt5d.gpmnews.com/index.php/world/22-us-canada/371-obama-says-he-ll-order-action-to-aid-immigrants

But no caption appeared. See below.

Tim

[desiretart Friend desiretartJoin date: March 2009Posts: 75Downloads:19Uploads:8 Thanks: 20]

#662839

Hi Adam

Unfortunately, your solution is not working for me.

We were surfing on internet I found this code that allow us to achieve a little bit, using the normal joomla editor,

figure {
border: 1px solid #BDBDBD
background: #E0E0E0
padding: 3px;
margin:0px;
}
figcaption {
display: block;
font-size: 12px;
text-align: center;
}

We hope that you can amend it

Thank you very much

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#662851

Hi @timtecsa, @desiretart,

You might want to have a look here.

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#663026

Hi Adam,

Thanks. Meanwhile I tried using the image button at the bottom of the edit window and managed to get a reasonable result. Will need to add some custom css but at least it’s a start.

custom css for above:}
.article-full .article-content img {
border: 1px solid #ddd
margin-right: 10px;
margin-top: 5px;
padding: 5px;
}
.text-left {
text-align: left;
font-size: 80%;
}

Note: Only covers pull-left and doesn’t wrap the caption if longer than image width. Not sure how to do that. I also added back the image border. see: http://gpmt5d.gpmnews.com/index.php/world/22-us-canada/371-obama-says-he-ll-order-action-to-aid-immigrants

Tim

Just noticed this page in FF is all screwed up but OK in Chrome and Safari.

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#745970

Hi Adam,

Thanks. Meanwhile I tried using the image button at the bottom of the edit window and managed to get a reasonable result. Will need to add some custom css but at least it’s a start.

custom css for above:}
.article-full .article-content img {
border: 1px solid #ddd
margin-right: 10px;
margin-top: 5px;
padding: 5px;
}
.text-left {
text-align: left;
font-size: 80%;
}

Note: Only covers pull-left and doesn’t wrap the caption if longer than image width. Not sure how to do that. I also added back the image border. see: http://gpmt5d.gpmnews.com/index.php/world/22-us-canada/371-obama-says-he-ll-order-action-to-aid-immigrants

Tim

Just noticed this page in FF is all screwed up but OK in Chrome and Safari.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#663811

Hi @timtecsa,

Please change the previous code I suggest to add to custom.css file :

.article-full .article-content image {
border: 1px solid #ddd;
margin-right: 10px;
margin-top: 5px;
padding: 5px;
}

with :

.article-full .article-content figure {
border: 1px solid #ddd;
margin-right: 10px;
margin-top: 5px;
padding: 5px;
}

Notice that the selector change from image to figure. In order to fix the case where image caption is wider than the image itself, you will have to toggle to Text mode (not Visual mode) in JCE Editor, find the tag figure and add inline style as below :

<figure style="max-width: 140xp">

Assuming that the image size is 128px width, so the max-width would be 128 + 10 (left / right padding) + 2 (border left / right) = 140px.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#746148

Hi @timtecsa,

Please change the previous code I suggest to add to custom.css file :

.article-full .article-content image {
border: 1px solid #ddd;
margin-right: 10px;
margin-top: 5px;
padding: 5px;
}

with :

.article-full .article-content figure {
border: 1px solid #ddd;
margin-right: 10px;
margin-top: 5px;
padding: 5px;
}

Notice that the selector change from image to figure. In order to fix the case where image caption is wider than the image itself, you will have to toggle to Text mode (not Visual mode) in JCE Editor, find the tag figure and add inline style as below :

<figure style="max-width: 140xp">

Assuming that the image size is 128px width, so the max-width would be 128 + 10 (left / right padding) + 2 (border left / right) = 140px.

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#663830

I updated the custom.css per your new code but it seems to not understand. Has lost right margin.

http://gpmt5d.gpmnews.com/index.php/world/22-us-canada/371-obama-says-he-ll-order-action-to-aid-immigrants

custom.css is now

}
.article-full .article-content figure {
border: 1px solid #ddd
margin-right: 10px;
margin-top: 5px;
padding: 5px;
}
.text-left {
text-align: left;
font-size: 80%;
}

update: I added an extra margin per below, in red, and it appeared ?????

.article-full .article-content figure {
border: 1px solid #ddd
margin-right: 10px;
margin-top: 5px;
padding: 5px;
margin-right: 10px;

update 2

See below Inspect Element screen grab. 2nd margin code gone awol. I’m really lost now 🙁 Maybe I only added it temporarily in Inspect Element.

Am off to do battle in Calais to get car thru Eurotunnel tomorrow morning for a 2 day UK break, so off forum until Sunday.

[Author]

Posts