gkicons

Are other icons available for the icon area of the front page other than: gkCrop, gkRocket or gkMobile?

Hi,
none, only those three. But you can change it /overwrite by your own/ or add more.

Hi,
none, only those three. But you can change it /overwrite by your own/ or add more.

How I can add or overwrite my own icons?

Thank you!!

Those icons you will find here:
templates/gk_simplicity/images/style1/ (or style2 if you're using this style)

gkcrop.png, gkrocket.png and gkmobile.png

Always all graphic you should find in template images folder.

How can i add another gkicon to the three thats there already

General tip: Upload in this same place a new one.
As you see rocket image have two image inside blue and white on transparency background (PNG 24bit)

so you have to use original image and use photoshop layers to insert your in this same place and delete old.

Below it is only screenshot don't use it!

rocket.png

Then check styles here: templates/gk_simplicity/css/style1.css

for .gkrocket and do this same, but with different class name & image filename

General tip: Upload in this same place a new one.
As you see rocket image have two image inside blue and white on transparency background (PNG 24bit)

so you have to use original image and use photoshop layers to insert your in this same place and delete old.

Below it is only screenshot don't use it!

rocket.png

Then check styles here: templates/gk_simplicity/css/style1.css

for .gkrocket and do this same, but with different class name & image filename

I got that one. By my question was that, you know there are 3 icons which are "the gkrocket, gkmobile, gkcrop". My question is how can i add another one to make it four "GK" instead of the three thats there now

I assume that you have created the icon in accordance with my instructions.
Did you create also a new class for this new icon ?

Now add HTML code inside "Everything you need to know" module

Code: Select all

 <div>
<div class="gkIconArea">
<a href="#" class="gkNewIcon">New 4</a>
</div>
<h2>Powerful Control 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. </p>
</div>

I used "gkNewIcon" class for example purposes only.
So after that you should get this

4.png

Time to reduce some width to fix it.

default css value , looks like this:

Code: Select all

.gkIcons > div {
    -moz-box-sizing: border-box;
    float: left;
    padding: 0 10px;
    width: 33.3%;
}

33.3%+33.3%+33.3% = 99.9% of total width but you have divide into 4 not 3.

99.9% : 4 = 24.9% (You need change 33.3% to 24.9%)

ready.png

I hope that you learned before how to use custom css code from our wiki.

Thats great and it works perfect. Thanks.

I posted a question on https://www.gavick.com/forums/template- ... 28216.html
but didnt have a rply in two days now. can you help me?

the question was "How can i put the image in the MENU LINK OPTIONS above the menu text. At the moment i have the images on the left side of the menu text.
Can you provide me with the "Link CSS Style" to move the image above the menu text please. Thanks "

Thanks a really helpful post - thanks Mod!