News Show Pro GK4 - Coolfoto theme support

Hi

We are happy to inform that Coolfoto template will have News Show Pro GK4 theme support very soon.

Style1 - header block style:



Style1 - bottom block style:

theme1_bottom.png

Style 2 - header block style:

theme2_header.png

Style 2 - bottom block style:

theme2_bottom.png

Default style on wrapper content block:

default_suffix.png

Module suffix "_color"

suffix_color.png

Files and instructions will be available tomorrow.

Cheers

great one...

Hi

Sorry about the delay.

To give News Show Pro GK4 template support, please follow this instructions:

Open ../css/gk_stuff.css 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 10px 0 0!important; padding:0; float:left;}
.nsp_bottom_interface .pagination li,
.nsp_top_interface .pagination li{ cursor: pointer;float: left!important;width: 9px!important;height: 10px!important;margin:5px 3px 0 0!important;min-height:10px!important;text-indent: -999em;border-top:none!important;padding: 0!important;}
.nsp_bottom_interface .pagination li:hover,
.nsp_bottom_interface .pagination li.active,
.nsp_top_interface .pagination li:hover,
.nsp_top_interface .pagination li.active{}
.nsp_bottom_interface .prev,
.nsp_top_interface .prev{ cursor:pointer; float: left;margin: 3px 0 0 0!important;text-indent: -999em;width: 9px;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: 3px 0 0 0!important;text-indent: -999em;width: 9px;height: 11px; }
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{ border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:0px 7px; cursor:pointer; font-size:9px; float:left; margin:0 0 0 5px; }
.nsp_arts{ overflow:hidden;display: inline; }
.nsp_art{float:left;}
.nsp_art div{padding:0 10px; overflow:hidden; }
.nsp_art h4.nsp_header{font-weight:bold;font-size: 12px;margin:0;float:none!important}
.nsp_art img.nsp_image{padding:3px;}
.nsp_art p.nsp_text{float:none;}
.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: 10px 0 0}
.nsp_links {overflow:hidden;}
.nsp_links ul{padding:0;margin:0;list-style-type:none;}
.nsp_links ul li{background:transparent!important;padding:6px 0 2px 0!important;line-height:16px!important;}
.nsp_links ul li h4{font-weight: bold;margin:0;font-size:12px;}
.nsp_links ul li p{font-size: 11px;margin: 0;padding:0;}
.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; }

/* NSP GK4 - Header theme */
div#wrapper_header .moduletable.nsp h3 {margin-bottom:-10px;font-weight: normal;}
div#wrapper_header .nsp_art p.nsp_text{float:none;}
div#wrapper_header .nsp_avatar{border: none}
div#wrapper_header .nsp_info a:hover{text-decoration: underline;color:#fff!important;}

/* NSP GK4 - Bottom theme */
div#wrapper_bottom .moduletable.nsp {padding-bottom: 20px}
div#wrapper_bottom .moduletable.nsp h3 {margin-bottom:10px}
div#wrapper_bottom  .nsp_avatar{border: none}
div#wrapper_bottom  .nsp_links ul li p{}
div#wrapper_bottom  .nsp_info a:hover{text-decoration: underline;}


Open ../css/style1.css file and add this code:

Code: Select all

