portfolio II mode on News show pro GK5 module

Post a reply
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Fri Jul 11, 2014 4:22 am
Reply with quote
Report this post
Hello,
I'd like to set up the " What we do " section in Creativity template with the same John template "check out my works" module mode.
The module mode in John is Portfolio II

Is it possible? If yes, after switching the module mode what steps do you suggest?

Best regards
Federico
User avatar
Fresh Boarder
GK User
Fri Jul 11, 2014 6:21 am
Reply with quote
Report this post
It might be impossible without copying additional styles from one theme to another.
User avatar
Moderator
GK User
Fri Jul 11, 2014 8:35 am
Reply with quote
Report this post
I totally agree with you Cyberek.
Somebody could tell me what parts I have to copy?

Thanks
Federico
User avatar
Fresh Boarder
GK User
Fri Jul 11, 2014 4:16 pm
Reply with quote
Report this post
Most of the css styling is here:
Code: Select all
/*
 Portal Mode - Portfolio2
*/

.gkNspPM-Portfolio2 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   padding: 0;
   position: relative;
   width: 100%;
}

.gkNspPM-Portfolio2 .gkImagesWrapper {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0 -1%;
   overflow: hidden;
   -moz-transform: translate3d(0, 0, 0);
   padding: 45px;
   width: 100%;
}

.gkNspPM-Portfolio2 .gkImagesWrapper:after {
   clear: both;
   content: "";
   display: table;
}

.gkNspPM-Portfolio2[data-cols="1"] .gkImagesWrapper a { width: 100%; }
.gkNspPM-Portfolio2[data-cols="2"] .gkImagesWrapper a { width: 50%; }
.gkNspPM-Portfolio2[data-cols="3"] .gkImagesWrapper a { width: 33.333333%; }
.gkNspPM-Portfolio2[data-cols="4"] .gkImagesWrapper a { width: 25%; }
.gkNspPM-Portfolio2[data-cols="5"] .gkImagesWrapper a { width: 20%; }

.gkNspPM-Portfolio2 .gkImagesWrapper > a {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
   cursor: zoom-in;
   display: block;
   float: left;
   opacity: 0.25;
   padding: 15px;
   position: relative;
   -webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
   -ms-transform: scale(0.75);
   -o-transform: scale(0.75);
   transform: scale(0.75);
   -webkit-transition: -webkit-transform .3s cubic-bezier(.71,.23,.25,1.48);
   -moz-transition: -moz-transform .3s cubic-bezier(.71,.23,.25,1.48);
   -ms-transition: -ms-transform .3s cubic-bezier(.71,.23,.25,1.48);
   -o-transition: -o-transform .3s cubic-bezier(.71,.23,.25,1.48);
   transition: transform .3s cubic-bezier(.71,.23,.25,1.48);
}

.gkNspPM-Portfolio2 .gkImagesWrapper > a img {
   display: block;
}

.gkNspPM-Portfolio2 .gkImagesWrapper > a.active {
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}

.gkNspPM-Portfolio2 .gkImagesWrapper > a:after {
   background: rgba(0, 0, 0, 0.5);
   background-clip: content-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   content: "";
   height: 100%;
   left: 0;
   opacity: 0;
   padding: 15px;
   position: absolute;
   top: 0;
   -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: 100%;
   z-index: 1;
}

.gkNspPM-Portfolio2 .gkImagesWrapper > a:before {
   color: #fff;
   content: "l";   
   font-family: johns-icons;
   font-size: 42px;
   height: 42px;
   left: 50%;
   line-height: 42px;
   margin: -21px 0 0 -21px;
   opacity: 0;
   position: absolute;
   text-align: center;
   top: 60%;
   -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: 42px;
   z-index: 2;
}
.gkNspPM-Portfolio2 .gkImagesWrapper > a:hover:after {
   opacity: 1;
}
.gkNspPM-Portfolio2 .gkImagesWrapper > a:hover:before {
   opacity: 1;
   top: 50%;
}

.gkNspPM-Portfolio2 .gkPortfolioCategories {
   margin: 0;
   padding: 0;
}

.gkNspPM-Portfolio2 .gkPortfolioCategories li {
   border: none;
   color: #3a3636;
   cursor: pointer;
   float: left;
   font-size: 13px;
   height: 24px;
   line-height: 25px;
   margin: 0 4px 0 0;
   padding: 0 6px;
   text-transform: uppercase;
   -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;
}

.gkNspPM-Portfolio2 .gkPortfolioCategories li.active,
.gkNspPM-Portfolio2 .gkPortfolioCategories li.active:hover {
   background: #3a3636;
   border-radius: 2px;
   color: #fff;
}

.gkNspPM-Portfolio2 .gkPortfolioCategories li:hover {
   background: #aaa;
   border-radius: 2px;
   color: #fff;
}

/* Popup */
.gkNspPM-Portfolio2 .gkPortfolioPopup {
   background: #f1f0f0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   display: none;
   height: 100%;
   opacity: 0;
   padding: 20px;
   position: absolute;
   top: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
   width: 100%;
   z-index: 5;
}

