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();
})
});
- Last updated on .
- Hits: 8648