Homepage Logo Folder?

Picture 1.png

Trying to Change Logos on the homepage and I can't find what folder or module they are in. Any idea?

Attached a screen shot of the logos I'm talking about.

Look for custom html modules in mainbody or mainbody top positions.

See you around...

I found the module "Mainbody features", but this only says "divclass GKfeature", there is no images in the module?

And another question: Is it possible to have four boxes on the front instead of three?

While in editor click html button and you can see following html with css class it uses.

Code: Select all

<div class="gkFeature">
<div class="gkCrop">Easy to customize</div>
<h2>Easy to customize</h2>
<small>Nunc a urna sed neque fermentum pharetra. Aliquam suscipit purus nisi.</small></div>
<div class="gkFeature">
<div class="gkHTML5">HTML5 &amp; CSS3</div>
<h2>HTML5 &amp; CSS3</h2>
<small>Nunc a urna sed neque fermentum pharetra. Aliquam suscipit purus nisi.</small></div>
<div class="gkFeature">
<div class="gkResponsiveDesign">Responsive design</div>
<h2>Responsive design</h2>
<small>Nunc a urna sed neque fermentum pharetra. Aliquam suscipit purus nisi.</small></div>


Images are here : "templates/gk_creative/images/features_icons.png" which is transparent image.
It is used in below css class as a background image. myfourticon is added for below example.

Code: Select all

.gkCrop, .gkHTML5, .gkResponsiveDesign, .myfourthicon


Then overwritten with a below colors and position of icon. If you add a fourth icon add it similar to below ( see fourth line and change name color position of icon as you require ).

Code: Select all

.gkCrop {  background-color: #7FB3EF; background-position: center 0; }
.gkHTML5 { background-color: #EF7F7F; background-position: center -137px;
.gkResponsiveDesign { background-color: #A77FEF; background-position: center -274px; }
.myfourthicon { background-color: #7FB3EF; background-position: center -411px; }


To add extra icon simply copy one of the gkFeature div elements in html editor section which is posted beginning of this reply. Such as below. Make your changes. Your icon name in above step.

Code: Select all

<div class="gkFeature">
<div class="myfourthicon">Easy to customize2</div>
<h2>Easy to customize2</h2>
<small>Nunc a urna sed neque fermentum pharetra. Aliquam suscipit purus nisi.</small></div>


If you use 4 icons then you need to adjust the width of the icons so they all fit in one line so use below css code in css/override.css file and enable css override from template settings > advanced settings > css override "on". Also added fourthicon class.

Code: Select all

.myfourthicon {
   background: transparent url("../../images/features_icons.png") no-repeat 0 0;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
   display: block;
   height: 137px;
   overflow: hidden;
   text-indent: -9999px;
   width: 100%;
}
.gkFeature {
   padding: 0 25px 0 0;
   width: 24%;
}
.gkFeature + .gkFeature {
   padding: 0 25px;
   width: 26%;
}
.gkFeature + .gkFeature + .gkFeature {
   padding: 0 25px;
   width: 26%;
}
.gkFeature + .gkFeature + .gkFeature + .gkFeature {
   padding: 0 0 0 25px;
   width: 24%;
}


See you around...

Thank you!

Is it possible to write a code in override.css in order to change the colors of these boxes? Or get them to not switch colors?

You can use the css I have posted regarding colors in override.css

Code: Select all

.gkCrop {  background-color: #7FB3EF; }
.gkHTML5 { background-color: #EF7F7F; }
.gkResponsiveDesign { background-color: #A77FEF;}
.myfourthicon { background-color: #7FB3EF;  }