NSP Image Frontpage Featured Items Margin

Hello,

I am using the NSP on the frontpage for featured Items.

There seems to be a white border between the background of the picture and the NSP frame.

I did some test and was able to get rid of most of it with this code, but in other resolution, smaller responsive, it will cause other problems:

Code: Select all


img.nspImage {
margin-top: -4px;
margin-bottom: -4px;
}


Link: http://gator4199.hostgator.com/~lgt2015/

Regards

Then leave it a s it is. I don't see any glitches in desingn/layout.

I am not satisfied with your answer.

I might not have given enough details. Here is 2 screen capture in attachment.

Regards

Anyone on this, Teitbite?

Thank you

I tried this code, I can't get through it, it doesn't have any effect.

Code: Select all

/* FEATURED PRODUCTS FRONTPAGE PADDING */
#nsp-nsp-738 .nspLinksWrap right .img.nspImage {
   margin-top: -4px;
   margin-bottom: -6px;
}


Regards

1. Please do not bump your questions. It makes you wait longer.
2. I cannot access your site. Could you please check if the link works fine?

The site has a domain now, this is the new link: http://www.mauzaza.com/
Your login info are the same as before.

Thanks

I think the problem is within images itself. If you open one of them directly:
http://www.mauzaza.com/modules/mod_news ... _links.jpg
you will see that the white spacing is in the miniature itself.
I think the problem is with the original image aspect ratio which doesn't scale fine to size that is definied as a thumbnail size in nsp. Now nsp scaling images needs to do something about the aspect ratio so it adds white spacing where it is needed (the color is definied in nsp settings).

So I would suggest to simply create images that has same width but a little bit more in height. Just try few times and you sould come with correct aspect ratio, or use proportion to get correct thumbnail size:
300 px width, 170 px height

Thank you. Could you tell me how do I clear the cache to verify this, because I just replaced the picture of this item and I don't see any difference: http://www.mauzaza.com/supplements/neoc ... 7-oz-198-g

Should I change the default image value for S,M,L,XL on the backend too?
That questions brings back to the cache too.

Regards

I forgot to mention that the size I've use for the featured product pictures is directly based on the images/demo/article1.jpg dummy picture that comes with the quickstart package with the template which is 746x398px.

I've attached my advanced settings for K2 pictures.

On a second thought, I think it would be better If I kept my pictures all the same ratio which is 1:1, like all my other products and instead modify the featured products NSP on the frontpage to accommodate that ratio 1:1.

Please provide the CSS for this second solution.

Here is the link: http://www.mauzaza.com/

To clear the cache simply remove all files inside:
/modules/mod_news_pro_gk5/cache/
folder (via ftp)

If you want to change images aspect ratio - you need to firstly reconfigure nsp module, then reupload the images so the thumbnails will be recreated. Also remember if you decide to use 1:1 aspect ration you need to use source images that have 1:1 aspect ratio.

OK Now it works better with ratio 1:1.

The only problem I have is with refreshing the featured product NSP module nsp-nsp-797 on the subpages.

It looks like it's stuck with a resolution of 175x175px but with a native picture source of 100x100px. No matter what I do to refresh it, clearing the cache on the FTP in /modules/mod_news_pro_gk5/cache, different sequences with saves and edit, nothing works.

http://www.mauzaza.com/supplements

Any ideas? I want it 100px.

Thank you,
Regards

Have you tried to change this NSP module configuration and increase thumbnail size? Could you please post a screenshot of NSP settings regarding thumbnails?

Yes I tried, increasing size works, but not decreasing.

Please send me a PM with:
1. URL to your website
2. login and password of user with admin/super-admin privileges (please create one for me)
3. link to this thread

I've sent you the information again.

Also, I would like these 2 NSP interfaces on the same page, which is this one: http://www.mauzaza.com/skin-health/bath ... -oz-355-ml

...to have relative distances to the NSP. The interface disappears for the NSP on the Breacrumb position and overlap and/or is at a too far distance for the NSP in the Mainbody-Bottom position depending on the resolution.

Code: Select all

/* FEATURED PRODUCTS NSP TOP INTERFACE */
#nsp-nsp-797 .nspTopInterface {
   padding-top: 190px !important;
}


/* FEATURED PRODUCTS NSP BOTTOM TOP INTERFACE */
#nsp-nsp-803 .nspTopInterface {
   padding-top: 130px !important;
}


Thank you.

Ok, lets not start another problem before we finish first one.
The settings are fine... I think the problem lies somewhere else. You have selected to have 6 columns. So the available width of the screen is divided by this number of columns and images are displayed. With big screens there is a lot of space to show the images so 175px of with is counted. If you reduce screen size the images become smaller (but still space is divided into 6 columns).

So I have 2 suggestions. One is to setup thumbnails to 175x175px size so they can fill the biggest available space well or you can chose 8 columns so more images are fit into same space - those making them smaller.

1. OK Thank you Cyberek. I've put 8 columns, I also adjusted the code from Teitbite for the responsive action:

Code: Select all

/* FEATURED PRODUCTS NSP RESPONSIVE TOP  */
#nsp-nsp-797 .nspArtPage .nspCol8 {
    width: 12.5% !important;
}


