My code:
HTML:
<div id="product_1" class="product">
<div class="productText">Product 1</div>
</div>
JS:
Rico.Corner.round("product_1", {border: '#CCCCCC', color: "#FFFFFF"});
CSS:
.product {
background-color: white;
width: 100%;
vertical-align: center;
margin-bottom: 15px;
}
.productText {
background-color: white;
color: black;
display: block;
float: left;
font-weight: bold;
vertical-align: middle;
text-align: left;
}
My solution: Open ricoStyles.js, find function
_renderBorder() and replace it with the following:
_renderBorder: function(el,color,bgColor) {
var borderValue = "1px solid " + this._borderColor(bgColor);
var borderL = "border-left: " + borderValue;
var borderR = "border-right: " + borderValue;
var backgroundColor = "background-color: " + (this._isTransparent() ? "transparent" : color);
var style = "style='height:100%;" + borderL + ";" + borderR + ";" + backgroundColor + "'";
el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>"
},
Then find the call of the _renderBorder() (line #354 for me):
if(this.options.border)
this._renderBorder(e,bgColor);
And replace with:
if(this.options.border)
this._renderBorder(e,color,bgColor);
File 2.png contains the result.
Комментариев нет:
Отправить комментарий