News Show Pro GK4 - Coolfoto theme support

Create professional and personal photo presentations with Joomla. Highlight your work using Coolfoto template.
GK User
Thu Jan 27, 2011 3:29 am
Hi

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

Style1 - header block style:

Image

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 ;)
User avatar
Platinum Boarder

GK User
Thu Jan 27, 2011 7:09 am
great one...
User avatar
Platinum Boarder

GK User
Sat Jan 29, 2011 2:38 pm
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
User avatar
Platinum Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.