Sidebar

Updating Older Versions CSS

By design, MyMuse updates do not overwrite your mymues.css file, in case you have made changes.

Since version 3.4.0, there is a new product view page, that uses javascript and a modal overlay to alert users that an item has been placed in the cart.

 

The modal requires some CSS additions. The specific classes follow, or you can grab the complete css here.

 

/* Add to cart Modal */
#my_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    z-index: 1000;
}

#my_modal {
    position: fixed;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    padding: 8px;
    z-index: 1001;
}

#my_content {
    border-radius: 8px;
    background: #fff;
    padding: 20px;
    z-index: 1001;
}

#my_close {
    position: absolute;
    background: url('../images/close.png') 0 0 no-repeat;
    width: 24px;
    height: 27px;
    display: block;
    text-indent: -9999px;
    top: -7px;
    right: -7px;
}  

 

And the MyMuse javascript has an update to center the modal. In components/com_mymuse/assets/mymuse.js


var my_modal = (function(){
    var 
    method = {}

    // Center the modal in the viewport
    method.center = function (target) {
		var top, left, topScreen;
		
		topScreen = jQuery(document).scrollTop();
    	top = jQuery(window).height() / 2  - jQuery("#my_modal").outerHeight() / 2;
    	 
    	left = jQuery(window).width() / 2  - jQuery("#my_modal").outerWidth() / 2;
    	
    	jQuery("#my_modal").css({
        	top:top, 
        	left:left
    	});
	};

    // Open the my_modal
    method.open = function (settings) {
		
		jQuery("#my_content").empty().append(settings.content);

    	jQuery("#my_modal").css({
        	width: settings.width || "auto", 
        	height: settings.height || "auto"
   		})

    	method.center(settings.target);

    	jQuery(window).bind('resize.my_modal', method.center);
    	jQuery("#my_overlay").show();
		jQuery("#my_modal").show();
		jQuery("#my_modal").delay(2000).fadeOut(1000,method.close);
	};
		

    // Close the my_modal
    method.close = function () {
		jQuery("#my_modal").hide();
    	jQuery("#my_overlay").hide();
    	jQuery("#my_content").empty();
    	jQuery(window).unbind('resize.my_modal');
    	//location.reload();
	};


    return method;
}());


jQuery(document).ready(function($){
	$("#my_modal").hide();
	$("#my_overlay").hide();
	jQuery("#my_close").click(function(e){
		e.preventDefault();
		my_modal.close();
	})
	jQuery("#my_overlay").click(function(e){
		e.preventDefault();
		my_modal.close();
	})
});

GTranslate

enfrdeitptrues

Join Our Newsletter

Subscribe to our mailing list

* indicates required
 

Have a site going?

Let us know in the Forum.

Like the Component?

Please review it in the JED.

buynow