Remove mouseover on icon box

[Dindoop]

Hi,

I don’t want a mouseover on the icons, which by default turns to black on mouseover. How can I remove it? Could not find an option in the ‘Edit icon box’ tab.

Cheers
Dinoop

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.minimal-design .sf-icon-box-standard .sf-icon-cont:hover {
  color: #777777!important;
}

– Kyle

[Dindoop]

This reply has been marked as private.

[Dindoop]

Hi,

Can you suggest a way the mouseover can be disabled rather than adding another color to it? 🙂

Dinoop Dayanand

[Mohammad – SUPPORT]

Hi,
Just attach a screenshot to indicate the element of mouse over.
Thanks
Mohammad

[Dindoop]

Hi,

I have taken a photo to show the mouse position that triggers the change in color.

Best
Dinoop

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try add this to your custom css:

.minimal-design .sf-icon-box-standard .sf-icon-cont:hover .sf-icon, .minimal-design .sf-icon-box-standard.sf-hover .sf-icon-cont .sf-icon {
  color: #777!important;
}

– Kyle

[Dindoop]

Hi Kyle,

This works perfectly well if I had the same color icon across pages.

The issue is that I have a color theme across all pages.

For ex
Page 1 : Grey, where icons and the headings are Grey
Page 2 : Red, where icons and the headings are Red, now on mouse over its turning grey.

How can I handle scenarios? Would this become a complicated? Or is there a way the mouseover color itself can be removed? So that it retains the normal color state.

Best
Dinoop

[David Martin – Support]

Hi,

If you open js/functions.js, locate this:

		iconBoxes: function() {
			if (isMobileAlt) {
				jQuery('.sf-icon-box').on('click', function() {
					jQuery(this).addClass('sf-mobile-hover');
				});
			} else {
				jQuery('.sf-icon-box').hover(
					function() {
						jQuery(this).addClass('sf-hover');
					}, function() {
						jQuery(this).removeClass('sf-hover');
					}
				);
			}
		},

Replace that with this:

		iconBoxes: function() {
			if (isMobileAlt) {
				jQuery('.sf-icon-box').on('click', function() {
					jQuery(this).addClass('sf-mobile-hover');
				});
			} else {
				jQuery('.sf-icon-box').hover(
					function() {
						//jQuery(this).addClass('sf-hover');
					}, function() {
						//jQuery(this).removeClass('sf-hover');
					}
				);
			}
		},

Please note: you must disable the performance options in the Theme Options to output this updated JS.

[Dindoop]

Hi David,

Where do I find js/functions.js?

Best
Dinoop

[Rui Guerreiro – SUPPORT]

Hi,

Check in “wp-content/cardinal/js/functions.js”

-Rui

[Dindoop]

Sorry, Under which left nav section does it come?

Appearance > Editor
or
Theme options > Custom CSS/JS

[Rui Guerreiro – SUPPORT]

Hi,

You need to use the file explorer in your server hosting. To edit it directly in WordPress you need to install the plugin Solid Code Editor

https://wordpress.org/plugins/solid-code-theme-editor/

-Rui