Services (Type A & B) Shapes

Can the shapes be changed from a hexagon to something else… a star, square, sun burst etc.?

Hello there,

I would like to apologize in advance for the delay.

Firstly, you would create a 80x80px star graphic in .png format. Then upload it into media library (Dashboard > Media > Add New).

Then add the following custom CSS into child theme’s style.css or Simple Custom CSS plugin:


.service-area .service-icon-svg{
  background-image: url('http://yoursite.com/wp-content/uploads/path/to/star.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
}

.service-area .service-icon-svg svg{
  display: none; 
}  

Regards,
Kharis

Thank you for your help Kharis. I really appreciate you. Your advice has always been great and your coding has been exactly what I have always needed for years now. You really are the best. I will apply this to my next site this weekend.

Khakis… they showed up but didn’t animate.

MyNewBusiness.site

Hello there,

Please replace the CSS code I suggested previously with this one:


.service-area .service-icon-svg svg{
  background-image: url('http://yoursite.com/wp-content/uploads/path/to/star.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
}

.service-area .service-icon-svg svg g{
  display: none; 
} 

Regards,
Kharis

Thanks for your help but now the graphics have disappeared.

.service-area .service-icon-svg svg {
background-image: url(‘http://mynewbusiness.site/wp-content/uploads/2016/09/Sun-Star-Red.png’;);
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
}

.service-area .service-icon-svg svg g {
display: none;
}

maybe if you could point me to where the original code is I can just replace the hexagon with the uploaded graphic. I’m not sure if it is that simplistic.

what… cancel… The email was different from the code listed above somehow. I copy.pasted it from this site and it works perfectly. I knew if it didn’t work it had to be someone else fault other than you. You are the best Kharis Sulistiyono. :slight_smile:

…is there a way to retain the color change (to dark) as you mouse over the animation?

Did you mean the icon color? Please advise.

Regards,
Kharis

The original “Hexagon” darkens to black when it spins on mouse-over, the back to its original color. I would like my newly replaced icon to do the same if possible.

Indeed, it is possible to replicate it. Try adding this code, please:


.service-area .service:hover .service-icon-svg svg{
  background-image: url('http://yoursite.com/wp-content/uploads/path/to/star-hover.png');
}

Regards,
Kharis

Nope… Now some have disappeared and none change to dark. Even when I erased and clear caches it now will not go back to what it was! Here is the code I have in CSS Editor now;

.service-area .service-icon-svg svg {
background-image: url(‘http://mynewbusiness.site/wp-content/uploads/2016/09/Sun-Star-Red.png’);
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
}

.service-area .service-icon-svg svg g {
display: none;
}

.service-area .service:hover .service-icon-svg svg {
background-image: url(‘http://mynewbusiness.site/wp-content/uploads/2016/09/Sun-Star-Red.png’);
}

It did look ok and work before but now I can’t even get it back to the step before this last one.

MyNEWBusiness.site

Hello there,

Please use different image for hovered state.


.service-area .service:hover .service-icon-svg svg {
background-image: url(‘http://mynewbusiness.site/wp-content/uploads/2016/09/Sun-Star-Red-hover.png’);
}

You must create Sun-Star-Red-hover.png graphic with distinct color.

Regards,
Kharis

That worked. The problem was also having a few of my services with a featured image. Thank you Kharis. This is actually a big deal for me since now I can have a little more variety in my website site designs. Future update for pro version would be nice to have a few other general shapes as choices in “Customize”. I will add full steps in next window so others will not have to piece it all together from all the above windows.

To Change Animated Shape/Image Behind Service Area Font Awesome Icons:

  1. Create 2 images, one a dark or divergent version of the original 80 X 80 px.

  2. Upload.

  3. Copy/Paste The following code and replace image URLs with your new ones;

.service-area .service-icon-svg svg {
background-image: url(‘YourImageURL’);
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
}

.service-area .service-icon-svg svg g {
display: none;
}

.service-area .service:hover .service-icon-svg svg {
background-image: url(‘YourHOVERImageURL’);
}

This is great! How can the same thing be done (change icon background) for the employee social media icons?

I’m not sure but I’m guessing… do the same thing only with a different location as target in CSS.

Hi Ben,

For employee social icons, use this CSS code:


.employee-social .employee-svg {
  background-image: url('http://yoursite.com/wp-content/uploads/path/to/star.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
}

.employee-social .employee-svg svg {
  display: none; 
}  

Regards,
Kharis

Awesome - that works! Will you kindly include CSS for the hover state?

For hover state, use this code:


.employee-social .employee-svg:hover {
  background-image: url('http://yoursite.com/wp-content/uploads/path/to/star.png');
}

Regards,
Kharis