Theme Support Forum

Support Forum for Free and Premium Themes. Premium Theme Forums are Private! Please log in first to see the Premium forums

Viewing 6 posts - 1 through 6 (of 6 total)

How to remove the hover effect [color] of highlighting the Blocks on front page?

Home Forums Free Theme Support Theron Lite How to remove the hover effect [color] of highlighting the Blocks on front page?

  • #101093

    Sammer

    Hello Towfiq ,
    As my title says , how to remove the hover effect [color] of highlighting on Blocks on front page?

    I.e. When i bring the mouse over one of the 4 blocks on front page , the background color of that block on which the mouse is brought changes to green . I want to remove that green background effect so that no background color will be seen .

    Please see this image for more details – http://imgur.com/D3cs7PX

    Thanks
    Awaiting your reply

    #101397

    Towfiq I.

    administrator

    Add this to the very bottom of your Stylesheet:

    body .midrow_block:hover{color:#999!important; background:none!important;}

    #101543

    Sammer

    Thanks for the fast reply Towfiq 🙂
    That fixed it !

    #111398

    Kaarina

    Hi Towfiq!

    I blocked hovering from the midrow but titles change color anyway. Any thoughts?
    http://www.tapiolanratsastuskoulu.net/wordpress/

    Thanks,
    Kaarina

    #111646

    Towfiq I.

    administrator

    Add this to your stylesheet:

    .midrow_block:hover h3{color:#333!important;}
    
    #439950

    beth olson

    subscriber

    Just wanted to add real quick that if you want to keep the color rollover effect but remove just the jump/bounce effect of the front page midrow block rollovers I did this by going to wp-content>themes>Asteria>Asteria.js

    Find this bit of code:

    	//Block Animation
    if (jQuery(window).width() > 480) {
    	jQuery('.midrow_block').hover(function(){
    	jQuery(this).stop().animate({ "color":sechovertext, "backgroundColor":sechover, "paddingTop":"0px" }, 200);
    	jQuery(this).find('.icon_wrap i').animate({ "color":sechovertext }, 200);
    	jQuery(this).find('.midrow_block:hover .block_img').animate({ "borderColor":sechovertext }, 200);
    	}, function(){
    	jQuery(this).stop().animate({ "color":primarytext, "backgroundColor":"transparent", "paddingTop":"2%" }, 200);	
    	jQuery(this).find('.icon_wrap i').animate({ "color":"rgba(0, 0, 0, 0.15)" }, 200);
    	jQuery(this).find('.midrow_block:hover .block_img').animate({ "borderColor":"rgba(0, 0, 0, 0.15)" }, 200);
    	});
    	}

    Remove the “paddingTop”:”0px”
    this will keep the color roll over but remove how it jumps on rollover.

You must be logged in to reply to this topic.