Joomla Templates Club 406,261 posts

[ssinha Friend ssinhaJoin date: July 2014Posts: 183Downloads:57Uploads:11 Thanks: 68 Thanked: 12 times in 1 posts]

#1058625

Since upgrading to new Joomla version and the latest Teline V template, the intro image in all articles get resized automatically. All our images are 800×500 but the template automatically resizes them to 750×385 size. I would like to leave them alone at the original size of 800×500.

I checked the forum and there are literally hundreds of results when searching on image resizing. I tried a few by changing the custom.css but they had no result on the site. Could one of you please look into it?

Another minor problem I am having is the caption on intro image on article pages. Before upgrade, I had red background with white text on it. Now it’s transparent grey with white text on it which is kind of hard to read.

Sure would help on these soon. Thanks.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1058846

Hi,

You can share the credentials of your site and tell me the page where I can replicate the issue.

[ssinha Friend ssinhaJoin date: July 2014Posts: 183Downloads:57Uploads:11 Thanks: 68 Thanked: 12 times in 1 posts]

#1058984

Sending as separate private reply.

[ssinha Friend ssinhaJoin date: July 2014Posts: 183Downloads:57Uploads:11 Thanks: 68 Thanked: 12 times in 1 posts]

#1058985

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1059127

Hi,

It looks like you customized the layout of template so that the width of the main content can’t be equal 800px: http://prntscr.com/gedc4n

With the height of image, you can add this css rule:

.article-main .article-intro-media .item-image { max-height: 100%; }

into the file: [root]/templates/ja_teline_v (your default template)/css/custom.css (create this file if it doesn’t exist)

[ssinha Friend ssinhaJoin date: July 2014Posts: 183Downloads:57Uploads:11 Thanks: 68 Thanked: 12 times in 1 posts]

#1059210

Hi Saguaros, thanks for the help. Your solution worked great except for one minor problem – it creates a double caption line in the image after making the above change in custom.css. See two images attached. One is before the change you suggested when the image size was 750×385 and the second after applying your suggestion with image size being 800×500. The first one shows only one caption while the second one shows two captions.

Obviously, I would like only one caption and get rid of the other while keeping the image size at 800×500.

For convenience, I am also attaching the custom.css file (before applying your change) just in case it might give you a better idea of the problem at hand.

Just to remind you, we used this template almost two years ago when Teline V was released for the first time. At that time, there were several issues with the template, including no native support for caption (a bug). With the help of you guys, we were able to customize the custom.css heavily to the point that everything looked fine to us. Couple of weeks ago when we finally updated the Teline V to the newest version and also upgraded to the latest Joomla, we kept the old copy of custom.css because we didn’t want to go through the headache of going through the headache of customizing to our liking that we did two years ago.

While that strategy did help to some degree, I think it has also created some problem because many of the customization in the custom.css file is no longer required because Joomlart has fixed many of the issues that it had in its initial version.

I just wanted to throw this fact out to you so it might give you proper context of the problem.

(Right now, I have reverted the change you suggested so the captions don’t look bad.)

Thanks for your help, Saguaros.

Edit – custom.css is not allowed to attach.

• This reply was modified 7 years, 2 months ago by  ssinha.

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1059401

You can share the FTP account also so I will take a look.

[ssinha Friend ssinhaJoin date: July 2014Posts: 183Downloads:57Uploads:11 Thanks: 68 Thanked: 12 times in 1 posts]

#1059478

FTP info being sent privately.

[ssinha Friend ssinhaJoin date: July 2014Posts: 183Downloads:57Uploads:11 Thanks: 68 Thanked: 12 times in 1 posts]

#1059479

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1059627

I updated the css into ‘custom.css’ file:

.com_content.view-article .article-main .img_caption p.img_caption {
  display: none;
}

.article-main .article-intro-media .item-image {
  max-height: 100%;
}

[ssinha Friend ssinhaJoin date: July 2014Posts: 183Downloads:57Uploads:11 Thanks: 68 Thanked: 12 times in 1 posts]

#1059683

Thank you Saguaros, looks much better.

One quick question though, how can I change the background color of the caption? Right now it’s kind of transparent grey, I would like it to be of different color (say, red with white font) with no transparency at all.

Appreciate your help very much.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1059825

Hi,

You can define color for it:

.article-main .article-intro-media .img-caption {
  background-color: #cc0000;
  color: #fff;
}

then change to your desired color.

[ssinha Friend ssinhaJoin date: July 2014Posts: 183Downloads:57Uploads:11 Thanks: 68 Thanked: 12 times in 1 posts]

#1059896

Thank you very much Saguaros. That worked perfectly. Appreciate your help in resolving these issues. We can close this topic now.

[Author]

Posts