NSP GK5 like in technews template

Dear everybody,

Is possible show in my web with university templete show the module technews templete. I prefer the form how it templete show the news.

Thank you in advance.

Hi

NSP comes with most of the styles You can see in our demos. Just select correct style and if it's not a style for this specific template make sure that default css file is enabled.

Sorry Teitbite,
I don't understand very well. Inside de modules NSP GK5 I put in advanced tab on the module style hi put Gk_technews>gk_estyle but I don't see the module like in Gk_technews template

Yo can see the problem at the end of main page [url]insitutdosrius.cat[/url] i don't see le NSP GK5 like in Gk_technews template.

Thank you in advance,

Hi

I meant to be sure module default css is included as well. The link isn't working. It's showing me "Server cannot be found message".

Sorry is [url]institutdosrius.cat[/url]

Hi

This link is working, but it doesn't takes me any closer to the problem. Please tell me which module You are trying to copy and where is it currently on Your site. Than send me an access to joomla panel, so I'll try to do this myself.

Sorry Teitbite, perhaps a didn't explain mail problem very well,

I'd like to see the news of the high school like in technews template (image1 attachment).

Now the module that I'll try to copy is at the end of main page in [url]institutdosrius.cat[/url] and the module is the NSP GK5.

The acces to the web I send in a private message.

Thank you in advance

Hi

I've mimic settings in module and copied this css:

Code: Select all

/*TechNews NSP Style*/
.nsp-switch .nspArts {
    background: #f5f5f5 none repeat scroll 0 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 50px;
}
.nsp-switch.nspMain {
  overflow: visible;
}
.nsp-switch .nsp-switch-ui {
  position: absolute;
  right: 0;
  top: -42px;
}
.nsp-switch .nsp-switch-ui > i {
  cursor: pointer;
}
.nsp-switch .header {
  margin: 0 0 24px 0;
}
.nsp-switch .nspImageWrapper {
  border-radius: 3px 0 0 3px;
}
.nsp-switch .gkArtContentWrap {
  background: #fff;
  border-radius: 0 3px 3px 0;
  clear: both;
  min-height: 200px;
  padding: 40px 40px 60px 40px;
  position: relative;
}
.nsp-switch .nspArtPage {
  margin: 0 -13px;
  width: auto;
}
.nsp-switch .nspArt {
  -webkit-transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -ms-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
}
.nsp-switch .nspArt .nspHeader {
    font-size: 15px;
    line-height: 18px;
}
.nsp-switch .nspArt .nspText {
    color: #757575;
    font-size: 12px;
}
.nsp-switch .nspArt .nspInfo {
  bottom: 20px;
  color: #999;
  font-size: 1.1rem;
  padding: 0;
  position: absolute;
  text-transform: none;
}
.nsp-switch .nspArt .nspInfo .micon {
  font-size: 1.8rem;
  margin-right: 5px;
  position: relative;
  top: 4px;
}
.nsp-switch .nspArt .nspImageWrapper {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
.nsp-switch .nspHorizontal .nspImageWrapper {
  background-size: cover;
  background-position: center center;
  border-radius: 0 0 3px 3px;
  float: left;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  width: 33.333333%;
}
.nsp-switch .nspHorizontal .nspImageWrapper img {
  opacity: 0;
}
.nsp-switch .nspHorizontal .nspImageWrapper:hover {
  opacity: 0.8;
}
.nsp-switch .nspHorizontal .gkArtContentWrap {
  border-radius: 3px 3px 0 0;
  clear: none;
  float: left;
  width: 66.666666%;
}
@media only screen and (max-width:1920px) {
  .nsp-switch .nspArt .nspInfo {
    left: 20px;
    right: 20px;
    width: auto;
  }
  .nsp-switch .gkArtContentWrap {
    padding: 20px 20px 60px 20px;
  }
}
@media only screen and (max-width:1040px) {
.nsp-switch-ui {
  display: none;
}
.nsp-switch .nspArt {
  padding: 5px !important;
}
}
@media only screen and (max-width:840px) {
.nsp-switch .nspArt {
  width: 50% !important;
}
.nsp-switch .nspArt img,
.nsp-switch .nspArt .nspImageWrapper {
  width: 100%;
}
}
@media only screen and (max-width:640px) {
.nsp-switch .gkArtContentWrap {
  min-height: 10px;
}
}


This is not a predesigned style, just a different presentation to Standard Mode, so I'm afraid that's the best I can do right now.

Dear Teitbite,

Thank you very much I've sawn that the structure is good, but in an error on my hand I've uptated to joomla 3.6.2 and now I cannot access to NSP GK5 and image show gk4, could you help me? I've done the update without save a copy of website.

I've se same problem with others compenents as for example akkeba backup that I could not install it

Thank you in advance,

Manel

Hi

Please try to clear browser cache when in joomla panel. I've just visited Your site and had no problem to save small changes I've done.

Hi Teitbite,

The problem is not in the frontend the problem backend, I can't see the component and for example I can't change the images in the mainpage.
When you try to show for example de NSP GK5 component in the backend apear this image.


Thanks you very much,

Hi

I've just checked, but again, I see no problem to access those modules settings. Please look at screenshots.

Oh! Thank you Teitbite I a little bit disaster and I saw in component menu in spite extension menu.

Now I only I have a pair of problem or questions with NSP GK5 module and I don't know if you can help me when you can:
- In which file you have insert exactly the code?
- When I saw the module in mobile devices (tablet, smartophone,...) the images in the module appear distortioned, and always appear and access_time with "I supose the last article modification" in a rare tipographie. How can I change it?

Thank you very much very much in advance.

Hi

- do You mean the css code for styling ? It's in override.css

- first of all, You need to use bigger images as thumbs. at least 500px in width so it fill all the available space for image. secondly add this code to override.css to help with mobile problem:

Code: Select all

.nspArt img.nspImage {
    height: auto !important;
    width: 100% !important;
}

@media only screen and (max-width:1200px) {
.nsp-switch .nspArt .nspInfo {
    bottom: auto;
    font-size: 12px;
    left: auto;
    position: relative;
    right: auto;
    text-align: right;
    width: auto;
}
}


Thank you very much Teitbite,

I prove it quitely an explain you if I have any problem.

Hi

Ok. I'll be waiting for confirmation if it worked or not.

Hello Teitbite,

I prove everything you said and do little changes in css and it works perfect. In this module now I have only two doubts more.
- If you would like to see older articles how can do it (now in the link that appear down "More articles in this categoria"- "Més articles en aquesta categoria") do nothing. Or perharps is possible that appear arrows to browse in older articles?
- This other problem is not very importat but is possible show un two ways the articles like in technews template.

Thank you very much for your help

Hi

"More articles in this categoria" needs to be added manually. There is an option in NSP configuration for url. Just create a menu item of category type or archive and when it will be ready copy it and paste to NSP settings.

I'm afraid this option is limited to TechNews only. Sure it can be implemented to this template as well, but I'm afraid this is a customisation request and we do not support that.

Oh! Perfect a good idea!!

Thank you very much

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro