这是一个小技巧,它可以快速地提高你的表单验证错误信息,并且在提示框里显示。
这里不需要做任何的模版修改,你所要做的只是编辑你的CSS文件,用自定义代码来更新它。
当错误信息被触发,Magento会注入一个class为"validation-advice"的div,这就是我们要在Css文件中修改的class。
它必须相对于它的容器(input-box)来绝对定位。
所以,在你的styles.css文件中找到class .validation-advice(大约在300行左右),用以下的代码来替代它:
/* Form Validation */
.input-box {
position: relative !important;
}
.validation-advice {
background: #DB6D00;
bottom: -7px;
color: #fff;
font-size: 11px;
font-weight: bold;
line-height: 13px;
min-height: 13px;
padding: 10px;
position: absolute;
right: -150px;
width: 120px;
border-radius: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.validation-advice:after {
position: absolute;
left: -8px;
bottom: 8px;
content: " ";
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #DB6D00;
}
请注意这段代码应该重写“.validation-advice” class并作用于Magento默认的主题。如果你有不同的主题,这段代码可能显示的效果不一样。
360团队与您同在……