ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• September 11, 2016 at 6:52 am #291340
  Dindoop

  Member

  Post count: 37

  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

  September 12, 2016 at 8:24 am #291418
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Add this to your custom css:

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

  – Kyle

  September 15, 2016 at 4:18 pm #291959
  Dindoop

  Member

  Post count: 37

  This reply has been marked as private.
  September 15, 2016 at 6:05 pm #291976
  Dindoop

  Member

  Post count: 37

  Hi,

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

  Dinoop Dayanand

  September 16, 2016 at 5:01 am #292007
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

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

  September 27, 2016 at 3:47 pm #293500
  Dindoop

  Member

  Post count: 37

  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.
  September 28, 2016 at 8:52 am #293590
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  September 28, 2016 at 3:37 pm #293702
  Dindoop

  Member

  Post count: 37

  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

  September 29, 2016 at 7:26 pm #293849
  David Martin – Support

  Moderator

  Post count: 20834

  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.

  September 30, 2016 at 2:22 pm #293939
  Dindoop

  Member

  Post count: 37

  Hi David,

  Where do I find js/functions.js?

  Best
  Dinoop

  September 30, 2016 at 7:57 pm #294021
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

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

  -Rui

  October 1, 2016 at 12:44 pm #294037
  Dindoop

  Member

  Post count: 37

  Sorry, Under which left nav section does it come?

  Appearance > Editor
  or
  Theme options > Custom CSS/JS

  October 3, 2016 at 11:45 am #294143
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  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

• Back to forum

  Posted in: Cardinal