Public Forums 71,145 posts

[ponce Friend ponceJoin date: September 2008Posts: 9Downloads:0Uploads:3 Thanks: 2]

#150616

Another JA Purity II user here. I’d like to modify default image caption style to make the captions look similar to the example below. It’s a screenshot from a non-Joomla website.

The way I understand it, the code responsible for getting is in template.css It was modified by me already. But those were only minor changes (colors, text-alignment). The caption by default is wrapped in a <p> tags which makes it look bad because of the large space between the bottom of the image and the caption itself. Could the <p> tag be replaced by <div> tag for example? If so, then how? If not, then maybe the gap between the image and the caption could be reduced?

As you can see from the image included, I’d like the caption to have a different text color, a background and a border around it. template.css file seems to have these values in .img_caption p but any changes I make to that part have no effect.

Another problem is that the width of the caption exceed the width of the image

/*Inline images ---*/
img.caption { margin-top: 1px; font-size: 10px; }

.img_caption { color: #000; margin-bottom: 5px; }

.article-content { text-align: justify; }

.article-content img { margin: 5px; border: 1px solid #DBDBDB; }

.img_caption img { margin: 1px 0 0; }

.img_caption p {
background-color: #DBDBDB;
border-top: 1px solid #DBDBDB;
color: #000;
margin: 0;
padding: 1px 0;
text-align: left;
}

This is what I want:

And this is what I have now:

Any help would be greatly appreciated.

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#341970

Something like this?

replace code in template.css with this:


.img_caption p {
background:none repeat scroll 0 0 #333333;
color:#CCCCCC;
font-size:100%;
font-weight:bold;
margin:0;
padding:5px 0;
text-align:center;
}


Peace,
Gabriel

1 user says Thank You to toymaker for this useful post

1. ponce

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#341978

oh.. sorry for that last post.. you are probably looking for something like this?

Replace the whole block in template.css where it sets for inline images…


/*Inline images ---*/
img.caption { padding: 1px; }
.img_caption {
color: #999;
margin-bottom: 10px;
border: 1px solid #ccc;
}
.article-content img { margin: 5px; }
.img_caption img { margin: 0; }
.img_caption p {
color: #ccc;
margin: 0;
padding: 5px;
text-align: center;
border:none;
font-size:100%;
font-style:italic;
line-height:1.2em;
}


Hope this helps 🙂

Gabriel

[ponce Friend ponceJoin date: September 2008Posts: 9Downloads:0Uploads:3 Thanks: 2]

#342053

Thanks for your reply Gabriel. The result wasn’t eactly what I wanted but at least there were some changes made to the original style. Here’s what it looks like now:

There are two things I’d like to be changed from this point:

1. Reduce the gape between the bottom of the image and the caption. This empty space is created because the caption is included in a new pararaph, right? Is it possible to change it so that it uses <br> tag instead of <p>? I’d like tha caption to be attached to the image just as it is shown in my first post.

2. Change the width of the caption so it’s the same as the width of the image. Right now the caption uses the whole content area’s width and because of that it’s wider than the image. There was an option to set the width of the caption when adding image in Joomla! 1.0 but there’s no such option in Joomla! 1.5.

Hopefully someone can help me solve those issues. Thanks in advance.

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#342070

ok.. there are two problems here.

1.- What Joomla does, is it creates a div to wrap both, the image that is being captioned, and the new paragraph tags of the caption itself. This piece of code, located inside caption.js, also creates the styling based on the information you provide for the image inside the article. Sooooo, to avoid having a caption that spans the whole article width, you have to make sure the images width and height ARE SET. The editor will do this for you if you try to resize the image and the bring it to its original size with your mouse. This will make the wrapping div have the exact same size as the image and thus, making your caption text wrap to the next lines…

2.- For some strange reason you have something different as I do. :confused:

Check your code and make sure you are doing things correctly. With the following updated code you should get something like the image im providing as an example.


/*Inline images ---*/
img.caption { }
.img_caption {
color: #999;
margin-bottom: 10px;
border: 1px solid #ccc;
}
.article-content img { margin: 5px; }
.img_caption img { margin: 0; }
.img_caption p {
color: #ccc;
margin: 0;
padding: 5px;
text-align: center;
border:none;
font-size:100%;
font-style:italic;
line-height:1.2em;
}

---

Attachments:

1. 

[ponce Friend ponceJoin date: September 2008Posts: 9Downloads:0Uploads:3 Thanks: 2]

#342086

Entering image dimensions manually did the trick. Thanks again Gabriel. The code in template.css was correct. Though I was unable to fix the width of the caption in the article which was included in the picture above. But it worked on others so it’s not a big problem.

P.S. As strange as it is, the style of the caption on that article didn’t even change. I tried re-adding the image again but it still displays the old-style caption.

P.S. 2. Problem fully solved.

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#342093

Good to know 🙂

Peace,
Gabriel

[Author]

Posts