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

How to make "Service Small Icon" highlight on hover

#hover #servicesmallicon
    • 9 years, 6 months ago CaryMillsap
      Participant

      Expired

      Using “Service Small Icon,” I would like for the icon to link to the same URL as the title. I have found the lines in services_small.php to which I can add the … tags. I changed…

      <span class=”Apple-tab-span” style=”white-space: pre;”> o</span>ld: $output .= ‘    <dt>’;

      <span class=”Apple-tab-span” style=”white-space: pre;”>n</span>ew: $output .= ‘    <dt>’.’‘;

      and…

      <span class=”Apple-tab-span” style=”white-space: pre;”> o</span>ld: $output .= ‘    </dt>’;

      <span class=”Apple-tab-span” style=”white-space: pre;”> n</span>ew: $output .= ‘    </dt>’;

      However, I would also like for the icon to color-invert on hover, just like the “Service Circle Icon” element does. I’ve tried to figure out within the “Service Circle Icon” CSS how to do this, but I haven’t figured it out. Can you please let me know how I can make each “Service Small Icon” icon work like each “Service Circle Icon” does on hover?

    • 9 years, 6 months ago CaryMillsap
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 6 months ago Mirela
      Participant

      Hello,

      Please add this code into your custom cs sbox:

      .services_small dt i:hover { color: #8b2fef !important;}
      .services_small .wrapper:hover { border: 1px solid #8b2fef !important;}

      Change the color to your wish.

      Best regards!

    • 9 years, 6 months ago CaryMillsap
      Participant

      Expired

      Brilliant, thank you :-)

      However, could you help me invert the colors like with the “Service Circle Icon”—so that on hover, the blue image turns white and the white background turns blue?

    • 9 years, 6 months ago CaryMillsap
      Participant

      Expired

      Ah, got it!

      .services_small dt i:hover { color: #ffffff !important; }

      .services_small .wrapper:hover { border: 1px solid #ffffff !important; background: #2fa2ef !important; }

      Thank you again for all your help.

Viewing 4 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