Joomla Templates Club 406,261 posts

[scarney Friend scarneyJoin date: August 2010Posts: 123Downloads:0Uploads:11 Thanks: 8 Thanked: 5 times in 1 posts]

#168011

I am having problems figuring out how to add some padding to the left side of images that are alighted to the right side of an article. the padding on the right of the images is good. The padding on the right of images that are alighted on the left is also good. But, I could not find a place to adjust the left alignment on an image that is right aligned to the article:
example page: http://www.drcarney.com/ There needs to be padding on the left of the Caution image.

I also added an image to a category description and discovered that it also has no padding so instructions on what to edit to change that will also be appreciated. That url is at: http://www.drcarney.com/lifestyle-programs/engine-2-immersions/

I have been trying on an off for weeks to fix this or find somebody that knows how. I guess I could go on Joomlancers but it seems like too small an item to try to get fixed and something that almost appears to be missing from the template.

Thank you for any help you can give. I do have a ticket but Tom has not been able to find a solution yet so I thought I would try to see if others have an answer.

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#409749

Hi,

To have some margin around an image in an article, you can edit an article, select the image in it, click on the ‘Insert / Edit Image’ icon in the editor tools and define vertical space and horizontal space around the image.. This you will have to do for each and every image individually.

If you dont want to do it for every image, in your template.css you can add styling like following changing the margin value to whatever you want.
img{
margin:4px;
}
This styling will apply to all images in the site.

[scarney Friend scarneyJoin date: August 2010Posts: 123Downloads:0Uploads:11 Thanks: 8 Thanked: 5 times in 1 posts]

#410284

Thank you very much Himangi for your reply. I do appreciate knowing how a margin can be added ‘manually’ to an image. The solution I need is to fix the template.css file or any other file that might be over-writing the template.css file.

I have also put a ticket in to JoomlArt to fix this issue by modifying the template.css file posted on 23 August 2011 07:53 AM and a support specialist named Tom Crawford has made quite a few suggestions and so I have had quite a few attempts but nobody has been able to help.

I had previously hired some guys that are located in Vietnam, who are active on this forum, to some some modification to my template and they also did not seem to be able to fix this. I am wondering if maybe there is a class file that was never created for JA_Ores? Unfortunately I am not a programmer. I do hope somebody else might take a look and help.

I have since discovered that all images that are uploaded to a Category Description also have no padding and I would like to find the place to fix that. Adding the padding every time I upload an image is not a good solution. Hopefully I can get this template working.

If there is somebody that will fix this for a fee then please let me know how much. I just want it fixed!

Thanks again, Sean Carney

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#410351

Hi Sean,

Please check the screenshots attached. The screenshot1 shows that there is no space between the image and text. The screenshot2 shows, there is some space between the image and text. As I understood, you need to have this space whenever you use an image in an article, without manually adding it. Fyi I could see space for some images that have some caption to them, but other were sticking with text, like shown in the first screenshot.

Right now I have added the following styling in your templates/ja_ores/css/template.css file which has created the space as shown in the screenshot2. Please note that this styling will create a space around every image in blog view, single article view, category images etc.
.ja-content-main img{
margin:4px;
}

I hope that is what you want and this solves the issue for you. 🙂

---

Attachments:

1. 
2. 

1 user says Thank You to himangi for this useful post

1. scarney

[scarney Friend scarneyJoin date: August 2010Posts: 123Downloads:0Uploads:11 Thanks: 8 Thanked: 5 times in 1 posts]

#410446

You did fix the margin issue for the Category images. And, I think it may have also added left padding for the other left margins as well. I am happy for your help.

Thank you,

Sean Carney

<em>@himangi 264839 wrote:</em><blockquote>Hi Sean,

Right now I have added the following styling in your templates/ja_ores/css/template.css file which has created the space as shown in the screenshot2. Please note that this styling will create a space around every image in blog view, single article view, category images etc.
.ja-content-main img{
margin:4px;
}

I hope that is what you want and this solves the issue for you. 🙂
</blockquote>

[scarney Friend scarneyJoin date: August 2010Posts: 123Downloads:0Uploads:11 Thanks: 8 Thanked: 5 times in 1 posts]

#410483

I just discovered that the problem with the margins in the Category descriptions was definitely fixed by your code.

I also discovered that the problem with the left padding on images that are aligned to the right within articles is still not fixed. I am going to try and attach an image to show this. The problem is currently apparent on the second image at http://www.drcarney.com/about-dr.-carney/dr-carneys-medical-practice where the text on the left of the image is running right up to the image.

In the ticket area I was told that I should find the following in my template.css file and change the parameter:

“What about – at line 540 in the same css file – you play around with the next css class down . . .

.img_caption.right {
margin-left: 10px;
}

Change the margin to 20px or 25px or 30px and see how that works.”

But, that text is NOT in my template.css file. There is text for parameteres for .img_caption.left but none for .img_caption.right. That is why I question whether maybe a class is missing in this template?

If any of you can solve this I will be very grateful!

Sean

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#410673

Hi Sean,

Please note that a lot of commonly used styling like image margins, is specified primarily in JAT3 plugin. If some different styling is specified in a current template for some of the elements then the template styling overrides styling in JAT3 plugin.

As you said, the styling for .img_caption.right was not specified in the css for JA Ores, but it was getting applied from JAT3 plugin css. Now I have added the following styling in your css after styling for .img_caption.left{
<blockquote>.img_caption.right{
margin-right: 20px;
}</blockquote>

I hope the explainations clears doubt about why you could not see the styling as suggested in ticket, in your css, but how styling is there, and how you can override it.. Hope this solves the issue.

[Author]

Posts