GK Slide Text

Where am I able to edit the GK Slide Text Properties on the Instyle Template? The text is in the middle. I either need to lower it, or simply put a box behind it (say, with 90% transparency).

Hello,

In the css/gk.stuff.css file there is the banners section - you can edit the properties of the text in the below fragment:

Code: Select all

/* Banners */
.gkBanner {
   background: #111;
   position: relative;
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}
.gkBanner > h2 {
   color: #fff;
   font-size: 56px;
   line-height: 1;
   text-align: center;
   position: absolute;
   text-transform: none;
   top: 80px;
   width: 100%;
   z-index: 2;
}
.gkBanner > h2 > a {
   color: #fff;
}
.gkBanner > h2 > a > span {
   color: #fff;
   display: block;
   font-size: 66px;
   font-weight: 500;
   letter-spacing: -3px;
   margin-top: -10px;
   position: absolute;
   text-align: center;
   text-transform: uppercase;
   width: 100%;
}
.gkBanner > strong {
   bottom: 70px;
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   position: absolute;
   text-align: center;
   width: 100%;
   z-index: 2;
}
.gkBanner > strong > a {
   background: #b06339;
   color: #fff;
   display: inline-block;
   padding: 0 4px;
   position: relative;
   text-transform: uppercase;
   z-index: 2;
}
.gkBanner > a {
   display: block;
   overflow: hidden;
}
.gkBanner > a > img {
   opacity: 1; filter: alpha(opacity=100);
   -webkit-transform: scale(1) rotateZ(0deg);
   -moz-transform: scale(1) rotateZ(0deg);
   -ms-transform: scale(1) rotateZ(0deg);
   -o-transform: scale(1) rotateZ(0deg);
   transform: scale(1) rotateZ(0deg);
   -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;
}
.gkBanner:hover > a > img {
   opacity: .65; filter: alpha(opacity=65);
   -webkit-transform: scale(1.2) rotateZ(-5deg);
   -moz-transform: scale(1.2) rotateZ(-5deg);
   -ms-transform: scale(1.2) rotateZ(-5deg);
   -o-transform: scale(1.2) rotateZ(-5deg);
   transform: scale(1.2) rotateZ(-5deg);
}

You are truly a wonderful human being. Thank you for your help.