Hi,
I'm using ojButton component and I want to apply background color to it. In data-bind I have enables the 'chroming' property as full and I have tried many permutations and combinations to give style and class attributes as root attributes and giving directly in button tag. Nothing worked for me. Only when I'm hovering on the button then only I'm able to see my css background color got applied.
And I have gone thru this link JET Site Cookbook and try to made changes to my css as below.
css:
/* This is to prevent the flash of unstyled content before the composite properties have been setup. */
shop-offers:not(.oj-complete) {
visibility: hidden;
}
shop-offers .shop-offers-container {
background-color: lightsteelblue;
border: solid;
border-width: 3px;
.demo-panel-customizations {
width: 150px;
height: 170px;
}
}
.buttoncolor.oj-button.oj-hover.oj-active.oj-button-full-chrome{
border-radius: 8px;
background-color: red;
width: 150px
}
.buttoncolor.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled){
border-radius: 8px;
background-color: red;
width: 150px
}
.buttoncolor.oj-button.oj-active.oj-button-half-chrome{
border-radius: 8px;
background-color: red;
width: 150px
}
.buttoncolor.oj-button.oj-selected.oj-button-half-chrome:not(.oj-disabled){
border-radius: 8px;
background-color: red;
width: 150px
}
.buttoncolor.oj-button{
border-radius: 8px;
background-color: red;
width: 150px
}
.buttoncolor.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active){
border-radius: 8px;
background-color: red;
width: 150px
}
.buttoncolor.oj-button.oj-default.oj-hover.oj-button-full-chrome.oj-active{
border-radius: 8px;
background-color: red;
width: 150px
}
View code:
<div class="oj-flex oj-lg-justify-content-center">
<button class="buttoncolor" data-bind="
attr: {id:id},
click: $parent.buynow,
ojComponent:
{ component: 'ojButton',
label: 'START NOW',
chroming: 'full'}"
style =" width: 100px;font-size: 80%;color:#E6E6E6"
>
</button>
</div>
Any solution for this?
Or anyone can provide code to give a button background color as '#999999"
Any help would be highly appreciated.
Thanks