Hi all!
my goal is to reformat the collapsible component using custom CSS mainly the plus/minus icons with some custom icon, i did managed to set simple changes to a label using JS' CSS command but nothing more then that, this is where i am now:
new project with one page and one collapsible name "mobilecollapsblock_1"
new CSS file name "myCollapsible":
/////////////// START OF CSS /////////////////////
div.myCollapsible .m-ui-corner-all {
border-radius : 0.1em;
border-top-right-radius: 0.1em;
border-top-left-radius: 0.1em;
border-bottom-left-radius: 0.1em;
border-bottom-right-radius: 0.1em;
}div.myCollapsible .m-ui-icon-plus{
background:none;
background-position: center center;
border-radius: 0px;
background-repeat: no-repeat;
background-image: url('http://www.mricons.com/store/png/1109...') !important;
}div.myCollapsible .m-ui-icon-minus {
background:none;
background-position: center center;
border-radius: 0px;
background-repeat: no-repeat;
background-image: url('http://www.mricons.com/store/png/1109...') !important;
}div.myCollapsible .m-ui-btn-up-d {
background: none;
border: 0px solid black;
}div.myCollapsible .m-ui-icon-shadow {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}div.myCollapsible .m-ui-shadow {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}/////////////// END OF CSS /////////////////////
added "myCollapsible" to "mobilecollapsblock_1" Class Name
saved and run
feeling dumb.
any help would be highly appreciated!
thank you all in advance!
Ram