Make Opencart/Mijoshop Success Message More Noticeable

yellowwebmonkey web services

We use Mijoshop on quite a few client sites.  While I love how extendable it is, I HATE how after adding an item to cart, it only adds a bootstrap alert message that is not very noticeable on it.  Here is a solution that is only CSS to animated it and make the links pop a bit more:

The code for this is:

#mijoshop .alert.alert-success {animation-duration: 2.5s;animation-name: slidein;animation-iteration-count: 1;}

.alert-success a, .alert-success a:hover, .alert-success .alert-link, .alert-success .alert-link:hover {color: #356635;font-weight: bold;}

@keyframes slidein {
from {margin-left:100%;width:300%}
to {margin-left:0%;width:100%;}
}

 

* Animation adapted from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

About YellowWebMonkey

YellowWebMonkey Web design offers reliable website design, SEO and digital marketing services for Joomla, WordPress and Shopify sites. We strive to be a one-stop shop for all your web needs.

Recent Posts

Follow Us