Joomla Templates Club 406,261 posts

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#205426

Hello, when I use the ja nuevo template, a dark blog-type bar appears on “single article” pages when the articles include a “full article image”. If you go to provided link and open the menu item: DEPARTAMENTO–>GRADUA??O
you should see a bar beneath the image, it slightly covers the printing and email icon and I’d like to remove it. This dark bar doesn’t appear with the default templates.
Hope you can provide a fix.
Thanks!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#566524

HI
Add the below code in custom.css

.intro-image-wrap .article-aside {
background: transparent!important; }

Save file clear cache and check .

1 user says Thank You to Pankaj Sharma for this useful post

1. surdo

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#566570

Many thanks. That removes the bar and it looks a lot better. However the space between the photo and the first paragraph still seems a little large. Is there a way of reducing the space with the css?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#566600

Hi
You can use this code in custom.css to remove padding .

.intro-image-wrap .article-aside
{padding:0px!important;}


Clear cache and check .

1 user says Thank You to Pankaj Sharma for this useful post

1. surdo

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#566644

Thanks that reduced it; The little email/print icon now gets a bit close to the text, but for now I’ll work around this by adding a short heading (justified left) at the beginning of each of the articles with photos. If you could please send css to adjust the position of the icon, that would be great. thanks again

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#566650

HI
I am not able to get your issue . It would be better if you will add a screenshot of issue .
so i can check it. currently i have not notice any issue on page .

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#566819

Thanks! please see the attached screen shot with arrow pointing to the edit icon. The position of the icon is distracting i think when reading the first line. I’d like to raise the icon a little. Cheers,

---

Attachments:

1. 

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#566820

I think i see something else that needs adjusting. If you could please compare on my test site, the page:

Gradua??o –> Apresenta??o

with

Departamento –> Apresenta??o

the first page has an image with no caption – the spacing between the image and the first paragraph is excellent however the edit icon crowds the first line.

In the second link the image has a caption – and this seems to have lots of padding which causes an exaggerated space. This page also has the icon too close to the first line.

Thanks for your attention!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#566834

HI
I have seen you have applied the above changes on your site .
Please apply the changes that i suggested >> http://prntscr.com/6tgzhs

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#566929

Thanks pankajsharma. Did you mean i “didn’t” make the changes you suggested? If so, that’s strange, I included them in a file /templates/ja_nuevo/css/custom.css and there, they definitely make a difference, ie. if I remove your suggestions, the larger gap returns. Here is the contents of the file which includes a fix for jevents suggested by ninja:

.modal.fade .modal-dialog {
width: 300px !important;
}

#jevents .jevbootstrap .fade.in {
display: block !important;
height: 370px;
}

.intro-image-wrap .article-aside {
background: transparent!important;
}

.intro-image-wrap .article-aside {
padding:0px!important;
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#566963

<em>@surdo 468560 wrote:</em><blockquote>Thanks pankajsharma. Did you mean i “didn’t” make the changes you suggested? If so, that’s strange, I included them in a file /templates/ja_nuevo/css/custom.css and there, they definitely make a difference, ie. if I remove your suggestions, the larger gap returns. Here is the contents of the file which includes a fix for jevents suggested by ninja:

.modal.fade .modal-dialog {
width: 300px !important;
}

#jevents .jevbootstrap .fade.in {
display: block !important;
height: 370px;
}

.intro-image-wrap .article-aside {
background: transparent!important;
}

.intro-image-wrap .article-aside {
padding:0px!important;
}</blockquote>

Hi
Please do not merge different issue in this . it will make confusion .

I can see the changes are working fine on your site now >>> http://prntscr.com/6tvz05
Can u let me know what issue your are facing in it now . explain issue with screenshot so i can check and suggest u changes.

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#567030

Sorry for any confusion and thanks for your reply. In the screen-shot you just posted, I believe there are two issues.

1.. The space between the image and the first paragraph still seems too large and I believe this problem is due to the presence of the image caption.

and a smaller problem:

2. The print/email tool icon crowds the first line

If you look at the attached image from the page Gradua??o–>Apresenta??o, there is no caption, and the space between the image and the first paragraph is perfect (although the tool icon still crowds the text).

I’m wondering therefore, if perhaps the caption contains padding that can be reduced via CSS?

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#567086

<blockquote>1.. The space between the image and the first paragraph still seems too large and I believe this problem is due to the presence of the image caption.
</blockquote>

Hi the space is not large . currently the space is only for the print icons tool .
here >> http://prntscr.com/6u2c9e
this is normal space .
<blockquote>
2. The print/email tool icon crowds the first line

If you look at the attached image from the page Gradua??o–>Apresenta??o, there is no caption, and the space between the image and the first paragraph is perfect (although the tool icon still crowds the text).

I’m wondering therefore, if perhaps the caption contains padding that can be reduced via CSS?</blockquote>
if you will remove the pace with this code in custom.css file


.intro-image-wrap .article-aside {margin-bottom:0px!important;}


email , print icon tool box will overlap on the article text .

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#567093

Hi, no there is no space problem on the particular page you sent (http://prntscr.com/6u2c9e), the space problem is on the other page (Departamento–>Apresenta??o). Here is a direct link to the test page:

http://reverberant.com/cenuber/departamento/sobre

The image on this page has a caption, the image on the screen-shot you just sent, has none. I believe it’s the caption that is causing the problem.

Thanks,

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#567261

Hi
Add this code to remove the space


.img_caption {
margin-bottom: 0px!important; }


Clear cache and check.

1 user says Thank You to Pankaj Sharma for this useful post

1. surdo

[Author]

Posts