/* Style1 - News Show Pro GK4
-------------------------------------------------------------- */
.nsp_bottom_interface .pagination li,
.nsp_top_interface .pagination li{ background:transparent url(../images/style1/gk_stuff/npro_bullets.png) no-repeat left top!important;}
.nsp_bottom_interface .pagination li:hover,
.nsp_bottom_interface .pagination li.active,
.nsp_top_interface .pagination li:hover,
.nsp_top_interface .pagination li.active{ background:transparent url(../images/style1/gk_stuff/npro_bullets.png) no-repeat left -11px!important; }
.nsp_bottom_interface .prev,
.nsp_top_interface .prev{background:transparent url('../images/style1/gk_stuff/npro_buttons.png') no-repeat -11px bottom!important; color:#444;}
.nsp_bottom_interface .prev:hover,
.nsp_top_interface .prev:hover{ background:transparent url('../images/style1/gk_stuff/npro_buttons.png') no-repeat left bottom!important; }
.nsp_bottom_interface .next,
.nsp_top_interface .next{background:transparent url('../images/style1/gk_stuff/npro_buttons.png') no-repeat right -21px!important; color:#444;}
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ background:transparent url('../images/style1/gk_stuff/npro_buttons.png') no-repeat 1px -21px!important; }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{ background:#b5c7d0; color:#fff;}
.nsp_art h4.nsp_header{color:#8c8c8c;}
.nsp_art h4.nsp_header a{color:#2c2c2c;}
.nsp_art h4.nsp_header a:hover{color: #899ca7!important;}
.nsp_art img.nsp_image{border:1px solid #c6c6c6; background:#fff;}
.nsp_art p.nsp_text{color: #8c8c8c;}
.nsp_avatar {border: 1px solid #e9e9e9;}
.nsp_links ul li p{color: #8C8C8C;}
.nsp_info {color:#8c8c8c;}

/* NSP GK4 - Header theme */
div#wrapper_header .nsp_main{background: transparent url(../images/style1/module_bg.png) repeat-x left top;}
div#wrapper_header .nsp_art h4.nsp_header{color:#fff;}
div#wrapper_header .nsp_art h4.nsp_header a{color:#feadad;}
div#wrapper_header .nsp_art h4.nsp_header a:hover{color: #465464!important;}
div#wrapper_header .nsp_art img.nsp_image{border:1px solid #fff;}
div#wrapper_header .nsp_art p.nsp_text{color: #fff}
div#wrapper_header .nsp_art p.nsp_text a:hover{color: #2c2c2c!important;}
div#wrapper_header .nsp_art p.nsp_info a{color: #fff}
div#wrapper_header .nsp_art p.nsp_info a:hover{color: #2c2c2c}
div#wrapper_header .nsp_avatar{border: none}
div#wrapper_header .nsp_links ul li h4{color: #fff;}
div#wrapper_header .nsp_links ul li h4 a{color: #465464;}
div#wrapper_header .nsp_links ul li h4 a:hover{color:#fff}
div#wrapper_header .nsp_links ul li p{color: #fff;}
div#wrapper_header .nsp_info {color:#fff;}
div#wrapper_header .nsp_main .readon_class {}
div#wrapper_header .nsp_bottom_interface .counter,
div#wrapper_header .nsp_top_interface .counter{background: #647281}
div#wrapper_header .nsp_bottom_interface .prev,
div#wrapper_header .nsp_top_interface .prev{background:transparent url('../images/style1/gk_stuff/npro_buttons2.png') no-repeat -11px bottom!important; }
div#wrapper_header .nsp_bottom_interface .prev:hover,
div#wrapper_header .nsp_top_interface .prev:hover{ background:transparent url('../images/style1/gk_stuff/npro_buttons2.png') no-repeat left bottom!important; }
div#wrapper_header .nsp_bottom_interface .next,
div#wrapper_header .nsp_top_interface .next{background:transparent url('../images/style1/gk_stuff/npro_buttons2.png') no-repeat right -21px!important; }
div#wrapper_header .nsp_bottom_interface .next:hover,
div#wrapper_header .nsp_top_interface .next:hover{ background:transparent url('../images/style1/gk_stuff/npro_buttons2.png') no-repeat 1px -21px!important; }

/* NSP GK4 - Bottom theme */
div#wrapper_bottom  .nsp_art h4.nsp_header{color:#fff;}
div#wrapper_bottom  .nsp_art h4.nsp_header a{color:#fff;}
div#wrapper_bottom  .nsp_art h4.nsp_header a:hover{color:#915E62!important;}
div#wrapper_bottom  .nsp_art img.nsp_image{border:1px solid #666;background-color: #262626}
div#wrapper_bottom  .nsp_art p.nsp_text{color: #a1a1a1}
div#wrapper_bottom  .nsp_art p.nsp_text a{}
div#wrapper_bottom  .nsp_art p.nsp_text a:hover{color: #fff!important;}
div#wrapper_bottom  .nsp_art p.nsp_info {color: #a1a1a1}
div#wrapper_bottom  .nsp_art p.nsp_info a{}
div#wrapper_bottom  .nsp_art p.nsp_info a:hover{color: #fff}
div#wrapper_bottom  .nsp_avatar{border: none}
div#wrapper_bottom  .nsp_links ul li p{color: #a1a1a1;}
div#wrapper_bottom  .nsp_links ul li h4 a{color:#fff!important}
div#wrapper_bottom  .nsp_links ul li {border-color: #555!important}
div#wrapper_bottom  .nsp_info {color:#fff;}
div#wrapper_bottom  .nsp_bottom_interface .counter,
div#wrapper_bottom  .nsp_top_interface .counter{background: #2A2A2A}
div#wrapper_bottom  .nsp_bottom_interface .prev,
div#wrapper_bottom  .nsp_top_interface .prev{background:transparent url('../images/style1/gk_stuff/npro_buttons3.png') no-repeat -11px bottom!important; }
div#wrapper_bottom  .nsp_bottom_interface .prev:hover,
div#wrapper_bottom  .nsp_top_interface .prev:hover{ background:transparent url('../images/style1/gk_stuff/npro_buttons3.png') no-repeat left bottom!important; }
div#wrapper_bottom  .nsp_bottom_interface .next,
div#wrapper_bottom  .nsp_top_interface .next{background:transparent url('../images/style1/gk_stuff/npro_buttons3.png') no-repeat right -21px!important; }
div#wrapper_bottom  .nsp_bottom_interface .next:hover,
div#wrapper_bottom  .nsp_top_interface .next:hover{ background:transparent url('../images/style1/gk_stuff/npro_buttons3.png') no-repeat 1px -21px!important;}

/* NSP GK4 _color suffix*/
div#wrapper_content div.moduletable_color  .nsp_bottom_interface .pagination li:hover,
div#wrapper_content div.moduletable_color  .nsp_bottom_interface .pagination li.active,
div#wrapper_content div.moduletable_color  .nsp_top_interface .pagination li:hover,
div#wrapper_content div.moduletable_color  .nsp_top_interface .pagination li.active {   background:transparent url(../images/style1/gk_stuff/npro_bullets.png) no-repeat left -11px!important;}
div#wrapper_content div.moduletable_color .nsp_links ul li:hover,
div#wrapper_content div.moduletable_color .nsp_links  ul li:hover h4,
div#wrapper_content div.moduletable_color .nsp_links  ul li:hover h4 a,
div#wrapper_content div.moduletable_color .nsp_links  ul li:hover h4 a:hover {color:#fc999c;}
div#wrapper_content div.moduletable_color .nsp_bottom_interface .counter,
div#wrapper_content div.moduletable_color .nsp_top_interface .counter {background: #fc999c;}
div#wrapper_content div.moduletable_color .nsp_art h4.nsp_header a:hover {color:#fc999c!important;}

div.moduletable_color .nsp_bottom_interface .prev,
div.moduletable_color .nsp_top_interface .prev{background:transparent url('../images/style1/gk_stuff/npro_buttons.png') no-repeat right top!important;}
div.moduletable_color .nsp_bottom_interface .prev:hover,
div.moduletable_color .nsp_top_interface .prev:hover {background:transparent url('../images/style1/gk_stuff/npro_buttons.png') no-repeat left top!important;}
div.moduletable_color .nsp_bottom_interface .next,
div.moduletable_color .nsp_top_interface .next{background:transparent url('../images/style1/gk_stuff/npro_buttons.png') no-repeat -10px -11px!important;}
div.moduletable_color .nsp_bottom_interface .next:hover,
div.moduletable_color .nsp_top_interface .next:hover {background:transparent url('../images/style1/gk_stuff/npro_buttons.png') no-repeat left -11px!important;}


Open ../css/style2.css file and add this code:

Code: Select all

/* Style 2 - News Show Pro GK4
-------------------------------------------------------------- */
.nsp_bottom_interface .pagination li,
.nsp_top_interface .pagination li{ background:transparent url(../images/style2/gk_stuff/npro_bullets.png) no-repeat left top!important;}
.nsp_bottom_interface .pagination li:hover,
.nsp_bottom_interface .pagination li.active,
.nsp_top_interface .pagination li:hover,
.nsp_top_interface .pagination li.active{ background:transparent url(../images/style2/gk_stuff/npro_bullets.png) no-repeat left -11px!important; }
.nsp_bottom_interface .prev,
.nsp_top_interface .prev{background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat -11px bottom!important; color:#444;}
.nsp_bottom_interface .prev:hover,
.nsp_top_interface .prev:hover{ background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat left bottom!important; }
.nsp_bottom_interface .next,
.nsp_top_interface .next{background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat right -21px!important; color:#444;}
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat 1px -21px!important; }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{ background: #88abc2; color:#fff;}
.nsp_art h4.nsp_header{color:#8c8c8c;}
.nsp_art h4.nsp_header a{color:#2c2c2c;}
.nsp_art h4.nsp_header a:hover{color: #899ca7!important;}
.nsp_art img.nsp_image{border:1px solid #c6c6c6; background:#fff;}
.nsp_art p.nsp_text{color: #8c8c8c;}
.nsp_avatar {border: 1px solid #e9e9e9;}
.nsp_links ul li p{color: #8C8C8C;}
.nsp_info {color:#8c8c8c;}

/* NSP GK4 - Header theme */
div#wrapper_header .nsp_main{background: transparent url(../images/style2/module_bg.png) repeat-x left top;}
div#wrapper_header .nsp_art h4.nsp_header{color:#fff;}
div#wrapper_header .nsp_art h4.nsp_header a{color:#465464;}
div#wrapper_header .nsp_art h4.nsp_header a:hover{color: #fff!important;}
div#wrapper_header .nsp_art img.nsp_image{border:1px solid #fff;}
div#wrapper_header .nsp_art p.nsp_text{color: #fff}
div#wrapper_header .nsp_art p.nsp_text a{}
div#wrapper_header .nsp_art p.nsp_text a:hover{color: #2c2c2c!important;}
div#wrapper_header .nsp_art p.nsp_info a{color: #fff}
div#wrapper_header .nsp_art p.nsp_info a:hover{color: #2c2c2c}
div#wrapper_header .nsp_avatar{border: none}
div#wrapper_header .nsp_links ul li h4{color: #fff;}
div#wrapper_header .nsp_links ul li h4 a{color: #465464;}
div#wrapper_header .nsp_links ul li h4 a:hover{color:#fff}
div#wrapper_header .nsp_links ul li p{color: #fff;}
div#wrapper_header .nsp_info {color:#fff;}
div#wrapper_header .nsp_bottom_interface .counter,
div#wrapper_header .nsp_top_interface .counter{background: #88abc2}
div#wrapper_header .nsp_bottom_interface .prev,
div#wrapper_header .nsp_top_interface .prev{background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat left bottom!important;  }
div#wrapper_header .nsp_bottom_interface .prev:hover,
div#wrapper_header .nsp_top_interface .prev:hover{ background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat -11px bottom!important; }
div#wrapper_header .nsp_bottom_interface .next,
div#wrapper_header .nsp_top_interface .next{background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat 1px -21px!important;  }
div#wrapper_header .nsp_bottom_interface .next:hover,
div#wrapper_header .nsp_top_interface .next:hover{ background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat right -21px!important;  }

/* NSP GK4 - Bottom theme */
div#wrapper_bottom  .nsp_art h4.nsp_header{color:#fff;}
div#wrapper_bottom  .nsp_art h4.nsp_header a{color:#fff;}
div#wrapper_bottom  .nsp_art h4.nsp_header a:hover{color:#4F6573!important;}
div#wrapper_bottom  .nsp_art img.nsp_image{border:1px solid #88abc2;background-color: #fff}
div#wrapper_bottom  .nsp_art p.nsp_text{color: #4F6573;}
div#wrapper_bottom  .nsp_art p.nsp_text a{}
div#wrapper_bottom  .nsp_art p.nsp_text a:hover{color: #fff!important;}
div#wrapper_bottom  .nsp_art p.nsp_info {color: #a1a1a1}
div#wrapper_bottom  .nsp_art p.nsp_info a{}
div#wrapper_bottom  .nsp_art p.nsp_info a:hover{color: #fff}
div#wrapper_bottom  .nsp_avatar{border: none}
div#wrapper_bottom  .nsp_links ul li h4 a:hover{color: #4F6573!important;}
div#wrapper_bottom  .nsp_links ul li p{color: #4F6573;}
div#wrapper_bottom  .nsp_links ul li {border-color: #D7E7EF!important}
div#wrapper_bottom  .nsp_info,
div#wrapper_bottom  .nsp_info a {color:#fff!important;}
div#wrapper_bottom  .nsp_bottom_interface .counter,
div#wrapper_bottom  .nsp_top_interface .counter{background: #88abc2}
div#wrapper_bottom  .nsp_bottom_interface .prev,
div#wrapper_bottom  .nsp_top_interface .prev{background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat left bottom!important;  }
div#wrapper_bottom  .nsp_bottom_interface .prev:hover,
div#wrapper_bottom  .nsp_top_interface .prev:hover{ background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat -11px bottom!important; }
div#wrapper_bottom  .nsp_bottom_interface .next,
div#wrapper_bottom  .nsp_top_interface .next{background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat 1px -21px!important;  }
div#wrapper_bottom  .nsp_bottom_interface .next:hover,
div#wrapper_bottom  .nsp_top_interface .next:hover{ background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat right -21px!important; }
div#wrapper_bottom  .nsp_bottom_interface .counter,
div#wrapper_bottom  .nsp_top_interface .counter{ background:#7fabbf;}
div#wrapper_bottom  .nsp_main .readon_class {}
div#wrapper_bottom  .nsp_bottom_interface .counter,
div#wrapper_bottom  .nsp_top_interface .counter{background: #4F6573}

/* NSP GK4 _color suffix*/
div#wrapper_content div.moduletable_color  .nsp_bottom_interface .pagination li:hover,
div#wrapper_content div.moduletable_color  .nsp_bottom_interface .pagination li.active,
div#wrapper_content div.moduletable_color  .nsp_top_interface .pagination li:hover,
div#wrapper_content div.moduletable_color  .nsp_top_interface .pagination li.active {   background:transparent url(../images/style2/gk_stuff/npro_bullets.png) no-repeat left -11px!important;}
div#wrapper_content div.moduletable_color .nsp_links ul li:hover,
div#wrapper_content div.moduletable_color .nsp_links  ul li:hover h4,
div#wrapper_content div.moduletable_color .nsp_links  ul li:hover h4 a,
div#wrapper_content div.moduletable_color .nsp_links  ul li:hover h4 a:hover {color:#fdb337;}
div#wrapper_content div.moduletable_color .nsp_bottom_interface .counter,
div#wrapper_content div.moduletable_color .nsp_top_interface .counter {background: #fdb337;}
div#wrapper_content div.moduletable_color .nsp_art h4.nsp_header a:hover {color:#fdb337!important;}

div.moduletable_color .nsp_bottom_interface .prev,
div.moduletable_color .nsp_top_interface .prev{background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat right top!important;}
div.moduletable_color .nsp_bottom_interface .prev:hover,
div.moduletable_color .nsp_top_interface .prev:hover {background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat left top!important;}
div.moduletable_color .nsp_bottom_interface .next,
div.moduletable_color .nsp_top_interface .next{background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat -10px -11px!important;}
div.moduletable_color .nsp_bottom_interface .next:hover,
div.moduletable_color .nsp_top_interface .next:hover {background:transparent url('../images/style2/gk_stuff/npro_buttons.png') no-repeat left -11px!important;}


Download the attach file, decompress and add the images on style1:

gk_coolfoto.zip

IMPORTANT:
To use template style, don't forget to disable module style on module parameters.

Problem:
There still a problem while using links block on bottom position with this template. You will need to take a closest look to solve this issue. For now, we recommend that only left and right positions are used for links list block display.

Please report if you find any other problem.

Cheers