Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Add Gradient to Service Medium Icons

gradientservices medium
    • 5 years, 5 months ago paperkitepictures
      Participant

      Hi there,

      I wondered if it would be possible to make the circle of the Services Medium Icons Style 3 a custom gradient on hover!  Thank so much in advance! :)

      Cheers

    • 5 years, 5 months ago Ludjon
      Keymaster

      Yes sure, I can help you. Just send me a link so I can give me the exact CSS for this. I will add two random colors after you can change.

      Thanks

    • 5 years, 5 months ago paperkitepictures
      Participant
      This reply has been marked as private.
    • 5 years, 5 months ago Ludjon
      Keymaster

      Hi,

      I am trying to reach your website but it doesn’t work.

      Can you help me with this? Your website is working very slowly, I recommend you to check the server/host configuration, also check for viruses or other malware

    • 5 years, 5 months ago paperkitepictures
      Participant

      Hi,

      For me it works allright, sorry I don’t know what the problem could be.

      Maybe you could also just check my CSS and tell me what I’m doing wrong?

      I tried:

      .services_medium:hover #icon_wrapper {
      background-color: #bfd255; /* Old browsers */
      background-color: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
      background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
      background-color: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
      background-color: -o-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
      background-color: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
      background-color: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
      }

      Obviously, the .icon_wrapper background-colour is what I am looking for to change, and the .services_medium is what’s triggerd if I hover… and I can also change the background-color in its ‘unhoverd’ state, but for some reason it’s just not working with hover :D

       

      thanks again

    • 5 years, 5 months ago Ludjon
      Keymaster

      I think the problem is here:

      .services_medium:hover #icon_wrapper

      #icon_wrapper it’s not an ID but a class so change ‘#’ with ‘.’

      Let me know if this fixes the issue

    • 5 years, 5 months ago paperkitepictures
      Participant

      Unfortunately not, I already tried this…

    • 5 years, 5 months ago Ludjon
      Keymaster
      .services_medium:hover .icon_wrapper{
      
         background: rgb(2,0,36);
         background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%) !important;
      
      }

      This should work :)

      Thanks

    • 5 years, 5 months ago Ludjon
      Keymaster

      Generate gradient here:
      https://cssgradient.io/

      Don’t forget to add !important at the end

      Thanks

    • 5 years, 5 months ago paperkitepictures
      Participant

      I’m really sorry, I don’t know if I am doing something wrong, but.. it’s still not working :’D

      You still cannot enter my site? If not, nevermind, its not that critically important. Thank you for your time and help anyways!

    • 5 years, 5 months ago Ludjon
      Keymaster

      Can you please tell me where did you add the custom code?

    • 5 years, 5 months ago paperkitepictures
      Participant

      Appearance -> Customize -> Additional CSS

    • 5 years, 5 months ago Ludjon
      Keymaster

      Try on Specular -> General -> Custom CSS

    • 5 years, 5 months ago paperkitepictures
      Participant

      Nope ;)

      If I just go for .icon_wrapper it does change the icon background color to a gradient as it should look like on hover,

      if I just go for .services_medium:hover it does change the whole rectangular background area of the icon to a gradient on hover…

      But together they just do nothing at all. :D

    • 5 years, 5 months ago Ludjon
      Keymaster

      How is it possible? Can you please give me the credentials so I can fix it definitely :D

      You can send them as private reply

    • 5 years, 5 months ago paperkitepictures
      Participant
      This reply has been marked as private.
    • 5 years, 5 months ago Ludjon
      Keymaster

      I don’t know why I can’t access the link. Maybe you have a firewall or something set up for security that doesn’t let me access the website. If yes, please deactivate that so I can make the changes

Viewing 16 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password