Joomla Templates Club 406,261 posts

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#158856

Hi i am trying to find where the image caption code is for me to edit the css and the style of my image captions. I have been looking high and low but could not find it.

Any pointers would be great.

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#372199

Hi @kayz,

You can edit style of image caption on “template.css” file in folder “templates/ja_teline_iv/css/”, around line 202, change these styles


/*Inline images ---*/
div.img_caption { margin-bottom: 15px; margin-top: 15px; }

p.img_caption {
background-color: #000;
border-top: 1px solid #fff;
color: #ccc;
font-family: "Arial Narrow", Arial, sans-serif;
padding: 2px 5px 0;
text-transform: uppercase;
}


[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#372243

Hi Thanlq

Thank you for pointing this out. Yes i know of this p.img_caption but it does not work.

I am using the template not the jumpstart. I check the jumpstart css and it is the same, so what i did was i installed jumpstart to test the caption and it works. But if i use just the teline vi template on my joomla then it does not work.

However i did make it work by doing something else. I took the ‘p’ away, so i was using ‘img.caption’ now this works.

Do you know why it is working without the ‘p’ on my joomla? I am using just the template.

After styling the caption i have a gap below the caption text, i have tried everything to reduce it but i cannot. Please see attached image of the gap.

Your help and assistance would be much appreciated.

---

Attachments:

1. 

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#372311

Hi @kayz,

If you remove the ‘p’ away, style of “.img_caption” apply for all html tag with class name “caption”, the ‘div’ with class ‘img_caption’ was affected by this style, and caption text was incorrect as your screenshot,

Please provide me your website link, i will check and give you solutions, and what do you want to change styles for image caption?

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#372453

<em>@thuanlq 215640 wrote:</em><blockquote>Hi @kayz,

If you remove the ‘p’ away, style of “.img_caption” apply for all html tag with class name “caption”, the ‘div’ with class ‘img_caption’ was affected by this style, and caption text was incorrect as your screenshot,

Please provide me your website link, i will check and give you solutions, and what do you want to change styles for image caption?</blockquote>

Hello Thuanlq and thank you for your reply, you are very helpful.

I change the style of the caption as shown in my example above, this is my caption style. 🙂 I am not using the plugin for the captions either.

Yes i understand taking away the ‘p’ will mean the class for ‘caption’ will apply on all html class name. Can you help me fix this problem please? Because in future i want to use different caption style, if i use with ‘p’ it does not work.

In future i want to use different caption for different sections

e.g.
Caption style 1 for News,
Caption style 2 for Articles,
Caption style 1 for Stories, etc

But for now if i use with ‘p’ it dose not work.

This is my caption css with the screenshot style in previous post.

/*Inline images ---*/
div.img_caption { margin-right: 10px; }

.img_caption {
float: left;
background-color: #ede2e2;
color: #000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 5px;
border-bottom: 5px solid #cb0000;
height: 100%;
}

This is default caption css with the attached screenshot.

/*Inline images ---*/
div.img_caption { margin-bottom: 15px; margin-top: 15px; }

p.img_caption {
background-color: #000;
border-top: 1px solid #fff;
color: #ccc;
font-family: "Arial Narrow", Arial, sans-serif;
padding: 2px 5px 0;
text-transform: uppercase;
}

I have sent you website link via pm, please check. Thank you again.

---

Attachments:

1. 

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#372692

Resolved.

Thank you.

[Author]

Posts