InícioPersonalização do reprodutor de áudio
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Personalização do reprodutor de áudio
por NicolasKR2021 31.01.21 1:53
Detalhes da questão
Endereço do fórum: https://imcop-rs.forumeiros.com/
Versão do fórum: ModernBB
Descrição
Boa noite!
Bom, eu gostaria de personalizar a rádio presente no meu fórum, mudando ela da forma atual https://i.servimg.com/u/f44/20/29/81/75/captur12.png , para a forma que eu projetei no Photoshop https://i.servimg.com/u/f44/20/29/81/75/player11.png .
Obs: Não foi possível salvar as imagens utilizadas na projeção a cima.
E sendo assim, essas são as imagens que eu gostaria que fossem colocadas:
Play: https://fontawesome.com/icons/play?style=solid
Pause: https://fontawesome.com/icons/pause?style=solid
Volume Up: https://fontawesome.com/icons/volume-up?style=solid
Volume Off: https://fontawesome.com/icons/volume-mute?style=solid
Texto: Sobre o texto, gostaria que usassem uma fonte formal como a fonte Tamoha, e também se possível utilizar uma transição no texto de forma que ele ande e troque de texto, para "IMCOP".
Desde já agradeço pela ajuda!
Atenciosamente NicolasKR2021!
Overall_Header:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script type="text/javascript" src="https://illiweb.com/rs3/44/frm/mentions/tooltipster.js" ></script>
<link rel="stylesheet" type="text/css" href="https://illiweb.com/rs3/44/frm/mentions/tooltipster.css" />
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
$('#fa_ticker_content').css('display','block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0)
{
$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert)
{
var height_max = h_perso;
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
#audio{position: absolute;top: 7.5px;margin: auto;left: 0;right: 0;}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
<!-- END google_analytics_code_bis -->
ga('send', 'pageview');
<!-- BEGIN google_analytics_code_bis -->
ga('bis.send', 'pageview');
<!-- END google_analytics_code_bis -->
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<script src="https://api2.truesecurity.com.br/truePlayer.js/sonic.dedicado.stream/8174/audio?t=1585214756" DEFER></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<nav class="menu">
<div class="menu-container">
<div class="menu-link-wrapper">
<a class="menu-link" href="/forum">
<div class="icon forum"></div>
<div class="text">Início</div>
</a>
<!-- BEGIN switch_user_logged_in -->
<a class="menu-link" href="/groups">
<div class="icon grupos"></div>
<div class="text">Grupos</div>
<!-- END switch_user_logged_in -->
</a>
<a class="menu-link" href="/memberlist">
<div class="icon membros"></div>
<div class="text">Membros</div>
</a>
<a class="menu-link" href="/portal">
<div class="icon portal"></div>
<div class="text">Portal</div>
</a>
</div>
<audio id="audio" controls src="https://sonic.dedicado.stream/8174/stream"></audio>
<div class="menu-social">
<a class="social-btn social-facebook" href="https://www.facebook.com/groups/798239510947530/" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="social-btn social-instagram" href="https://www.instagram.com/imcopoficial/" target="_blank"><i class="fab fa-instagram"></i></a>
<!-- BEGIN switch_user_logged_in -->
<a class="social-btn social-discord" href="https://discord.com/invite/q6ruEQ52Ak" target="_blank"><i class="fab fa-discord"></i></a>
<!-- END switch_user_logged_in -->
<a class="social-btn social-youtube" href="INDISPONÍVEL" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</nav>
<div id="page-header">
<div class="headerbar">
<div class="header-box">
<!-- BEGIN switch_user_logged_out -->
<div class="box-title">Local de Acesso</div>
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<input type="text" class="login-inputbox" name="username" placeholder="{L_USERNAME}" required/>
<input type="password" class="login-inputbox" name="password" placeholder="{L_PASSWORD}" required/>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} hidden/>
<input type="submit" class="login-btn login" name="login" value="{L_LOGIN}" />
<input type="button" class="login-btn register" name="register" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
</form>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="box-title">Olá, <script>document.write(_userdata.username)</script></div>
<div class="box-content">
<a href="/profile?mode=editprofile">Informações</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Preferências</a>
<a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos e Ignorados</a>
</div>
<div class="box-avatar">
<img id="user-avatar" src=""/>
<script>document.getElementById('user-avatar').src =
"http://www.habbo.com.br/habbo-imaging/avatarimage?&user=" + _userdata.username +
"&action=std,crr=6&direction=4&head_direction=3&img_format=png&gesture=sml&headonly=0&size=b";
</script>
</div>
<div class="box-logout">
<a href="/login?logout">
<input type="button" class="login-btn logout" name="logout" value="Desconectar" />
</a>
<a href="/privmsg?folder=inbox" id="notify_link" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}">
<button type="button" class="login-btn mp" name="mp"></button>
</a>
<a href="/search?search_id=watchsearch" title="Notificações">
<button type="button" class="login-btn notif" name="notif"></button>
</a>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 31.01.21 14:05
Olá @NicolasKR2021,
Percebi que indicou um ícone para o volume baixo e outro para o volume alto. Já na sua projeção no Photoshop é possível ver um slider horizontal para definir o volume.
Fico na dúvida se quer usar somente os botões para regular o volume ou também o slider.
A mesma coisa vale para os ícones de play e pause. Um deles torna-se obsoleto dependendo do estado do reprodutor. Por exemplo, se estiver reproduzindo algum áudio não há necessidade do botão play (por motivos óbvios) e vice-versa.
Agradecia se pudesse esclarecer esses pontos. Por enquanto, está assim:
Atenciosamente,
RafaelS.
Percebi que indicou um ícone para o volume baixo e outro para o volume alto. Já na sua projeção no Photoshop é possível ver um slider horizontal para definir o volume.
Fico na dúvida se quer usar somente os botões para regular o volume ou também o slider.
A mesma coisa vale para os ícones de play e pause. Um deles torna-se obsoleto dependendo do estado do reprodutor. Por exemplo, se estiver reproduzindo algum áudio não há necessidade do botão play (por motivos óbvios) e vice-versa.
Agradecia se pudesse esclarecer esses pontos. Por enquanto, está assim:
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 31.01.21 22:55
Boa noite, caro @RafaelS. !
A respeito do botão para o volume, não precisa ser desta forma...
No caso, quero apenas diminuir o som pela barra de volume, e no ícone do alto-falante mostrado na projeção, deve ser o local onde poderei "mutar" e "desmutar" o áudio vindo da rádio. E se o usuário diminuir o som até o volume 0%, o ícone do alto-falante deve mudar para o mesmo que o do som "mutado".
A respeito do play, o mesmo pode ser um conjunto, no caso apertando tanto o play quanto o pause, o resultado seja o mesmo para dar play e pausar. Sendo assim, se existir a possibilidade do botão de play/pause ficar da forma projetada eu agradeço!
Percebi que a escrita está um pouco longe, se poder aproximar mais da barra de volume agradeço.
Detalhe, mudar a posição da rádio se enquadra neste tópico?
Atenciosamente, NicolasKR2021!
A respeito do botão para o volume, não precisa ser desta forma...
No caso, quero apenas diminuir o som pela barra de volume, e no ícone do alto-falante mostrado na projeção, deve ser o local onde poderei "mutar" e "desmutar" o áudio vindo da rádio. E se o usuário diminuir o som até o volume 0%, o ícone do alto-falante deve mudar para o mesmo que o do som "mutado".
A respeito do play, o mesmo pode ser um conjunto, no caso apertando tanto o play quanto o pause, o resultado seja o mesmo para dar play e pausar. Sendo assim, se existir a possibilidade do botão de play/pause ficar da forma projetada eu agradeço!
Percebi que a escrita está um pouco longe, se poder aproximar mais da barra de volume agradeço.
Detalhe, mudar a posição da rádio se enquadra neste tópico?
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 01.02.21 23:29
Olá @NicolasKR2021,
Este é o resultado final do reprodutor:
Deve trocar o seu template overall_header por este:
Atenciosamente,
RafaelS.
Este é o resultado final do reprodutor:
- Ao clicar no conjunto de botões Play/Pause ele irá pausar ou retomar o áudio de acordo com o estado atual.
Caso esteja sendo reproduzido algum áudio ele irá pausar, caso contrário irá retomar. - Ao clicar no botão do volume ele irá mutar ou desmutar o aúdio de acordo com o estado atual. Se o volume estiver acima de 0% ele irá mutar, caso contrário irá desmutar.
- A barra horizontal (slider) permite ajustar o volume num intervalo de 0% a 100%.
- Há uma transição infinita que faz o texto alternar entre Rádio Light Habbo e IMCOP
Deve trocar o seu template overall_header por este:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script type="text/javascript" src="https://illiweb.com/rs3/44/frm/mentions/tooltipster.js" ></script>
<link rel="stylesheet" type="text/css" href="https://illiweb.com/rs3/44/frm/mentions/tooltipster.css" />
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
$('#fa_ticker_content').css('display','block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0)
{
$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert)
{
var height_max = h_perso;
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
#audio{position: absolute;top: 7.5px;margin: auto;left: 0;right: 0;}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
<!-- END google_analytics_code_bis -->
ga('send', 'pageview');
<!-- BEGIN google_analytics_code_bis -->
ga('bis.send', 'pageview');
<!-- END google_analytics_code_bis -->
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<script src="https://api2.truesecurity.com.br/truePlayer.js/sonic.dedicado.stream/8174/audio?t=1585214756" DEFER></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
.audio-rafa button i {
color: white;
font-size: 20px;
}
.audio-rafa {
position: relative;
left: -26%;
padding-top: 6px;
text-align: center;
}
input#rafaRange {
vertical-align: 2px;
margin-left: 5px;
}
span#audio-text {
color: white;
font-size: 12px;
font-weight: bold;
}
</style>
<script>
var _0x53b3=['25815tWvsvJ','136902yDezsO','volume','addClass','IMCOP','log','95951TQoUuL','paused','pause','1vGlCYb','\x20---\x20Inicializando\x20Rádio\x20Player\x20|\x20by\x20RafaelS.\x20(ajuda.forumeiros.com)\x20---','73673ZvQKvo','getElementById','89518zZOZFG','#mutarRafa\x20i','34wBgOoD','51gtnNfw','animate','player-rafa','Rádio\x20Light\x20Habbo','removeClass','fas\x20fa-volume-up','105361bTIxuq'];var _0x1e20=function(_0x3d5d4d,_0x124da6){_0x3d5d4d=_0x3d5d4d-0x1cf;var _0x53b32d=_0x53b3[_0x3d5d4d];return _0x53b32d;};(function(_0x2582ac,_0x41ca83){var _0x211460=_0x1e20;while(!![]){try{var _0x43c6fa=-parseInt(_0x211460(0x1e2))+-parseInt(_0x211460(0x1d4))*parseInt(_0x211460(0x1d6))+parseInt(_0x211460(0x1e3))+parseInt(_0x211460(0x1db))*parseInt(_0x211460(0x1da))+parseInt(_0x211460(0x1e1))+-parseInt(_0x211460(0x1d1))+parseInt(_0x211460(0x1d8));if(_0x43c6fa===_0x41ca83)break;else _0x2582ac['push'](_0x2582ac['shift']());}catch(_0x1cf57f){_0x2582ac['push'](_0x2582ac['shift']());}}}(_0x53b3,0x21b5c));function mutarRafa(){var _0xc50037=_0x1e20,_0x48ef32=document[_0xc50037(0x1d7)](_0xc50037(0x1dd));_0x48ef32['volume']>0x0?(_0x48ef32[_0xc50037(0x1e4)]=0x0,$('#mutarRafa\x20i')[_0xc50037(0x1df)]()[_0xc50037(0x1e5)]('fas\x20fa-volume-mute')):(_0x48ef32[_0xc50037(0x1e4)]=0x1,$(_0xc50037(0x1d9))['removeClass']()[_0xc50037(0x1e5)](_0xc50037(0x1e0)));}function playRafaOuPause(){var _0x46ab9d=_0x1e20,_0x45bbfa=document['getElementById']('player-rafa');return _0x45bbfa[_0x46ab9d(0x1d2)]?_0x45bbfa['play']():_0x45bbfa[_0x46ab9d(0x1d3)]();}$(function(){var _0x5b8444=_0x1e20;console[_0x5b8444(0x1d0)](_0x5b8444(0x1d5));var _0x3cf69e=[_0x5b8444(0x1cf),_0x5b8444(0x1de)],_0x916ad7=0x0;setInterval(function(){var _0x1528c3=_0x5b8444;$('#audio-text')[_0x1528c3(0x1dc)]({'opacity':0x0},function(){var _0x548542=_0x1528c3;if(_0x3cf69e['length']>_0x916ad7)$(this)['text'](_0x3cf69e[_0x916ad7])[_0x548542(0x1dc)]({'opacity':0x1}),_0x916ad7++;else _0x916ad7=0x0;});},0x7d0);});
</script>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<nav class="menu">
<audio id="player-rafa" src="https://sonic.dedicado.stream/8174/stream"></audio>
<div class="menu-container">
<div class="menu-link-wrapper">
<a class="menu-link" href="/forum">
<div class="icon forum"></div>
<div class="text">Início</div>
</a>
<!-- BEGIN switch_user_logged_in -->
<a class="menu-link" href="/groups">
<div class="icon grupos"></div>
<div class="text">Grupos</div>
<!-- END switch_user_logged_in -->
</a>
<a class="menu-link" href="/memberlist">
<div class="icon membros"></div>
<div class="text">Membros</div>
</a>
<a class="menu-link" href="/portal">
<div class="icon portal"></div>
<div class="text">Portal</div>
</a>
</div>
<div class="audio-rafa">
<button onclick="playRafaOuPause()"><i class="fas fa-play"></i></button>
<button onclick="playRafaOuPause()"><i class="fas fa-pause"></i></button>
<br />
<button id="mutarRafa" onclick="mutarRafa()"><i class="fas fa-volume-up"></i></button>
<input type="range" min="0" max="100" value="100" oninput="document.getElementById('player-rafa').volume = (this.value)/100.0" onchange="document.getElementById('player-rafa').volume = (this.value)/100.0" id="rafaRange">
<br />
<span id="audio-text">Rádio Light Habbo</span>
</div>
<div class="menu-social">
<a class="social-btn social-facebook" href="https://www.facebook.com/groups/798239510947530/" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="social-btn social-instagram" href="https://www.instagram.com/imcopoficial/" target="_blank"><i class="fab fa-instagram"></i></a>
<!-- BEGIN switch_user_logged_in -->
<a class="social-btn social-discord" href="https://discord.com/invite/q6ruEQ52Ak" target="_blank"><i class="fab fa-discord"></i></a>
<!-- END switch_user_logged_in -->
<a class="social-btn social-youtube" href="INDISPONÍVEL" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</nav>
<div id="page-header">
<div class="headerbar">
<div class="header-box">
<!-- BEGIN switch_user_logged_out -->
<div class="box-title">Local de Acesso</div>
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<input type="text" class="login-inputbox" name="username" placeholder="{L_USERNAME}" required/>
<input type="password" class="login-inputbox" name="password" placeholder="{L_PASSWORD}" required/>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} hidden/>
<input type="submit" class="login-btn login" name="login" value="{L_LOGIN}" />
<input type="button" class="login-btn register" name="register" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
</form>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="box-title">Olá, <script>document.write(_userdata.username)</script></div>
<div class="box-content">
<a href="/profile?mode=editprofile">Informações</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Preferências</a>
<a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos e Ignorados</a>
</div>
<div class="box-avatar">
<img id="user-avatar" src=""/>
<script>document.getElementById('user-avatar').src =
"http://www.habbo.com.br/habbo-imaging/avatarimage?&user=" + _userdata.username +
"&action=std,crr=6&direction=4&head_direction=3&img_format=png&gesture=sml&headonly=0&size=b";
</script>
</div>
<div class="box-logout">
<a href="/login?logout">
<input type="button" class="login-btn logout" name="logout" value="Desconectar" />
</a>
<a href="/privmsg?folder=inbox" id="notify_link" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}">
<button type="button" class="login-btn mp" name="mp"></button>
</a>
<a href="/search?search_id=watchsearch" title="Notificações">
<button type="button" class="login-btn notif" name="notif"></button>
</a>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 02.02.21 1:19
Só percebi que o ícone do autofalante quando o slider fica no volume 0%, não fica do mesmo jeito que o do som mutado... E se deixar o volume no 0% quando apertar o alto-falante para ativar o som, o slider deve ir para os 100%. Isso se existir a possibilidade!
Uma pergunta, para alterar a posição do player de rádio, devo fazer outro tópico?
Notei um erro presente no fórum após essa alteração da rádio... Os botões do cabeçalho, não estão da forma certa... No caso, não tem como clicar em cima o ícone dos mesmos!
De resto está muito bem feito!
Atenciosamente, NicolasKR2021!
Uma pergunta, para alterar a posição do player de rádio, devo fazer outro tópico?
Notei um erro presente no fórum após essa alteração da rádio... Os botões do cabeçalho, não estão da forma certa... No caso, não tem como clicar em cima o ícone dos mesmos!
De resto está muito bem feito!
Atenciosamente, NicolasKR2021!
Última edição por NicolasKR2021 em 02.02.21 1:31, editado 2 vez(es)
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 02.02.21 14:25
Olá @NicolasKR2021,
Eu corrigi a parte dos botões deixarem de funcionar e alterei o sistema de volume para que fique mutado ao deixar a barra nos 0%.
Eu fiz da seguinte forma: se você tiver o rádio mutado e desmutar ele, o volume voltará no valor que estiver na barra (em vez de ir para 100%). Por exemplo, se você tiver o som ajustado para 75% ao desmutar ele voltará nesse mesmo valor.
Queira trocar o seu template overall_header novamente por este:
Quanto à posição podemos sim resolver neste tópico, uma vez que se trata de personalização.
Atenciosamente,
RafaelS.
Eu corrigi a parte dos botões deixarem de funcionar e alterei o sistema de volume para que fique mutado ao deixar a barra nos 0%.
E se deixar o volume no 0% quando apertar o alto-falante para ativar o som, o slider deve ir para os 100%
Eu fiz da seguinte forma: se você tiver o rádio mutado e desmutar ele, o volume voltará no valor que estiver na barra (em vez de ir para 100%). Por exemplo, se você tiver o som ajustado para 75% ao desmutar ele voltará nesse mesmo valor.
Queira trocar o seu template overall_header novamente por este:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script type="text/javascript" src="https://illiweb.com/rs3/44/frm/mentions/tooltipster.js" ></script>
<link rel="stylesheet" type="text/css" href="https://illiweb.com/rs3/44/frm/mentions/tooltipster.css" />
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
$('#fa_ticker_content').css('display','block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0)
{
$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert)
{
var height_max = h_perso;
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
#audio{position: absolute;top: 7.5px;margin: auto;left: 0;right: 0;}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
<!-- END google_analytics_code_bis -->
ga('send', 'pageview');
<!-- BEGIN google_analytics_code_bis -->
ga('bis.send', 'pageview');
<!-- END google_analytics_code_bis -->
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<script src="https://api2.truesecurity.com.br/truePlayer.js/sonic.dedicado.stream/8174/audio?t=1585214756" DEFER></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
.audio-rafa button i {
color: white;
font-size: 20px;
}
.audio-rafa {
position: absolute;
left: 45%;
margin: 3px;
padding-top: 6px;
text-align: center;
}
input#rafaRange {
vertical-align: 2px;
margin-left: 5px;
}
span#audio-text {
color: white;
font-size: 12px;
font-weight: bold;
}
</style>
<script>
var _0x16d0=['424718VHdPCe','play','\x20---\x20Inicializando\x20Rádio\x20Player\x20|\x20by\x20RafaelS.\x20(ajuda.forumeiros.com)\x20---','rafaRange','text','1mAtDrE','27eAKNPT','11FvaHgy','#audio-text','addClass','IMCOP','13113UQeUrq','volume','1FuqNQV','value','removeClass','23103vqufSV','pause','#mutarRafa\x20i','animate','fas\x20fa-volume-up','player-rafa','length','fas\x20fa-volume-mute','280264UDZuAB','100417uWpcLa','304697NFdMxx','205461gOkNEO','getElementById'];var _0x1c27=function(_0x2f7018,_0x5ef1cd){_0x2f7018=_0x2f7018-0xc2;var _0x16d027=_0x16d0[_0x2f7018];return _0x16d027;};(function(_0x353d2e,_0x4e4e92){var _0x4e6834=_0x1c27;while(!![]){try{var _0x17e8dc=-parseInt(_0x4e6834(0xcc))*-parseInt(_0x4e6834(0xc3))+parseInt(_0x4e6834(0xd9))+-parseInt(_0x4e6834(0xd7))+parseInt(_0x4e6834(0xd6))*parseInt(_0x4e6834(0xc9))+parseInt(_0x4e6834(0xd5))+parseInt(_0x4e6834(0xc7))*-parseInt(_0x4e6834(0xc2))+parseInt(_0x4e6834(0xd4))*-parseInt(_0x4e6834(0xde));if(_0x17e8dc===_0x4e4e92)break;else _0x353d2e['push'](_0x353d2e['shift']());}catch(_0x42580a){_0x353d2e['push'](_0x353d2e['shift']());}}}(_0x16d0,0x3b9dd));function rafaVolume(){var _0x4f8f66=_0x1c27,_0xf59c6a=document[_0x4f8f66(0xd8)](_0x4f8f66(0xdc))[_0x4f8f66(0xca)]/0x64;document[_0x4f8f66(0xd8)](_0x4f8f66(0xd1))[_0x4f8f66(0xc8)]=_0xf59c6a,_0xf59c6a===0x0?$('#mutarRafa\x20i')[_0x4f8f66(0xcb)]()[_0x4f8f66(0xc5)](_0x4f8f66(0xd3)):$(_0x4f8f66(0xce))[_0x4f8f66(0xcb)]()[_0x4f8f66(0xc5)](_0x4f8f66(0xd0));}function mutarRafa(){var _0x1c1fd6=_0x1c27,_0x277084=document[_0x1c1fd6(0xd8)](_0x1c1fd6(0xd1));_0x277084[_0x1c1fd6(0xc8)]>0x0?(_0x277084[_0x1c1fd6(0xc8)]=0x0,$('#mutarRafa\x20i')[_0x1c1fd6(0xcb)]()[_0x1c1fd6(0xc5)](_0x1c1fd6(0xd3))):rafaVolume();}function playRafaOuPause(){var _0xb1f33c=_0x1c27,_0x3ab25e=document['getElementById']('player-rafa');return _0x3ab25e['paused']?_0x3ab25e[_0xb1f33c(0xda)]():_0x3ab25e[_0xb1f33c(0xcd)]();}$(function(){var _0x1d563d=_0x1c27;console['log'](_0x1d563d(0xdb));var _0x3a41c0=[_0x1d563d(0xc6),'Rádio\x20Light\x20Habbo'],_0x714e63=0x0;setInterval(function(){var _0x321414=_0x1d563d;$(_0x321414(0xc4))[_0x321414(0xcf)]({'opacity':0x0},function(){var _0x3870fb=_0x321414;if(_0x3a41c0[_0x3870fb(0xd2)]>_0x714e63)$(this)[_0x3870fb(0xdd)](_0x3a41c0[_0x714e63])[_0x3870fb(0xcf)]({'opacity':0x1}),_0x714e63++;else _0x714e63=0x0;});},0x7d0);});
</script>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<nav class="menu">
<audio id="player-rafa" src="https://sonic.dedicado.stream/8174/stream"></audio>
<div class="menu-container">
<div class="menu-link-wrapper">
<a class="menu-link" href="/forum">
<div class="icon forum"></div>
<div class="text">Início</div>
</a>
<!-- BEGIN switch_user_logged_in -->
<a class="menu-link" href="/groups">
<div class="icon grupos"></div>
<div class="text">Grupos</div>
<!-- END switch_user_logged_in -->
</a>
<a class="menu-link" href="/memberlist">
<div class="icon membros"></div>
<div class="text">Membros</div>
</a>
<a class="menu-link" href="/portal">
<div class="icon portal"></div>
<div class="text">Portal</div>
</a>
</div>
<div class="audio-rafa">
<button onclick="playRafaOuPause()"><i class="fas fa-play"></i></button>
<button onclick="playRafaOuPause()"><i class="fas fa-pause"></i></button>
<br />
<button id="mutarRafa" onclick="mutarRafa()"><i class="fas fa-volume-up"></i></button>
<input type="range" min="0" max="100" value="100" oninput="rafaVolume()" onchange="rafaVolume()" id="rafaRange">
<br />
<span id="audio-text">Rádio Light Habbo</span>
</div>
<div class="menu-social">
<a class="social-btn social-facebook" href="https://www.facebook.com/groups/798239510947530/" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="social-btn social-instagram" href="https://www.instagram.com/imcopoficial/" target="_blank"><i class="fab fa-instagram"></i></a>
<!-- BEGIN switch_user_logged_in -->
<a class="social-btn social-discord" href="https://discord.com/invite/q6ruEQ52Ak" target="_blank"><i class="fab fa-discord"></i></a>
<!-- END switch_user_logged_in -->
<a class="social-btn social-youtube" href="INDISPONÍVEL" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</nav>
<div id="page-header">
<div class="headerbar">
<div class="header-box">
<!-- BEGIN switch_user_logged_out -->
<div class="box-title">Local de Acesso</div>
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<input type="text" class="login-inputbox" name="username" placeholder="{L_USERNAME}" required/>
<input type="password" class="login-inputbox" name="password" placeholder="{L_PASSWORD}" required/>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} hidden/>
<input type="submit" class="login-btn login" name="login" value="{L_LOGIN}" />
<input type="button" class="login-btn register" name="register" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
</form>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="box-title">Olá, <script>document.write(_userdata.username)</script></div>
<div class="box-content">
<a href="/profile?mode=editprofile">Informações</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Preferências</a>
<a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos e Ignorados</a>
</div>
<div class="box-avatar">
<img id="user-avatar" src=""/>
<script>document.getElementById('user-avatar').src =
"http://www.habbo.com.br/habbo-imaging/avatarimage?&user=" + _userdata.username +
"&action=std,crr=6&direction=4&head_direction=3&img_format=png&gesture=sml&headonly=0&size=b";
</script>
</div>
<div class="box-logout">
<a href="/login?logout">
<input type="button" class="login-btn logout" name="logout" value="Desconectar" />
</a>
<a href="/privmsg?folder=inbox" id="notify_link" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}">
<button type="button" class="login-btn mp" name="mp"></button>
</a>
<a href="/search?search_id=watchsearch" title="Notificações">
<button type="button" class="login-btn notif" name="notif"></button>
</a>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Quanto à posição podemos sim resolver neste tópico, uma vez que se trata de personalização.
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 02.02.21 19:56
Boa tarde @RafaelS.,
Quando o volume está no 0%, e aperto o alto-falante para "desmutar", ele continua "mutado". E se tiver pelo menos 1% ele "desmuta", existe a possibilidade de fazer com que vá para os 100%?
Atenciosamente, NicolasKR2021!
RafaelS. escreveu:Eu fiz da seguinte forma: se você tiver o rádio mutado e desmutar ele, o volume voltará no valor que estiver na barra (em vez de ir para 100%). Por exemplo, se você tiver o som ajustado para 75% ao desmutar ele voltará nesse mesmo valor.
Quando o volume está no 0%, e aperto o alto-falante para "desmutar", ele continua "mutado". E se tiver pelo menos 1% ele "desmuta", existe a possibilidade de fazer com que vá para os 100%?
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 02.02.21 23:24
NicolasKR2021 escreveu:Quando o volume está no 0%, e aperto o alto-falante para "desmutar", ele continua "mutado". E se tiver pelo menos 1% ele "desmuta", existe a possibilidade de fazer com que vá para os 100%?
Atenciosamente, NicolasKR2021!
Amigo, isso não é um erro - pelo contrário - é completamente normal.
Basta você fazer o teste no volume do seu computador que irá acontecer o mesmo. Se deixar o volume em 0% e clicar no alto-falante, ele não vai nos 100% automaticamente, pois você precisa aumentar na barra/slider.
Se ainda sim quiser, posso fazer a alteração mas que fique claro que não é o comportamento "comum".
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 03.02.21 5:55
Certo, então deixes assim mesmo!
Antes de fechar, para alterar a posição dá rádio toda de local, devo fazer outro tópico? Caso a resposta do mesmo seja sim, pode fechar!
Obrigado pela ajuda!
Cordialmente, NicolasKR2021!
Antes de fechar, para alterar a posição dá rádio toda de local, devo fazer outro tópico? Caso a resposta do mesmo seja sim, pode fechar!
Obrigado pela ajuda!
Cordialmente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 03.02.21 16:46
NicolasKR2021 escreveu:Antes de fechar, para alterar a posição dá rádio toda de local, devo fazer outro tópico? Caso a resposta do mesmo seja sim, pode fechar!
Claro que sim, já havia inclusive confirmado em uma das minhas mensagens anteriores:
RafaelS. escreveu:Quanto à posição podemos sim resolver neste tópico, uma vez que se trata de personalização.
Fico no aguardo,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 03.02.21 22:10
Boa tarde!
Bom, @RafaelS. eu gostaria de mover a rádio para o local onde eu fiz um "X": https://ibb.co/YN6km14
Sendo assim colocando um quadrado preto com opacidade no mesmo estilo que o da parte de login: https://ibb.co/wyfJrVz
E por favor, deixe centralizado.
Atenciosamente, NicolasKR2021!
Bom, @RafaelS. eu gostaria de mover a rádio para o local onde eu fiz um "X": https://ibb.co/YN6km14
Sendo assim colocando um quadrado preto com opacidade no mesmo estilo que o da parte de login: https://ibb.co/wyfJrVz
E por favor, deixe centralizado.
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 03.02.21 22:28
Olá @NicolasKR2021,
Nesse local já se encontram os anúncios do seu fórum. Posto isto, você quer que ele fique acima ou abaixo dos anúncios?
Fico no aguardo,
RafaelS.
Nesse local já se encontram os anúncios do seu fórum. Posto isto, você quer que ele fique acima ou abaixo dos anúncios?
Fico no aguardo,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 03.02.21 23:44
Se existir a possibilidade de mover os anúncios para o final da página seria interessante, mas no entanto caso não venha a existir a possibilidade, deixe a cima por gentileza.
Atenciosamente, NicolasKR2021!
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 04.02.21 23:33
Olá @NicolasKR2021,
Troque novamente o seu template overall_header por este:
Atenciosamente,
RafaelS.
Troque novamente o seu template overall_header por este:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script type="text/javascript" src="https://illiweb.com/rs3/44/frm/mentions/tooltipster.js" ></script>
<link rel="stylesheet" type="text/css" href="https://illiweb.com/rs3/44/frm/mentions/tooltipster.css" />
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
$('#fa_ticker_content').css('display','block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0)
{
$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert)
{
var height_max = h_perso;
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
#audio{position: absolute;top: 7.5px;margin: auto;left: 0;right: 0;}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
<!-- END google_analytics_code_bis -->
ga('send', 'pageview');
<!-- BEGIN google_analytics_code_bis -->
ga('bis.send', 'pageview');
<!-- END google_analytics_code_bis -->
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<script src="https://api2.truesecurity.com.br/truePlayer.js/sonic.dedicado.stream/8174/audio?t=1585214756" DEFER></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
.audio-rafa button i {
color: white;
font-size: 20px;
}
.audio-rafa {
margin: 10px auto 0;
padding-top: 6px;
text-align: center;
background: #000000ba;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
border-radius: 10px;
box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);
font-size: 13px;
padding: 7px;
text-shadow: 0 2px rgba(0,0,0,0.5);
}
input#rafaRange {
vertical-align: 2px;
margin-left: 5px;
}
span#audio-text {
color: white;
font-size: 12px;
font-weight: bold;
}
</style>
<script>
var _0x16d0=['424718VHdPCe','play','\x20---\x20Inicializando\x20Rádio\x20Player\x20|\x20by\x20RafaelS.\x20(ajuda.forumeiros.com)\x20---','rafaRange','text','1mAtDrE','27eAKNPT','11FvaHgy','#audio-text','addClass','IMCOP','13113UQeUrq','volume','1FuqNQV','value','removeClass','23103vqufSV','pause','#mutarRafa\x20i','animate','fas\x20fa-volume-up','player-rafa','length','fas\x20fa-volume-mute','280264UDZuAB','100417uWpcLa','304697NFdMxx','205461gOkNEO','getElementById'];var _0x1c27=function(_0x2f7018,_0x5ef1cd){_0x2f7018=_0x2f7018-0xc2;var _0x16d027=_0x16d0[_0x2f7018];return _0x16d027;};(function(_0x353d2e,_0x4e4e92){var _0x4e6834=_0x1c27;while(!![]){try{var _0x17e8dc=-parseInt(_0x4e6834(0xcc))*-parseInt(_0x4e6834(0xc3))+parseInt(_0x4e6834(0xd9))+-parseInt(_0x4e6834(0xd7))+parseInt(_0x4e6834(0xd6))*parseInt(_0x4e6834(0xc9))+parseInt(_0x4e6834(0xd5))+parseInt(_0x4e6834(0xc7))*-parseInt(_0x4e6834(0xc2))+parseInt(_0x4e6834(0xd4))*-parseInt(_0x4e6834(0xde));if(_0x17e8dc===_0x4e4e92)break;else _0x353d2e['push'](_0x353d2e['shift']());}catch(_0x42580a){_0x353d2e['push'](_0x353d2e['shift']());}}}(_0x16d0,0x3b9dd));function rafaVolume(){var _0x4f8f66=_0x1c27,_0xf59c6a=document[_0x4f8f66(0xd8)](_0x4f8f66(0xdc))[_0x4f8f66(0xca)]/0x64;document[_0x4f8f66(0xd8)](_0x4f8f66(0xd1))[_0x4f8f66(0xc8)]=_0xf59c6a,_0xf59c6a===0x0?$('#mutarRafa\x20i')[_0x4f8f66(0xcb)]()[_0x4f8f66(0xc5)](_0x4f8f66(0xd3)):$(_0x4f8f66(0xce))[_0x4f8f66(0xcb)]()[_0x4f8f66(0xc5)](_0x4f8f66(0xd0));}function mutarRafa(){var _0x1c1fd6=_0x1c27,_0x277084=document[_0x1c1fd6(0xd8)](_0x1c1fd6(0xd1));_0x277084[_0x1c1fd6(0xc8)]>0x0?(_0x277084[_0x1c1fd6(0xc8)]=0x0,$('#mutarRafa\x20i')[_0x1c1fd6(0xcb)]()[_0x1c1fd6(0xc5)](_0x1c1fd6(0xd3))):rafaVolume();}function playRafaOuPause(){var _0xb1f33c=_0x1c27,_0x3ab25e=document['getElementById']('player-rafa');return _0x3ab25e['paused']?_0x3ab25e[_0xb1f33c(0xda)]():_0x3ab25e[_0xb1f33c(0xcd)]();}$(function(){var _0x1d563d=_0x1c27;console['log'](_0x1d563d(0xdb));var _0x3a41c0=[_0x1d563d(0xc6),'Rádio\x20Light\x20Habbo'],_0x714e63=0x0;setInterval(function(){var _0x321414=_0x1d563d;$(_0x321414(0xc4))[_0x321414(0xcf)]({'opacity':0x0},function(){var _0x3870fb=_0x321414;if(_0x3a41c0[_0x3870fb(0xd2)]>_0x714e63)$(this)[_0x3870fb(0xdd)](_0x3a41c0[_0x714e63])[_0x3870fb(0xcf)]({'opacity':0x1}),_0x714e63++;else _0x714e63=0x0;});},0x7d0);});
</script>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<nav class="menu">
<audio id="player-rafa" src="https://sonic.dedicado.stream/8174/stream"></audio>
<div class="menu-container">
<div class="menu-link-wrapper">
<a class="menu-link" href="/forum">
<div class="icon forum"></div>
<div class="text">Início</div>
</a>
<!-- BEGIN switch_user_logged_in -->
<a class="menu-link" href="/groups">
<div class="icon grupos"></div>
<div class="text">Grupos</div>
<!-- END switch_user_logged_in -->
</a>
<a class="menu-link" href="/memberlist">
<div class="icon membros"></div>
<div class="text">Membros</div>
</a>
<a class="menu-link" href="/portal">
<div class="icon portal"></div>
<div class="text">Portal</div>
</a>
</div>
<div class="menu-social">
<a class="social-btn social-facebook" href="https://www.facebook.com/groups/798239510947530/" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="social-btn social-instagram" href="https://www.instagram.com/imcopoficial/" target="_blank"><i class="fab fa-instagram"></i></a>
<!-- BEGIN switch_user_logged_in -->
<a class="social-btn social-discord" href="https://discord.com/invite/q6ruEQ52Ak" target="_blank"><i class="fab fa-discord"></i></a>
<!-- END switch_user_logged_in -->
<a class="social-btn social-youtube" href="INDISPONÍVEL" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</nav>
<div id="page-header">
<div class="headerbar">
<div class="header-box">
<!-- BEGIN switch_user_logged_out -->
<div class="box-title">Local de Acesso</div>
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<input type="text" class="login-inputbox" name="username" placeholder="{L_USERNAME}" required/>
<input type="password" class="login-inputbox" name="password" placeholder="{L_PASSWORD}" required/>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} hidden/>
<input type="submit" class="login-btn login" name="login" value="{L_LOGIN}" />
<input type="button" class="login-btn register" name="register" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
</form>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="box-title">Olá, <script>document.write(_userdata.username)</script></div>
<div class="box-content">
<a href="/profile?mode=editprofile">Informações</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Preferências</a>
<a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos e Ignorados</a>
</div>
<div class="box-avatar">
<img id="user-avatar" src=""/>
<script>document.getElementById('user-avatar').src =
"http://www.habbo.com.br/habbo-imaging/avatarimage?&user=" + _userdata.username +
"&action=std,crr=6&direction=4&head_direction=3&img_format=png&gesture=sml&headonly=0&size=b";
</script>
</div>
<div class="box-logout">
<a href="/login?logout">
<input type="button" class="login-btn logout" name="logout" value="Desconectar" />
</a>
<a href="/privmsg?folder=inbox" id="notify_link" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}">
<button type="button" class="login-btn mp" name="mp"></button>
</a>
<a href="/search?search_id=watchsearch" title="Notificações">
<button type="button" class="login-btn notif" name="notif"></button>
</a>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="audio-rafa">
<button onclick="playRafaOuPause()"><i class="fas fa-play"></i></button>
<button onclick="playRafaOuPause()"><i class="fas fa-pause"></i></button>
<br />
<button id="mutarRafa" onclick="mutarRafa()"><i class="fas fa-volume-up"></i></button>
<input type="range" min="0" max="100" value="100" oninput="rafaVolume()" onchange="rafaVolume()" id="rafaRange">
<br />
<span id="audio-text">Rádio Light Habbo</span>
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 05.02.21 14:40
Amigo, está excelente!
Só peço para deixar em baixo do anuncio agora, pois assim terei dos dois jeitos salvos.
Após eu ver como ficou, irei deixar o mesmo fechar!
Atenciosamente, NicolasKR2021!
Só peço para deixar em baixo do anuncio agora, pois assim terei dos dois jeitos salvos.
Após eu ver como ficou, irei deixar o mesmo fechar!
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 05.02.21 14:52
Eu havia esquecido de mencionar na minha mensagem anterior mas realmente não há a possibilidade de deslocar os anúncios de acordo com as Condições Gerais de Uso (CGU) da Forumeiros.
No caso, irei precisar do seu template index_body uma vez que o template overall_header não "cobre" essa área do fórum (somente o topo do fórum).
Atenciosamente,
RafaelS.
NicolasKR2021 escreveu:Só peço para deixar em baixo do anuncio agora, pois assim terei dos dois jeitos salvos.
No caso, irei precisar do seu template index_body uma vez que o template overall_header não "cobre" essa área do fórum (somente o topo do fórum).
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 06.02.21 0:40
Aqui está irmão!
Atenciosamente, NicolasKR2021!
- Código:
{JAVASCRIPT}
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_header -->
<!-- BEGIN message_admin_index -->
<div class="panel introduction">
<!-- BEGIN message_admin_titre -->
<div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
<!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN disable_viewonline -->
<div class="block">
<!-- BEGIN switch_viewonline_link -->
<div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</a></div>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<div class="h3"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</div>
<!-- END switch_viewonline_nolink -->
{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<div class="block-footer"><strong>{LEGEND}:</strong> {GROUP_LEGEND}</div>
</div>
<!-- BEGIN switch_chatbox_activate -->
<div class="block">
<div class="h3">
<a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
</div>
{TOTAL_CHATTERS_ONLINE}: {CHATTERS_LIST}
</div>
<!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
<li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
<li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
<li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
{AUTO_DST}
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 06.02.21 13:29
Bom dia @NicolasKR2021,
Os passos a seguir, são os seguintes:
Primeiramente troque o seu overall_header pelo abaixo para remover o player acima dos anúncios:
Por fim, troque o seu template index_body para adicionar o player abaixo do anúncio.
Atenciosamente,
RafaelS.
Os passos a seguir, são os seguintes:
Primeiramente troque o seu overall_header pelo abaixo para remover o player acima dos anúncios:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script type="text/javascript" src="https://illiweb.com/rs3/44/frm/mentions/tooltipster.js" ></script>
<link rel="stylesheet" type="text/css" href="https://illiweb.com/rs3/44/frm/mentions/tooltipster.css" />
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
$('#fa_ticker_content').css('display','block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0)
{
$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert)
{
var height_max = h_perso;
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
#audio{position: absolute;top: 7.5px;margin: auto;left: 0;right: 0;}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
<!-- END google_analytics_code_bis -->
ga('send', 'pageview');
<!-- BEGIN google_analytics_code_bis -->
ga('bis.send', 'pageview');
<!-- END google_analytics_code_bis -->
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<script src="https://api2.truesecurity.com.br/truePlayer.js/sonic.dedicado.stream/8174/audio?t=1585214756" DEFER></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
.audio-rafa button i {
color: white;
font-size: 20px;
}
.audio-rafa {
margin: 10px auto 0;
padding-top: 6px;
text-align: center;
background: #000000ba;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
border-radius: 10px;
box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);
font-size: 13px;
padding: 7px;
text-shadow: 0 2px rgba(0,0,0,0.5);
}
input#rafaRange {
vertical-align: 2px;
margin-left: 5px;
}
span#audio-text {
color: white;
font-size: 12px;
font-weight: bold;
}
</style>
<script>
var _0x16d0=['424718VHdPCe','play','\x20---\x20Inicializando\x20Rádio\x20Player\x20|\x20by\x20RafaelS.\x20(ajuda.forumeiros.com)\x20---','rafaRange','text','1mAtDrE','27eAKNPT','11FvaHgy','#audio-text','addClass','IMCOP','13113UQeUrq','volume','1FuqNQV','value','removeClass','23103vqufSV','pause','#mutarRafa\x20i','animate','fas\x20fa-volume-up','player-rafa','length','fas\x20fa-volume-mute','280264UDZuAB','100417uWpcLa','304697NFdMxx','205461gOkNEO','getElementById'];var _0x1c27=function(_0x2f7018,_0x5ef1cd){_0x2f7018=_0x2f7018-0xc2;var _0x16d027=_0x16d0[_0x2f7018];return _0x16d027;};(function(_0x353d2e,_0x4e4e92){var _0x4e6834=_0x1c27;while(!![]){try{var _0x17e8dc=-parseInt(_0x4e6834(0xcc))*-parseInt(_0x4e6834(0xc3))+parseInt(_0x4e6834(0xd9))+-parseInt(_0x4e6834(0xd7))+parseInt(_0x4e6834(0xd6))*parseInt(_0x4e6834(0xc9))+parseInt(_0x4e6834(0xd5))+parseInt(_0x4e6834(0xc7))*-parseInt(_0x4e6834(0xc2))+parseInt(_0x4e6834(0xd4))*-parseInt(_0x4e6834(0xde));if(_0x17e8dc===_0x4e4e92)break;else _0x353d2e['push'](_0x353d2e['shift']());}catch(_0x42580a){_0x353d2e['push'](_0x353d2e['shift']());}}}(_0x16d0,0x3b9dd));function rafaVolume(){var _0x4f8f66=_0x1c27,_0xf59c6a=document[_0x4f8f66(0xd8)](_0x4f8f66(0xdc))[_0x4f8f66(0xca)]/0x64;document[_0x4f8f66(0xd8)](_0x4f8f66(0xd1))[_0x4f8f66(0xc8)]=_0xf59c6a,_0xf59c6a===0x0?$('#mutarRafa\x20i')[_0x4f8f66(0xcb)]()[_0x4f8f66(0xc5)](_0x4f8f66(0xd3)):$(_0x4f8f66(0xce))[_0x4f8f66(0xcb)]()[_0x4f8f66(0xc5)](_0x4f8f66(0xd0));}function mutarRafa(){var _0x1c1fd6=_0x1c27,_0x277084=document[_0x1c1fd6(0xd8)](_0x1c1fd6(0xd1));_0x277084[_0x1c1fd6(0xc8)]>0x0?(_0x277084[_0x1c1fd6(0xc8)]=0x0,$('#mutarRafa\x20i')[_0x1c1fd6(0xcb)]()[_0x1c1fd6(0xc5)](_0x1c1fd6(0xd3))):rafaVolume();}function playRafaOuPause(){var _0xb1f33c=_0x1c27,_0x3ab25e=document['getElementById']('player-rafa');return _0x3ab25e['paused']?_0x3ab25e[_0xb1f33c(0xda)]():_0x3ab25e[_0xb1f33c(0xcd)]();}$(function(){var _0x1d563d=_0x1c27;console['log'](_0x1d563d(0xdb));var _0x3a41c0=[_0x1d563d(0xc6),'Rádio\x20Light\x20Habbo'],_0x714e63=0x0;setInterval(function(){var _0x321414=_0x1d563d;$(_0x321414(0xc4))[_0x321414(0xcf)]({'opacity':0x0},function(){var _0x3870fb=_0x321414;if(_0x3a41c0[_0x3870fb(0xd2)]>_0x714e63)$(this)[_0x3870fb(0xdd)](_0x3a41c0[_0x714e63])[_0x3870fb(0xcf)]({'opacity':0x1}),_0x714e63++;else _0x714e63=0x0;});},0x7d0);});
</script>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<nav class="menu">
<audio id="player-rafa" src="https://sonic.dedicado.stream/8174/stream"></audio>
<div class="menu-container">
<div class="menu-link-wrapper">
<a class="menu-link" href="/forum">
<div class="icon forum"></div>
<div class="text">Início</div>
</a>
<!-- BEGIN switch_user_logged_in -->
<a class="menu-link" href="/groups">
<div class="icon grupos"></div>
<div class="text">Grupos</div>
<!-- END switch_user_logged_in -->
</a>
<a class="menu-link" href="/memberlist">
<div class="icon membros"></div>
<div class="text">Membros</div>
</a>
<a class="menu-link" href="/portal">
<div class="icon portal"></div>
<div class="text">Portal</div>
</a>
</div>
<div class="menu-social">
<a class="social-btn social-facebook" href="https://www.facebook.com/groups/798239510947530/" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="social-btn social-instagram" href="https://www.instagram.com/imcopoficial/" target="_blank"><i class="fab fa-instagram"></i></a>
<!-- BEGIN switch_user_logged_in -->
<a class="social-btn social-discord" href="https://discord.com/invite/q6ruEQ52Ak" target="_blank"><i class="fab fa-discord"></i></a>
<!-- END switch_user_logged_in -->
<a class="social-btn social-youtube" href="INDISPONÍVEL" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</nav>
<div id="page-header">
<div class="headerbar">
<div class="header-box">
<!-- BEGIN switch_user_logged_out -->
<div class="box-title">Local de Acesso</div>
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<input type="text" class="login-inputbox" name="username" placeholder="{L_USERNAME}" required/>
<input type="password" class="login-inputbox" name="password" placeholder="{L_PASSWORD}" required/>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} hidden/>
<input type="submit" class="login-btn login" name="login" value="{L_LOGIN}" />
<input type="button" class="login-btn register" name="register" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
</form>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="box-title">Olá, <script>document.write(_userdata.username)</script></div>
<div class="box-content">
<a href="/profile?mode=editprofile">Informações</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Preferências</a>
<a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos e Ignorados</a>
</div>
<div class="box-avatar">
<img id="user-avatar" src=""/>
<script>document.getElementById('user-avatar').src =
"http://www.habbo.com.br/habbo-imaging/avatarimage?&user=" + _userdata.username +
"&action=std,crr=6&direction=4&head_direction=3&img_format=png&gesture=sml&headonly=0&size=b";
</script>
</div>
<div class="box-logout">
<a href="/login?logout">
<input type="button" class="login-btn logout" name="logout" value="Desconectar" />
</a>
<a href="/privmsg?folder=inbox" id="notify_link" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}">
<button type="button" class="login-btn mp" name="mp"></button>
</a>
<a href="/search?search_id=watchsearch" title="Notificações">
<button type="button" class="login-btn notif" name="notif"></button>
</a>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Por fim, troque o seu template index_body para adicionar o player abaixo do anúncio.
- Código:
{JAVASCRIPT}
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_header -->
<div class="audio-rafa" style="width: 195px; margin-bottom: 10px;">
<button onclick="playRafaOuPause()"><i class="fas fa-play"></i></button>
<button onclick="playRafaOuPause()"><i class="fas fa-pause"></i></button>
<br />
<button id="mutarRafa" onclick="mutarRafa()"><i class="fas fa-volume-up"></i></button>
<input type="range" min="0" max="100" value="100" oninput="rafaVolume()" onchange="rafaVolume()" id="rafaRange">
<br />
<span id="audio-text">Rádio Light Habbo</span>
</div>
<!-- BEGIN message_admin_index -->
<div class="panel introduction">
<!-- BEGIN message_admin_titre -->
<div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
<!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN disable_viewonline -->
<div class="block">
<!-- BEGIN switch_viewonline_link -->
<div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</a></div>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<div class="h3"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</div>
<!-- END switch_viewonline_nolink -->
{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<div class="block-footer"><strong>{LEGEND}:</strong> {GROUP_LEGEND}</div>
</div>
<!-- BEGIN switch_chatbox_activate -->
<div class="block">
<div class="h3">
<a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
</div>
{TOTAL_CHATTERS_ONLINE}: {CHATTERS_LIST}
</div>
<!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
<li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
<li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
<li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
{AUTO_DST}
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 07.02.21 7:09
Prezado @RafaelS.,
Eu fico meio indeciso a respeito de onde o player da rádio vai ficar, o mesmo não poderia me aconselhar nada? Dar uma ideia? Talvez em pop-up?
Mas cara, o seu trabalho é excepcional e um exemplo para outras pessoas!
Cordialmente, peço desculpas por esse enrrolo todo da minha parte!
Atenciosamente, NicolasKR2021!
Eu fico meio indeciso a respeito de onde o player da rádio vai ficar, o mesmo não poderia me aconselhar nada? Dar uma ideia? Talvez em pop-up?
Mas cara, o seu trabalho é excepcional e um exemplo para outras pessoas!
Cordialmente, peço desculpas por esse enrrolo todo da minha parte!
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 07.02.21 17:40
Olá @NicolasKR2021,
Vai depender muito do seu gosto, mas que tal se o rádio fosse fixado na página?
Adicione o seguinte código à sua folha de estilos (CSS):
No caso ele ficará fixado no canto inferior esquerdo, caso queira que fique em outro local basta dizer.
Ah, obrigado pelos elogios.
Atenciosamente,
RafaelS.
Vai depender muito do seu gosto, mas que tal se o rádio fosse fixado na página?
Adicione o seguinte código à sua folha de estilos (CSS):
- Código:
.audio-rafa {
position: fixed;
bottom: 5px;
left: 5px;
z-index: 100;
}
No caso ele ficará fixado no canto inferior esquerdo, caso queira que fique em outro local basta dizer.
Ah, obrigado pelos elogios.
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 07.02.21 22:51
Boa noite @RafaelS. ,
Assim fica interessante, mas existe a possibilidade de ter um botão para minimizar o player?
O botão poderia ser um fone de ouvido, ou um microfone... Até mesmo uma nota de música, pois assim quando clicar no botão de minimizar, o player da rádio poderá ser aberto novamente pelo botão que ficará em destaque.
Por gentileza, fique a seu critério qual vai ser o botão de minimizar. Sendo assim, peço apenas que deixe o botão no lado direito superior do player!
Se puder fazer assim, eu fico muito grato a respeito!
Atenciosamente, NicolasKR2021!
Assim fica interessante, mas existe a possibilidade de ter um botão para minimizar o player?
O botão poderia ser um fone de ouvido, ou um microfone... Até mesmo uma nota de música, pois assim quando clicar no botão de minimizar, o player da rádio poderá ser aberto novamente pelo botão que ficará em destaque.
Por gentileza, fique a seu critério qual vai ser o botão de minimizar. Sendo assim, peço apenas que deixe o botão no lado direito superior do player!
Se puder fazer assim, eu fico muito grato a respeito!
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por RafaelS. 09.02.21 6:57
NicolasKR2021 escreveu:UP 24 horas!
Peço um pouco de paciência amigo.
Troque o seu template index_body por este:
- Código:
{JAVASCRIPT}
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_header -->
<script>
(function() {
'use strict';
$(function() {
$('#audio-button').on('click', function() {
$('.audio-rafa').fadeToggle();
});
});
}(jQuery));
</script>
<div id="audio-button"><i class="fas fa-headphones-alt"></i></div>
<div class="audio-rafa" style="width: 195px;">
<button onclick="playRafaOuPause()"><i class="fas fa-play"></i></button>
<button onclick="playRafaOuPause()"><i class="fas fa-pause"></i></button>
<br />
<button id="mutarRafa" onclick="mutarRafa()"><i class="fas fa-volume-up"></i></button>
<input type="range" min="0" max="100" value="100" oninput="rafaVolume()" onchange="rafaVolume()" id="rafaRange">
<br />
<span id="audio-text">Rádio Light Habbo</span>
</div>
<!-- BEGIN message_admin_index -->
<div class="panel introduction">
<!-- BEGIN message_admin_titre -->
<div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
<!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN disable_viewonline -->
<div class="block">
<!-- BEGIN switch_viewonline_link -->
<div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</a></div>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<div class="h3"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</div>
<!-- END switch_viewonline_nolink -->
{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<div class="block-footer"><strong>{LEGEND}:</strong> {GROUP_LEGEND}</div>
</div>
<!-- BEGIN switch_chatbox_activate -->
<div class="block">
<div class="h3">
<a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
</div>
{TOTAL_CHATTERS_ONLINE}: {CHATTERS_LIST}
</div>
<!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
<li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
<li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
<li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
{AUTO_DST}
Por fim, troque o CSS que eu lhe passei na minha última mensagem por este:
- Código:
.audio-rafa {
position: fixed;
bottom: 5px;
left: 40px;
z-index: 100;
}
#audio-button {
position: fixed;
bottom: 5px;
left: 5px;
background: #000000ba;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
border-radius: 20px;
box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);
font-size: 13px;
padding: 7px;
cursor: pointer;
z-index: 100;
}
#audio-button i {
color: white;
font-size: 16px;
}
Caso não fique do seu agrado, fique à vontade para enumerar as alterações que gostaria de fazer.
Atenciosamente,
RafaelS.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Personalização do reprodutor de áudio
por NicolasKR2021 10.02.21 3:30
Beleza irmão!
Agradeço por sua ajuda, nesta questão!
Pode fechar! Estou muito grato a respeito do seu feito!
Atenciosamente, NicolasKR2021!
Agradeço por sua ajuda, nesta questão!
Pode fechar! Estou muito grato a respeito do seu feito!
Atenciosamente, NicolasKR2021!
NicolasKR2021- **
- Membro desde : 11/01/2021
Mensagens : 74
Pontos : 99 -
Re: Personalização do reprodutor de áudio
por tikky 10.02.21 8:30
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Tópicos semelhantes» Instalar reprodutor de som
» Áudio travando
» Reproduzir aúdio em HTML
» Carregamento de Arquivo de Áudio
» Adicionar audio no fórum
» Áudio travando
» Reproduzir aúdio em HTML
» Carregamento de Arquivo de Áudio
» Adicionar audio no fórum
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos