News Show Pro GK4 - CarMagazine style

Hi

To use News Show Pro GK4 module on CarMagazine template, please follow this instructions:

From the template css directory, open gk_stuff.css file and add this code:

Code: Select all

/* News Show Pro GK4 */
.nsp_main{ overflow:hidden; }
.nsp_bottom_interface,
.nsp_top_interface{ overflow:hidden; margin:5px 0; }
.nsp_bottom_interface div,
.nsp_top_interface div{ float:right; }
.nsp_bottom_interface .pagination,
.nsp_top_interface .pagination{ list-style-type:none; margin:0 7px 0 0!important; padding:0; float:left;}
.nsp_bottom_interface .pagination li,
.nsp_top_interface .pagination li{ cursor: pointer;float: left!important;width: 11px!important;height: 10px!important;margin:5px 1px 0 0!important;min-height:10px!important;text-indent: -999em;border-top:none!important;padding: 0!important;}
.nsp_bottom_interface .prev,
.nsp_top_interface .prev{ cursor:pointer; float: left;margin: 4px 5px 0 0!important;text-indent: -999em;width: 15px;height: 11px; }
.nsp_bottom_interface .prev:hover,
.nsp_top_interface .prev:hover{}
.nsp_bottom_interface .next,
.nsp_top_interface .next{ cursor:pointer; float: left;margin: 4px 0 0 0!important;text-indent: -999em;width: 15px;height: 11px; }
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{padding:0px 10px; cursor:pointer; font-size:9px; float:left; margin:0 0 0 10px; }
.nsp_bottom_interface .counter span,
.nsp_top_interface .counter span {margin-left:3px;}
.nsp_arts{ overflow:hidden;display: inline; }
.nsp_art{float:left;}
.nsp_art div{padding:0 10px; overflow:hidden; }
.nsp_art h4.nsp_header{margin: 2px 3px 5px;font-weight: normal;font-size: 13px;font-weight: bold !important;   text-transform: uppercase;}
.nsp_art h4.nsp_header a:hover{text-decoration: none;}
.nsp_art img.nsp_image{}
.nsp_art p.nsp_text{font-size: 12px !important; float:none;margin-top: 5px;}
.nsp_art p.nsp_info{font-size:90%}
.nsp_art .tleft{ text-align:left; }
.nsp_art .tright{ text-align:right; }
.nsp_art .tcenter{ text-align:center; }
.nsp_art .tjustify{ text-align:justify; }
.nsp_art .fleft{float:left;}
.nsp_art .fright{float:right;}
.nsp_art .fnone{ clear:both;width:100%;float:none; }
.nsp_art_page {}
.readon_class.left,
.readon_class.right,
.readon_class.center{clear:both;}
.readon_class.left{float:left;}
.readon_class.right{float:right;}
.readon_class.center{display:inline;float:none;}
.readon_class.fright {margin: 5px 0 10px}
.nsp_links {overflow:hidden;}
.nsp_links ul{padding:0;margin:0;list-style-type:none;}
.nsp_links ul li{background:transparent!important;padding:6px 5px 2px!important;line-height:16px!important;}
.nsp_links ul li h4{font-weight: bold;margin:0;font-size:12px;}
.nsp_links p {padding-bottom: 5px!important;}
.nsp_art h4.nsp_header a:hover,
.nsp_links h4  a:hover{text-decoration: underline;}
.nsp_links ul li p{font-size: 11px;margin: 0;padding:0;}
.nsp_links li.even,
.nsp_links li.odd {list-style: none;margin-bottom: 5px}
.nsp_links li:last-child {margin-bottom: 0!important}
.nsp_links_wrap.bottom {background: transparent;}
.nsp_info {clear:both;margin: 0;}
.nsp_avatar {position: relative;top:3px}

/* NSP GK4 - positioning */
.nsp_arts.left{float:right;}
.nsp_links_wrap.left{float:left;}
.nsp_arts.right{float:left;}
.nsp_links_wrap.right{float:right;}

/* NSP GK4 - make element unvisible */
.nsp_main .unvisible{ height:1px; left:-10000px; overflow:hidden; position:absolute; top:auto; width:1px; }


Open style1.css file and add this lines:

Code: Select all