2. Now for the .nspTopInterface it starts to disapear at around 950px and below. I would apply the same relative position to the other NSP at the bottom of the page.

http://www.mauzaza.com/supplements

3. I would also like to have the Title of the nsp-nsp-797 in the Breadcrumb position. The Module ID 797 on the backend setting for the title is set to "Show Title" yet the position doesn't allow it. Any CSS advice?

Thank you
Regards

2. This disappearing is a bad thing - it shouldn't behave this way. If you would like to show/hide the elements correct way, please use media-queries to hide . nspTopInterface element on max-width 950px.
3. Sorry, breadcrumbs position simply doesn't render module's tittle and its not a case of css change.

2. I do not want to show/hide the .nspTopInterface I would like to have it relative to the NSP. So visible at all resolution without using @media functions. There must be another way to do this.

The problem is with your code:

Code: Select all

#nsp-nsp-797 .nspTopInterface {
padding-top: 190px !important;
}


in override.css
Then you have a code for the second module:

Code: Select all

#nsp-nsp-803 .nspTopInterface {
padding-top: 130px !important;
}


This is why they act differently.

Thank you for pointing that out. What would you recommend that I do in terms on CSS?

If the second one behaves the way you want, change the first one to same value. Also I think this declaration doesn't work well causing strange behave of the navigation. Perhaps removing those two declarations would help... But you have placed it there in the first place for some reason.

These two .nspTopInterface don't behave the same way it seems due the properties of the module position. One is in the breadcrumb and the other one is in the mainbody-bottom position.

The one in the breadcrumb is more complicated to handle than the other one. The same rule will not work for both.

I would like CSS overrides so we can have a .nspTopInterface that will be visible at all time. Is this possible without the @media function?

This is the module: nsp-nsp-797
This is the link: http://www.mauzaza.com/skin-health

Thank you

Anyone, Teitbite?

Thank you

Do not bump your questions.

I have modified this 2 declarations:

Code: Select all

/* FEATURED PRODUCTS NSP TOP INTERFACE */
#nsp-nsp-797 .nspTopInterface {
   top: auto;
   bottom: 0px;
}

/* FEATURED PRODUCTS NSP BOTTOM TOP INTERFACE */
#nsp-nsp-803 .nspTopInterface {
   top: auto;
   bottom: 0px;
}


and for me they work fine.

Thank you it works full resolution.

However, the nsp-nsp-797 .nspTopInterface CSS doesn't work under 641px.

Code: Select all

/* FEATURED PRODUCTS NSP TOP INTERFACE */
#nsp-nsp-797 .nspTopInterface {
   top: auto;
   bottom: 0px;
}


It dissapears somehow. Can you pinpoint the origin of the problem? The interface looks displayed but hidden behind the mainbody. Weird...


Regards

I don't see this code in your override.css, but there is still this thing with padding-top which messes with the layout.

Can you pinpoint the origin of the problem?

Yes. The original css position of navigation is basing on top position. Now with width changes, size of images changes so is the height of the module. If you position is basing on top position of the module - it will disappear. If you base it on bottom of the module - it will not disappear.

Do you have a CSS fix after pinpointing the origin of the problem in my CSS override file to keep the nsp-nsp-797 .nspTopInterface at the bottom, just like the nsp-nsp-803 .nspTopInterface. The problem only occurs under under 641px.

I provide such in one of the previous posts:

Code: Select all

#nsp-nsp-797 .nspTopInterface {
   top: auto;
   bottom: 0px;
}

/* FEATURED PRODUCTS NSP BOTTOM TOP INTERFACE */
#nsp-nsp-803 .nspTopInterface {
   top: auto;
   bottom: 0px;
}


Anyone, teitbite?

Thank you

Hi

I was told that someone asked for me. Sorry for late reply, I was without a computer for last couple of days (coffee accident). Can You please tell me what can I help You with ?

@quebecguitare - I have already provided correct css - you only need to replace current overrides for naviation with provided one.

Hi Teitbite, welcome back. Sorry to hear about your laptop, I hope it can be repaired.

Could you tell me what's wrong, I got problem in my CSS file override file to keep the nsp-nsp-797 .nspTopInterface at the bottom. The problem only occurs under under 641px. The interface will disappear (or go on top of the NSP module).

On the same page you have another NSP module on the position mainbody-body #nsp-nsp-803. That could serve you to understand better what's going on. The navigation interface seems to switch ON TOP of the NSP module under 641px.

I just want the both NSP module interface to be visible at all resolution.

There might be another code besides this one that interferes with the .nspTopInterface, please have a look at my complete CSS override also:

Code: Select all

/* FEATURED PRODUCTS NSP TOP INTERFACE */
#nsp-nsp-797 .nspTopInterface {
   top: auto;
   bottom: 0px;
}

/* FEATURED PRODUCTS NSP BOTTOM TOP INTERFACE */
#nsp-nsp-803 .nspTopInterface {
   top: auto;
   bottom: 0px;
}


Here is the link: http://www.mauzaza.com/supplements


Regards.

Hi

Add this to override.css:

@media only screen and (max-width:640px) {
.nspArts {
position: relative;
}
}

after adding this paginations in both mentioned modules should be visible under images in all resolutions.