How to add 4th icon in gk-icon-area?

Hi,

I've used the three icons rocket, crop and mobile; now want to add 4th icon. Is this possible and if yes, how?

Best regards,
Erik

Screen Shot 2015-04-14 at 13.57.59.png

<div class="gk-icons">
<div>
<div class="gk-icon-area">
<a href="#" class="gk-crop">Creative</a>
</div>
<h2>Creative</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. </p>
</div>
..... gk-mobile, gk-rocket already used up...

Hello,

You have to add this custom css code to have 4 columns:

Code: Select all

.gk-icons > div {
width: 25%;
}


and add fourth section in the widget content:

Code: Select all

<div>
<div class="gk-icon-area"><a class="gk-new-icon" href="#">Responsive</a></div>
<h2>New section</h2>
We are committed to responsible use of resources and created an earth friendly product at 99.5% recyclable material.

</div>


Thanks for your reply Piotr.

It almost worked; I've made the changes to CSS override and this works.

Then I added this to the Post:
<div>
<div class="gk-icon-area"><a class="gk-gears" href="#">Versatile</a></div>
<h2>Versatile</h2>
Our laser technologies can be applied to a wide spectrum of applications in various, resource limited conditions.
</div>

Now the image does not appear. I got an image called gkgears.png in the same location as crop, rocket and mobile PNG. Same dimensions too.

How to link the new image to the new icon...?

See www.parhelion.com and you will see the problem.

You have to add also the following css code:

Code: Select all

.gk-gears {
   background-color: #fff;
   background-image: url('../images/style1/gkgears.png');
   background-position: center top;
}
.gk-gears:hover {
   background-color: #fec54c;
   background-position: center bottom;
}
.gk-gears {
   background-image: url('../images/style1/gkgears.png');
}

.gk-gears:hover {
   background-color: #3e8e41;
}


Screen Shot 2015-04-16 at 09.18.33.png

I've added that too but the image still does not appear...

I can't see your website now - it's unavailalbe, regarding the issue, did you clear your browser's cache?

Now all goes wrong. Tried installing WP Super Cache and now this appears:

Permlink Structure Error

A custom url or permalink structure is required for this plugin to work correctly. Please go to the Permalinks Options Page to configure your permalinks.

Website seems to be online - are you able to access it?

We use some HTTP config so you always see www.parhelion.com while WP is set up in sub directory parhc006/....

Permalinks resolved now

Cache deleted on server side using WP Super Cache; image gkgears.png still not appearing... Can you access my website now?

www.parhelion.com

Unfortunately still can't see your website.

You need to check your connection, give it some time I changed cache settings.... It works over here, except for that 4th icon...!

browser cached cleared, yes. no one reports website is not available; my colleague is in NY and just accessed it and also did not see 4th icon....

Now i can see it, your custom css is loaded from another location, so you have to change the code to:

Code: Select all

.gk-gears {
   background-color: #fff;
   background-image: url('wp-content/themes/Simplicity/images/style1/gkgears.png');
   background-position: center top;
}
.gk-gears:hover {
   background-color: #3e8e41;
   background-position: center bottom;
}


seems to work now, thanks for your help piotr.

issue with background colour remains.

initially I used this colour code but I changed it, the change however doesn't seem to trickle through...

background-color: #3e8e41;


this is my code now:-
/* Adding fourth icon on Homepage
*/
.gk-icons > div {
width: 25%;
}

.gk-gears {
background-color: #fff;
background-image: url('wp-content/themes/Simplicity/images/style1/gkgears.png');
background-position: center top;
}

.gk-gears:hover {
background-color: ##3366ff;
background-position: center bottom;
}

You have mistake in this code (double hashtag)

Code: Select all

.gk-gears:hover {
background-color: ##3366ff;
background-position: center bottom;
}


Hi Guys!

I have a problem... I add the 4th icon.. and apply the code... but the 4th icon is misaligned....

I want an other wish!!:D

How I can disable the effect of " hover" ( I don't know if is that the name? ... that makes the icon changes color when mouse is over the Icon.
I got to the fourth icon .. removing a portion of the code, but I do not know how to remove to existing icons

This is the code that I have :
.gk-icons > div {
width: 25%;
}
.gk-prueba {
background-color: #fff;
background-image: url('../images/style1/gkprueba.png');
background-position: center top;
}
.gk-prueba {
background-image: url('../images/style1/gkprueba.png');
}
.gk-icon-area {
background: none;

Thanks for your help

Add this code to remove the hover effect:

Code: Select all

.gk-rocket:hover,
.gk-mobile:hover,
.gk-crop:hover {
   background-color: #fff!important;
   background-position: center top;
}


Regarding the 4th icon - you have wrong syntax, please check my first answer in this thread or you can send me a PM with backend access to your website, then I'll be able to check it exaclty.

Hi!

I have to reduce the size in the title of the 4th icon and the icon.. the icon does not look anywhere ...
I already update my theme and I already check the codes that I write...

This is the code in mi override file...

Code: Select all

.gk-icons > div {
width: 25%;
}
.gk-prueba {
   background-color: #fff;
   background-image: url('../images/style1/gkgears.png');
   background-position: center top;
}
.gk-prueba:hover {
   background-color: #fff!important;
   background-position: center top;
}
.gk-prueba {
   background-image: url('../images/style1/gkgears.png');
}

.gk-prueba:hover {
   background-color: #3e8e41;
}
.gk-icon-area {
   background: none;
}
.gk-rocket:hover,
.gk-mobile:hover,
.gk-crop:hover {
   background-color: #fff!important;
   background-position: center top;
}


What can I do for resolve this issue

Thanks for your help

I have an other issue... in the movie the section doesn't look good.

The 3 firsts icons looks right-aligned and text is misaligned.... The text of the 4th Icon look well but it doesn't apear the icon.


Thanks!

Like I said, it was a syntax error (closind div in wrong place) in your text widget. (I've fixed it).

Please add also this code to override.css file:

Code: Select all

.gk-prueba {
   background-image: url('../images/style1/gkprueba.png');
}


Ok! Thanks!

And what about the mobil presentation?

How can I fix, because the text is misaligned, and the icons are right-aligned

Thanks

@oriana_e1984 - please provide an URL to your website with this issue.

disenogt.com/computing

Sorry but currently it seems that you have some problems with HTTPS and no CSS styles are loading.

Hello,
I was doing a little research on the subject ... I can not understand at all the error appears you ,. But I think I know that it can be happening ... I found this video to see how it could solve ... but I think the problem is on the side of your machine , maybe you can check with another machine or another browser ...

https://www.youtube.com/watch?v=pRbdqhJ6jgA

Or please send me a print screen of the error....

Thanks

Hi,

@Oriana please add paragraph tags <p>your text</p> around your "We are committed ... " text and should be aligned properly on mobile devices.