NSP Item Selector for John's template

Hi,

I want to make an NSP module in the mainbody-top like this template for easy navigation:
https://www.gavick.com/joomla-templates/news,109.html


The problem is that I have another one on the same page. Classes seems to conflict.

Also, pagination won't show even I have the configuration for the module set properly on the backend.

I tried disabling the first NSP module but the new NSP still won't show navigation.

My config is :

Number of column: 5
Number of row: 1
Pagination: arrow and pagination
Source: K2 Category (12 articles)

Please have a look at the screenshots for the conflict issue.

Regards,
Alexandre

Could you please post an url to your site?

Duplicated. Solved on the other thread:
https://www.gavick.com/forums/255/confl ... 30#p208830

Regards

Ok, thanks for the info.

There seems to be a problem still with the NSP module in terms on responsiveness. The module when tested on a small tablet, during portrait orientation, will redesign the NSP module in ONE vertical column and several rows. That is a problem. It should either be turned off or with a reduced amount of columns over one row, instead of several rows in one vertical column.

Tried with a small tablet...
It will switch to incorrect vertical disposition when the Viewport Width of the browser is lower to 600px.
http://www.quebecguitare.ca/profs

Thank you Cyberek!

Actually the problem is not in NSP but in images itself. They are 250px wide and expanding images in browser makes them look bad. Please setup bigger images so they can fit the screen correctly. Setting up images that are 580px wide should help.

Hi Cyberek, I follow you but there is a misunderstanding.

I do not wish to change the layout and expand the pictures, but rather keep them the same size and NSP layout in one horizontal row, just like it is when the view window is over 600px.

See picture Capture_correct.JPG

Regards

Anyone on this?

Thank you

If they are all 250px they will not fit in 1 horizontal line if a screen size is 320px for example.
Could you please post a screenshot how should it look on a 320px, 480px, 520px wide screens?

OK Cyberek, I am not sure if I understand what you mean but I'll give my best.

I did some test to provide you with the layout, but the CSS will switch to mobile.css under 600px.

In my opinion the size of the picture aren't an issue because all I want is to make them smaller. Have a look in attachment to my screenshots. Making the NSP picture will give plenty of room to have them fit horizontally.

But maybe you are anticipating the NSP behaviour not being able to "fold" or rather "shrink" some pictures out. I do not understand how the NSP work with responsive templates.

What I would suggest is the use of 2 NSP module with a "@media" condition for the mobile.css sheet. Under 600px the second NSP module with more columns would load, thus filing the width with more pictures at a smaller scale.

But who knows, maybe I am way off.

If you agree with this, or have a better idea, please give me a CSS suggestion so I can try it and give feedback.

Thank you for you time.
Regards

Ok, it can be done, but I need to ask 2 questions:
1. Is your template updated to its latest version?
2. Are you planning to update the template in the future?

Ok, it can be done, but I need to ask 2 questions:
1. Is your template updated to its latest version?
2. Are you planning to update the template in the future?

1. No.
2. Yes.

So before we continue, could you please update the template?

Doing a backup before proceeding and checking if everything is ok after template update...

Would you have a tool to compare easily php file according to this instruction for the template update?

The last step for those who made customization
After installation you can replace files or part of code from “new” template version with from “old” template files. Please note, that if you have heavily modified your template’s layout (php files) or few css we recommend to compare what has changed between file versions, and then merging those changes.

Done. Your new template version should look as before and work even better.

Ref.: https://www.gavick.com/documentation/jo ... k-template

I'll save my file aside from template folder besides the akeeba backup jpa.

Regards

Any files actually, not just php...

I found an online tool once, to compare one file after the other. But no batch compare.
Is there any tools for batch process comparing?

OK I just attempted to update from 3.13 to 3.15. I did some work on this template and this is a production site so I had to restore quickly.

However, here are roughly the things that got messed up:

John Logo
Header
Menu
Menu Icon Class
pattern_bg

What would be the best method to update the template and restore safely the edit that were done on the previous build, knowing that I did not keep track of all the edits?

Thank you,
Regards

Please do not bump your questions (reply more than once) - it makes you wait longer.

The best available solution is to use any kind of visual diff tool. Those kind of tools can be found in software bundles called IDE (Aptana, phpstorm, sublime text) or as a separate software. IDE solutions are better because they allow to compare entire directories. You could also use some kind of versioning system to store changes made to files.

If you did some heave editing of template core files, then the best idea would be to create a site backup, run it locally, update it locally, fix all problems and upload back to production server.

Of course you would need to know how to fix it locally (know html/css). If you count only on our support - you should post the "copy" somewhere live (in subdirectory or under another domain) so we can have access and see whats wrong.

Hi Cyberek, thank you very much for all the information. I've taken notes of the IDE and software suggestion. Would you have a suggestion for a visual application for versionning while the site is online?

I will not bump my post again, apologies.

I've put a backup of my production site on a subdomain and I did the update to v3.15 so you can compare both versions.

v3.15
Backup: http://www.miggg.quebecguitare.com/

v3.13
Production site: http://www.quebecguitare.ca/

Login info are the same, backup site is set to offline.

Thank you,
Best Regards

There are a lot of changes but I guess they come from modifications you did to the original tamplate. I would start with copying override.css content from original to updated template - you doesn't have to merge anything there. The rest is up to you.