News Show Pro GK4 - Corporate style

Hi

To use News Show Pro GK4 style for Corporate template, please follow this instructions.

From template css directory, open gk_stuff.css file and add the following 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: 11px!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 .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{padding:0px 10px; cursor:pointer; font-size:9px; float:left; margin:0 0 0 10px; }
.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;}
.nsp_art h4.nsp_header a:hover{text-decoration: none;}
.nsp_art img.nsp_image{}
.nsp_art p.nsp_text{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 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; }


On style1.css file add this code:

Code: Select all

/* News Show Pro GK4 - style1 */
.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.active,
.nsp_top_interface .pagination li.active{ background:transparent url(../images/style1/gk_stuff/npro_bullets.png) no-repeat left -22px!important; }
.nsp_bottom_interface .pagination li:hover,
.nsp_top_interface .pagination li:hover { 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_prev.png') no-repeat -8px bottom!important; color:#444;}
.nsp_bottom_interface .prev:hover,
.nsp_top_interface .prev:hover{ background:transparent url('../images/style1/gk_stuff/npro_prev.png') no-repeat left bottom!important; }
.nsp_bottom_interface .next,
.nsp_top_interface .next{background:transparent url('../images/style1/gk_stuff/npro_next.png') no-repeat -5px 4px!important; color:#444;}
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ background:transparent url('../images/style1/gk_stuff/npro_next.png') no-repeat 3px 4px!important; }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{ color:#318cbb;}
.nsp_art h4.nsp_header,
.nsp_art h4.nsp_header a,
.nsp_links h4,
.nsp_links h4  a{color:#318cbb!important;}
.nsp_art h4.nsp_header a:hover,
.nsp_links h4  a:hover{color: #57afdc!important;}
.nsp_links p {padding-bottom: 5px!important}
.nsp_links li {border-bottom: 1px dotted #d1d1d1;list-style: none}
.nsp_links li:last-child {border:none}
.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:#8c8c8c;}


Open style2.css file and add this code:

Code: Select all

/* News Show Pro GK4 - style2 */
.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.active,
.nsp_top_interface .pagination li.active{ background:transparent url(../images/style2/gk_stuff/npro_bullets.png) no-repeat left -22px!important; }
.nsp_bottom_interface .pagination li:hover,
.nsp_top_interface .pagination li:hover { 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_prev.png') no-repeat -8px bottom!important; color:#444;}
.nsp_bottom_interface .prev:hover,
.nsp_top_interface .prev:hover{ background:transparent url('../images/style2/gk_stuff/npro_prev.png') no-repeat left bottom!important; }
.nsp_bottom_interface .next,
.nsp_top_interface .next{background:transparent url('../images/style2/gk_stuff/npro_next.png') no-repeat -5px 4px!important; color:#444;}
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ background:transparent url('../images/style2/gk_stuff/npro_next.png') no-repeat 3px 4px!important; }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{ color:#3b8d00;}
.nsp_art h4.nsp_header,
.nsp_art h4.nsp_header a,
.nsp_links h4,
.nsp_links h4  a{color:#3b8d00!important;}
.nsp_art h4.nsp_header a:hover,
.nsp_links h4  a:hover{color: #4ebe13!important;}
.nsp_links p {padding-bottom: 5px!important}
.nsp_links li {border-bottom: 1px dotted #d1d1d1;list-style: none}
.nsp_links li:last-child {border:none}
.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:#8c8c8c;}


On style3.css file, add this code:

Code: Select all

/* News Show Pro GK4 - style3 */
.nsp_bottom_interface .pagination li,
.nsp_top_interface .pagination li{ background:transparent url(../images/style3/gk_stuff/npro_bullets.png) no-repeat left top!important;}
.nsp_bottom_interface .pagination li.active,
.nsp_top_interface .pagination li.active{ background:transparent url(../images/style3/gk_stuff/npro_bullets.png) no-repeat left -22px!important; }
.nsp_bottom_interface .pagination li:hover,
.nsp_top_interface .pagination li:hover { background:transparent url(../images/style3/gk_stuff/npro_bullets.png) no-repeat left -11px!important; }
.nsp_bottom_interface .prev,
.nsp_top_interface .prev{background:transparent url('../images/style3/gk_stuff/npro_prev.png') no-repeat -8px bottom!important; color:#444;}
.nsp_bottom_interface .prev:hover,
.nsp_top_interface .prev:hover{ background:transparent url('../images/style3/gk_stuff/npro_prev.png') no-repeat left bottom!important; }
.nsp_bottom_interface .next,
.nsp_top_interface .next{background:transparent url('../images/style3/gk_stuff/npro_next.png') no-repeat -5px 4px!important; color:#444;}
.nsp_bottom_interface .next:hover,
.nsp_top_interface .next:hover{ background:transparent url('../images/style3/gk_stuff/npro_next.png') no-repeat 3px 4px!important; }
.nsp_bottom_interface .counter,
.nsp_top_interface .counter{ color:#ff8d00;}
.nsp_art h4.nsp_header,
.nsp_art h4.nsp_header a,
.nsp_links h4,
.nsp_links h4  a{color:#ff8d00!important;}
.nsp_art h4.nsp_header a:hover,
.nsp_links h4  a:hover{color: #57afdc!important;}
.nsp_links p {padding-bottom: 5px!important}
.nsp_links li {border-bottom: 1px dotted #d1d1d1;list-style: none}
.nsp_links li:last-child {border:none}
.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:#8c8c8c;}


Next step is download the attach file, decompress and copy images to template directory:

gk_corporate.zip

Example - Blue style

style-blue.png

Example - Green style

style-green.png

Example - Orange style

style-orange.png

Notes:
- Use "[space]nsp" module suffix.
- There's a problem with this template framework that doesn't allow easily the correct display of links list block at bottom position. For now, please use only left and right side for list links display.

Enjoy