I tried the codes below in the Quick CSS section of Enfold Theme Options Styling. Here is the code:

#header_meta {

background: #0772A1;

}



.header_color .sub_menu > ul > li > a {

color: green;

}



.header_color .sub_menu > ul > li > a :hover{

color: orange;

}

But only the top bar colour changed. The rest did not happen. Am i doing somthing wrong?

Regards,

Hey Nick,

Dude seems to be addressing the same problem here: https://kriesi.at/support/topic/images-and-text-jumps-when-moused-over

Should I try that fix?

Same issue as you Jasmine: https://kriesi.at/support/topic/problem-when-hover-on-image-alignement-with-firefox-and-opera-mac

Also wondering if this is the fix. My issue only occurred in FF and not Chrome.

Thank Nick. It fixed it for FF, but Chrome then became angry. If you check out this page and scroll down to the centered images…

The top 2 images I left as centered image links. When you hover over them, they break the centering and left justify (like they did previously in FF).

The next 2 images I put the links in paragraphs with: <p style=”text-align: center;”> That at least centers them in Chrome, but as it was with the centered images in FF, if you hover over them, the image moves down several pixels.

Open up the /js/avia.js file in your enfold folder, find lines 245-287 that look like:

elements.on('mouseenter', function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

url		 	= link.attr('href'),

span_class	= "overlay-type-video",

opa			= 0.7;



overlay = link.find('.image-overlay');



if(!overlay.length)

{

if(current.outerHeight() > 100)

{

if(link.height() == 0) { link.addClass(current.get(0).className); current.get(0).className = ""; }

if(!link.css('position') || link.css('position') == 'static') { link.css({position:'relative', overflow:'hidden'}); }

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }

if( url.match(/(jpg|gif|jpeg|png|tif)/) ) span_class = "overlay-type-image";

if(!url.match(/(jpg|gif|jpeg|png|.tif|.mov|.swf|vimeo.com|youtube.com)/) ) span_class = "overlay-type-extern";



overlay = $("<span class='image-overlay "+span_class+"' style='opacity: 0;'><span class='image-overlay-inside'></span></span>").appendTo(link);

}

}



if(current.outerHeight() > 100)

{

overlay.css({left:current.position().left + parseInt(current.css("margin-left"),10), top:current.position().top + parseInt(current.css("margin-top"),10)})

.css({display:'block','height':current.outerHeight(),'width':current.outerWidth()}).stop().animate({opacity:opa}, 400);

}

else

{

overlay.css({display:"none"});

}



}).on('mouseleave', elements, function(){



if(overlay.length)

{

overlay.stop().animate({opacity:0}, 400);

}

});

and replace the entire block above with the block below

elements.each(function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

url		 	= link.attr('href'),

span_class	= "overlay-type-video";



overlay = link.find('.image-overlay');



if(!overlay.length)

{

if(link.height() == 0) { link.addClass(current.get(0).className); current.get(0).className = ""; }

if(!link.css('position') || link.css('position') == 'static') { link.css({position:'relative', overflow:'hidden'}); }

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }

if( url.match(/(jpg|gif|jpeg|png|tif)/) ) span_class = "overlay-type-image";

if(!url.match(/(jpg|gif|jpeg|png|.tif|.mov|.swf|vimeo.com|youtube.com)/) ) span_class = "overlay-type-extern";



overlay = $("<span class='image-overlay "+span_class+"' style='opacity: 0;'><span class='image-overlay-inside'></span></span>").appendTo(link);

}

});



elements.on('mouseenter', function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

opa			= 0.7;



overlay = link.find('.image-overlay');



if(current.outerHeight() > 100)

{

overlay.css({left:current.position().left + parseInt(current.css("margin-left"),10), top:current.position().top + parseInt(current.css("margin-top"),10)})

.css({display:'block','height':current.outerHeight(),'width':current.outerWidth()}).stop().animate({opacity:opa}, 400);

}

else

{

overlay.css({display:"none"});

}



}).on('mouseleave', elements, function(){



if(overlay.length)

{

overlay.stop().animate({opacity:0}, 400);

}

});

I’ll ask Kriesi to implement this fix in the next version.

Hi!

Fix can be found here: https://kriesi.at/support/topic/image-moves-from-right-to-left-firefox

Best regards,

Peter

It seems like you insert the code at the very top of avia.js. http://www.wafbmuseum.org/wpdocs/wp-content/themes/enfold/js/avia.js

Please revert the change and don’t insert the code at the very top but replace the (already existing) line

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }

with

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline'}); }

Try following – in wp-contentthemesenfoldjsshortcodes.js replace:

form.slideUp(400, function(){responseContainer.slideDown(400); send.formElements.val('');});

with

form.slideUp(400, function(){responseContainer.slideDown(400); send.formElements.val('');});

jQuery('#scroll-top-link').trigger('click');

My images jump too. I added them through the Add Media when editing in display mode. I am not using columns, so how do I stop the jumping? It does it in Chrome, IE and Firefox….

Help Please!

I followed these instructions and now certain hard-coded icons in the theme aren’t working, specifically: the icon on the “Go to Top” button that appears on long pages, and the next and previous buttons on either side of the blog posts. Can you tell me what to edit in the charmap.php file to fix this? The site is still in development so I can’t give you a link.