HTML Widget
-
When I enter the HTML code and click ‘preview’ in the widget the audio player displays correctly. But after publishing the update there is only gibberish displayed on the web page where the player should be. Here is the code:
/* General */
.orbP{position:relative;box-sizing:border-box;overflow:hidden;font-weight:normal;border:1px solid transparent;user-select:none;text-align:left}.orbP br,.orbP>br{display:none!important;}.orbP p,.orbP>p{margin:0!important;padding:0!important;line-height:normal!important;font-size:inherit!important}.orbPh{display:block;position:absolute;z-index:100;top:50%;margin-top:-12px!important;right:10px;width:21px!important;text-decoration:none!important;cursor:pointer}.orbPh>img{margin:0!important;border:none;height:24px!important;-webkit-filter:drop-shadow(2px 2px 0 rgba(47,99,160,.2));filter:drop-shadow(2px 2px 0 rgba(47,99,160,.2))}.orbPt{text-decoration:none!important}.orbPti{float:left;margin:0 10px 0 0!important;vertical-align:top!important;height:48px!important;width:89px!important;border:none!important;border-radius:2px!important;opacity:1!important}.orbPtn{display:block;margin-right:52px;line-height:24px!important;font-size:17px!important;font-weight:bold!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.orbPtt{display:block;margin-right:52px;text-decoration:none!important;line-height:24px!important;font-size:12px!important;opacity:.85;transition:opacity .2s;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.orbPtt:hover{opacity:1}.orbPp,.orbPs{float:left!important;margin:0 10px 0 0!important;padding:0!important;height:48px!important;width:48px!important;line-height:48px!important;border-radius:2px!important;border:none!important;text-align:center!important;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none!important;}.orbPp::before,.orbPs::before{display:inline-block;vertical-align:middle;content:”;width:0;height:0;border-style:solid}.orbPp::before{border-width:16px 0 16px 26px}.orbPs::before{border-width:16px}.orbPp:focus,.orbPs:focus{outline-style:solid;outline-width:thin}.orbPp:hover,.orbPs:hover{-webkit-transform:scale(1.087);transform:scale(1.087)}.orbPhc{position:relative!important;box-sizing:border-box!important;padding:10px!important;overflow:hidden}
/* Playlist */
.orbPpl{position:relative;overflow:auto;overflow-x:hidden;overflow-y:auto;margin:0!important;padding:0!important;list-style:none!important}.orbPpli{box-sizing:border-box;margin:0!important;padding:0 10px!important;list-style:none!important;background-image:none;float:none!important;height: auto!important}.orbPpli>a,.orbPpli>span{display:block!important;padding:0!important;margin:0!important;height:auto!important;font-weight:normal!important;text-decoration:none!important;line-height:32px!important;font-size:14px!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:color .125s;border:none !important}.orbPpli>a:hover,.orbPpli>span:hover{background:transparent!important}.orbPpli>a>time,.orbPpli>span>time{display:inline-block;font-size:12px!important;width:3em!important}.orbPpli+li{border-style:solid!important;border-width:1px 0 0!important}
/* Volume */
.orbV{position:absolute;z-index:1!important;width:24px!important;right:48px!important;top:0!important;bottom:0!important;line-height:1!important;overflow:hidden!important;transition:width .3s}.orbV:hover{width:160px!important}.orbVC{position:absolute!important;height:18px!important;left:24px!important;top:50%!important;margin:-9px 0 0 11px!important}.orbVC::after{display:block;content:”;margin-top:4px;width:0;height:0;border-style:solid;border-width:4px 100px 4px 0;opacity:.33}.orbVCs{position:absolute!important;z-index:2!important;top:0!important;width:18px!important;height:18px!important;border-radius:50%!important;cursor:ew-resize!important;box-shadow:0 6px 8px -2px rgba(0,9,18,0.36)}.orbVb{position:absolute!important;width:24px!important;height:24px!important;top:50%!important;left:0!important;margin-top:-12px;white-space:nowrap!important;cursor:pointer;transition:opacity .3s}.orbVb::before{display:inline-block;content:”;vertical-align:middle;width:7px;height:12px}.orbVb::after{display:inline-block;content:”;vertical-align:middle;border-width:12px 12px 12px 0;border-style:solid;height:0;width:0;margin-left:-6px}.orbV:hover .orbVb{opacity:.33!important;cursor:default}.orbVb>._m{display: block!important;width:7px!important;height:18px!important;position:absolute!important;top:50%;margin-top:-9px!important;right:0; overflow: hidden!important;}.orbVb>._m::before{display:block;content:”;position:absolute;right:0;top:50%;width:28px;height:24px;margin-top:-12px;border:1px solid;border-radius:50%}.orbVb>._m::after{display:block;content:”;position:absolute;right:4px;top:50%;width:14px;height:14px;margin-top:-7px;border:1px solid;border-radius:50%}
/* Flags*/
.orbF{padding:0 0 10px 10px!important;border-top:1px solid;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row nowrap!important;flex-flow:row nowrap!important}
.orbFl{margin:0!important;padding:0!important;list-style:none!important}
.orbFli,.orbFh{display:inline-block!important;vertical-align:top!important;line-height:18px!important;white-space:nowrap!important;margin:10px 7px 0 0!important;padding:0 6px 0 0!important;text-indent:0!important;list-style:none!important;font-size:11px!important;text-align:right}
.orbFlif{float:left!important;width:27px!important;height:18px!important;margin-right:5px!important}
.orbFhi{position:relative!important;display:inline-block!important;vertical-align:baseline!important;width:8px!important;height:9px!important;margin:0 8px 0 5px!important;border-style:solid!important;border-width:2px 1px 0 1px!important;border-radius:5px 5px 0 0!important;opacity:.5}
.orbFhi::before,.orbFhi::after{display:block;content:”;position:absolute;bottom:-2px;width:0;height:3px;border-style:solid;border-width:2px;border-radius:3px}
.orbFhi::before{left:-4px}.orbFhi::after{right:-4px}
/* Multiselect */
.orbPm{margin:0!important;padding:0!important;list-style:none!important}
.orbPmi{position:relative;margin:0!important;padding:10px!important;list-style:none!important;border:dotted rgba(204,204,204,0.5);border-width:1px 0 0;font-size:12px!important;overflow:hidden;white-space:nowrap;line-height:1!important;cursor:pointer}
.orbPmi::before{display:block;content:”;position:absolute;z-index:1;top:50%;right:10px;margin-top:-8px;width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;opacity:.5;filter:alpha(opacity=50);transition:opacity .2s;}
.orbPmi:hover::before{opacity:1;filter:alpha(opacity=100)}
.orbPmi::after{display:block;content:”;position:absolute;top:0;bottom:0;right:0;width:36px}
.orbPmii{display:inline-block;vertical-align:middle;margin-right:10px;width:30px;height:16px;border:none!important;border-radius:2px!important}
.orbPmin{display:inline-block;vertical-align:middle;}/* Compact General */
.cmpct .orbPti{height:24px!important;width:44px!important}
.cmpct .orbPtn{line-height:12px!important;font-size:12px!important}
.cmpct .orbPtt{line-height:12px!important;font-size:10px!important}
.cmpct .orbPp,.cmpct .orbPs{height:24px!important;width:24px!important;line-height:24px!important}
.cmpct .orbPp::before{border-width:8px 0 8px 13px !important}
.cmpct .orbPs::before{border-width:8px !important}
/* Compact w/Playlist */
.cmpct .orbPpli>a,.cmpct .orbPpli>span{line-height:24px!important;font-size:12px!important}
.cmpct .orbPpli>a>time,.cmpct .orbPpli>span>time{font-size:11px!important}.orbP{background-color:#2f63a0 !important;}/*common player background*/.orbP{border-style: solid; border-color:#2f63a0 !important;border-radius:5px;}/*common player container border, radius, width*/.orbPp,.orbPs{background:#7094bf !important}/*buttons play/stop bg*/.orbPp::before{border-color:transparent transparent transparent #ffffff !important} /* play button color */.orbPp:focus,.orbPs:focus{outline-color:#ffffff}.orbPs::before{border-color:#ffffff !important} /* stop button color */.orbPtn,.orbPtt,.orbPtt:hover{color:#ffffff !important;}/*station name & track link color*/.orbPpl{height:185px;background:#ffffff !important;}/*playlist height, playlist bg */.orbPpli>a,.orbPpli>a:visited,.orbPpli>span,.orbPpli>a:hover>time,.orbPpli.a>a>time,.orbPpli.a>span>time{color:#444444 !important;} /* playlist items color */.orbPpli>a:hover,.orbPpli.a>a,.orbPpli.a>span{color:#f07700 !important;} /* active-item color */.orbPpli>a>time,.orbPpli>span>time{color:#aeaeae !important;} /* item time color */.orbPpli.a{background:#f3f3f3 !important;} /* active-item bg */.orbPpli+li{border-color:#eeeeee !important;} /* item border color */.orbV{background-color:#2f63a0 !important;box-shadow:0 0 32px 32px #2f63a0 !important}/*volume control color */.orbVC::after,.orbVb::after{border-color:transparent #ffffff transparent transparent !important}.orbVb::before,.orbVCs{background:#ffffff !important} /* volume bg color */.orbVb>._m::before,.orbVb>._m::after{border-color:#ffffff !important}.orbF{background:#ffffff !important;color:#444444 !important;border-color:#2f63a0 !important}/* geo background & text color */.orbFli,.orbFlif{box-shadow:0 0 1px 0 #444 inset !important}.orbFhi,.orbFhi::before,.orbFhi::after{border-color:#444 !important}
var orbp_w = orbp_w || { lang: ‘en-us’ };
orbp_w.cmd = orbp_w.cmd || [];
orbp_w.apiUrl = ‘https://onlineradiobox.com’;
orbp_w.cmd.push(function() {
orbp_w.init(‘orb_player_4b97c3c35d7f4a10’);
});
var s, t; s = document.createElement(‘script’); s.type = ‘text/javascript’;
s.src = ‘//ecdn.onlineradiobox.com/js/pwidget2.min.235ca64e.js’;
t = document.getElementsByTagName(‘script’)[0]; t.parentNode.insertBefore(s, t); -
The html code you can use on a free wordpress.com website is very limited that’s why your cide doesn’t work.
-
- The topic ‘HTML Widget’ is closed to new replies.
WordPress.com Forums 