/* News Show Pro GK4 - style1 */
.nsp_main {color: #999 !important;}
.nsp_bottom_interface .pagination li,
.nsp_top_interface .pagination li{ background:transparent url(../images/style1/gk_stuff/bullet_inactive.png) no-repeat!important;}
.nsp_bottom_interface .pagination li.active,
.nsp_top_interface .pagination li.active{ background:transparent url(../images/style1/gk_stuff/bullet_active.png) no-repeat!important; }
.nsp_bottom_interface .pagination li:hover,
.nsp_top_interface .pagination li:hover { background:transparent url(../images/style1/gk_stuff/bullet_hover.png) no-repeat!important; }
.nsp_bottom_interface .prev,
.nsp_top_interface .prev{background:transparent url('../images/style1/gk_stuff/arrow_left.png') no-repeat -15px bottom!important; color:#444;}
.nsp_bottom_interface .prev:hover,
.nsp_top_interface .prev:hover{ background:transparent url('../images/style1/gk_stuff/arrow_left.png') no-repeat left bottom!important; }
.nsp_bottom_interface .next,
.nsp_top_interface .next{background:transparent url('../images/style1/gk_stuff/arrow_right.png') no-repeat -15px top!important; color:#444;}
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ background:transparent url('../images/style1/gk_stuff/arrow_right.png') no-repeat left top!important; }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{ color:#fff;background: #8fc400}
.nsp_art h4.nsp_header,
.nsp_art h4.nsp_header a {color: #497cb5!important;}
.nsp_links h4,
.nsp_links h4  a{color: #666 !important;}
.nsp_links p {color: #acacac !important;}
.nsp_links p:hover {}
.nsp_links li.even,
.nsp_links li.odd {background: #f8f8f8 !important;}
.nsp_links li.odd:hover,
.nsp_links li.even:hover {background: #f1f8ff!important;}
.nsp_art img.nsp_image{}
.nsp_art p.nsp_text{color: #979797;}
.nsp_avatar {border: 1px solid #e9e9e9;}
.nsp_links ul li p{color: #979797;}
.nsp_info {color:#9c9c9c}
.readon_class.fright {color:#fff;}

/* News Show Pro GK4 "_dark" suffix */
div.moduletable_dark .nsp_links li.even,
div.moduletable_dark .nsp_links li.odd {color: #f7f7f7 !important;background: #17181a!important;}
div.moduletable_dark .nsp_links li.even:hover,
div.moduletable_dark .nsp_links li.odd:hover {background: #3e4245!important;color: #f7f7f7 !important;}
div.moduletable_dark .nsp_links h4,
div.moduletable_dark .nsp_links h4 a{color: #fff!important;}


Finally, open style2.css file and add this code:

Code: Select all

/* News Show Pro GK4 - style2 */
.nsp_main {color: #999 !important;}
.nsp_bottom_interface .pagination li,
.nsp_top_interface .pagination li{ background:transparent url(../images/style2/gk_stuff/bullet_inactive.png) no-repeat!important;}
.nsp_bottom_interface .pagination li.active,
.nsp_top_interface .pagination li.active{ background:transparent url(../images/style2/gk_stuff/bullet_active.png) no-repeat!important; }
.nsp_bottom_interface .pagination li:hover,
.nsp_top_interface .pagination li:hover { background:transparent url(../images/style2/gk_stuff/bullet_hover.png) no-repeat!important; }
.nsp_bottom_interface .prev,
.nsp_top_interface .prev{background:transparent url('../images/style2/gk_stuff/arrow_left.png') no-repeat -15px bottom!important; color:#444;}
.nsp_bottom_interface .prev:hover,
.nsp_top_interface .prev:hover{ background:transparent url('../images/style2/gk_stuff/arrow_left.png') no-repeat left bottom!important; }
.nsp_bottom_interface .next,
.nsp_top_interface .next{background:transparent url('../images/style2/gk_stuff/arrow_right.png') no-repeat -15px top!important; color:#444;}
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ background:transparent url('../images/style2/gk_stuff/arrow_right.png') no-repeat left top!important; }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{ color:#fff;background: #7ab5c7}
.nsp_art h4.nsp_header,
.nsp_art h4.nsp_header a {color: #000!important;}
.nsp_links h4,
.nsp_links h4  a{color: #666 !important;}
.nsp_links p {color: #acacac !important;}}
.nsp_links p:hover {}
.nsp_links li.even,
.nsp_links li.odd {background: #f8f8f8 !important;}
.nsp_links li.odd:hover,
.nsp_links li.even:hover {background: #fcf7f1!important;}
.nsp_art img.nsp_image{}
.nsp_art p.nsp_text{color: #979797;}
.nsp_avatar {border: 1px solid #e9e9e9;}
.nsp_links ul li p{color: #979797;}
.nsp_info {color:#9c9c9c}
.readon_class.fright {color:#fff;}

/* News Show Pro GK4 "_dark" suffix */
div.moduletable_dark .nsp_links li.even,
div.moduletable_dark .nsp_links li.odd {color: #f7f7f7 !important;background: #17181a!important;}
div.moduletable_dark .nsp_links li.even:hover,
div.moduletable_dark .nsp_links li.odd:hover {background: #3e4245!important;color: #f7f7f7 !important;}
.nsp_art h4.nsp_header,
.nsp_art h4.nsp_header a ,
div.moduletable_dark .nsp_links h4,
div.moduletable_dark .nsp_links h4 a{color: #e79700!important;}


IMPORTANT!

• Use "[space]nsp" module suffix for News Show GK4 modules
  
• For color module suffix, please use this way "_color[space]nsp"
• For dark module suffix, please use this way "_dark[space]nsp"
• On this template framework (old one), there's a problem while displaying link list block on bottom position. So for now, please set link list only on left or right side.

Here's some screenshot of NSP GK4 on CarMagazine:

Style1 - default

style1-default.png

Style1 - _dark suffix

style1-dark.png

Style1 - _color suffix

style1-color.png

Style2 - default

style2-default.png

Style2 - _dark suffix

style2-dark.png

Style2 - _color suffix

style2-color.png

Enjoy!

Cheers

Hi

I've got a question Is this available it template's css code ?

What is the Parameters for it?

What is the Parameters for it?

Hi

This classes are used for News Show Pro GK4 theme support because originally Car Magazine uses News Show Pro GK1 version.
After adding this classes on the respective files and installing NSP Gk4 version (naturally), you need to disable "Use CSS module" option, so that NSP GK4 will get classes on template files.

Cheers

could this have anything to do with the fact that I cant see the thumbnails when I create new content even though I practcly clone the contents from the quickstart package?

Hi

I've got a mail with a link to this thread. Unfortunately I do not understand because it was in Portuguese. Can the person who send it to me explain how can I help ?