.gkNspPM-Portfolio2 .gkPortfolioPopup.activated {
   display: block;
}

.gkNspPM-Portfolio2 .gkPortfolioPopup.active {
   opacity: 1;
   top: 50px;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}

.gkNspPM-Portfolio2 .gkPortfolioPopup img {
   display: block;
   max-width: 100%;
}

.gkNspPM-Portfolio2 .gkPortfolioPopup > div {
   clear: both;
}

.gkNspPM-Portfolio2 .gkPortfolioImage {
   background: url('../images/loader.gif') no-repeat center center;
   float: left;
   width: 66%;
}

.gkNspPM-Portfolio2 .gkPortfolioDesc {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding-left: 32px;
   width: 33%;
}

.gkNspPM-Portfolio2 .gkPortfolioPopup img {
   opacity: 0;
   -webkit-transform: scale(0.3);
   -moz-transform: scale(0.3);
   -ms-transform: scale(0.3);
   -o-transform: scale(0.3);
   transform: scale(0.3);
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
   width: 100%;
}

.gkNspPM-Portfolio2 .gkPortfolioImage.active img {
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}

.gkNspPM-Portfolio2 .gkPortfolioPrev,
.gkNspPM-Portfolio2 .gkPortfolioNext,
.gkNspPM-Portfolio2 .gkPortfolioClose {
   color: #f1c40f;
   display: block;
   float: left;
   font-size: 32px;
   height: 32px;
   line-height: 32px;
   margin: 0 0 32px 0;
   overflow: hidden;
   width: 32px;
}

.gkNspPM-Portfolio2 .gkPortfolioPrev:hover,
.gkNspPM-Portfolio2 .gkPortfolioNext:hover,
.gkNspPM-Portfolio2 .gkPortfolioClose:hover,
.gkNspPM-Portfolio2 .gkPortfolioPrev:hover:before,
.gkNspPM-Portfolio2 .gkPortfolioNext:hover:before,
.gkNspPM-Portfolio2 .gkPortfolioClose:hover:before {
   color: #333;
}

.gkNspPM-Portfolio2 .gkPortfolioPrev:before,
.gkNspPM-Portfolio2 .gkPortfolioNext:before,
.gkNspPM-Portfolio2 .gkPortfolioClose:before {
   color: #f1c40f;
   content: "k";
   font-family: johns-icons;
   font-size: 32px;
   line-height: 32px;
   -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;
}

.gkNspPM-Portfolio2 .gkPortfolioPrev:before {
   content: "b";   
   width: 32px;
}

.gkNspPM-Portfolio2 .gkPortfolioNext:before {
   content: "c";
   width: 32px;
}

.gkNspPM-Portfolio2 .gkPortfolioPrev {
   margin-right: 10px;
}

.gkNspPM-Portfolio2 .gkPortfolioClose {
   float: right;
}

.gkNspPM-Portfolio2 .gkPortfolioTitle,
.gkNspPM-Portfolio2 .gkPortfolioCategory,
.gkNspPM-Portfolio2 .gkPortfolioAuthor,
.gkNspPM-Portfolio2 .gkPortfolioDate {
   display: block;
   margin: 0;
   opacity: 0;
   top: 50px;
   position: relative;
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
}

.gkNspPM-Portfolio2 .gkPortfolioTitle {
   font-size: 24px;
   margin-bottom: 32px;
}

.gkNspPM-Portfolio2 .gkPortfolioCategory,
.gkNspPM-Portfolio2 .gkPortfolioAuthor,
.gkNspPM-Portfolio2 .gkPortfolioDate {
   border-top: 1px solid #ddd;
   font-size: 15px;
   padding: 16px 0;
}

.gkNspPM-Portfolio2 .gkPortfolioCategory span,
.gkNspPM-Portfolio2 .gkPortfolioAuthor span,
.gkNspPM-Portfolio2 .gkPortfolioDate span {
   color: #aaa;
   display: block;
   font-size: 12px;
   line-height: 1;
   margin: 0 0 3px 0;
}

.gkNspPM-Portfolio2 .gkPortfolioTitle.active,
.gkNspPM-Portfolio2 .gkPortfolioCategory.active,
.gkNspPM-Portfolio2 .gkPortfolioAuthor.active,
.gkNspPM-Portfolio2 .gkPortfolioDate.active {
   opacity: 1;
   top: 0;
}

User avatar
Moderator
GK User
Fri Jul 11, 2014 4:17 pm
Reply with quote
Report this post
The code comes from:
templates/gk_john_s/css/gk.stuff.css
file.
User avatar
Moderator
GK User
Fri Jul 11, 2014 5:21 pm
Reply with quote
Report this post
Thank you CYBEREK, I'm working on it

I'll keep you updated!

Thanks
Federico
User avatar
Fresh Boarder
GK User
Mon Jul 14, 2014 12:51 pm
Reply with quote
Report this post
Please write back if provided data is enough and if it did work without any additional changes.
User avatar
Moderator
Post a reply
cron