Adição de setas e menu dropdown ao widget

Relembrando a primeira mensagem :

Detalhes da questão

Endereço do fórum: http://www.online-winxclub.com/
Versão do fórum: phpBB3

Descrição

Olá, muito boa tarde a todos!
Hoje estou aqui para vos pedir ajuda em dois widgets que eu tenho e pretendia mudá-los um pouco, acrescentando um sistema com uma espécie de menu dropdown e outro com duas setas e a possíbilidade de colocar variadas opções.

Vou explicar melhor com imagens, de modo a que seja mais fácil perceber, visto que eu sou um pouco confuso quanto aos pedidos.



Então:
1. Este é o aspeto atual do widget. Na primeira caixa, em cima do local onde se encontra em letras maiúsculas "PLAY GAME" está uma barra cor-de-rosa que diz "WINX ADVENTURE", eu gostava que a mesma fosse removida (eu posso fazer isso, claro) e trocada por uma espécie de menu dropdown que se abre e te dá duas opções: Mini-games ou Winx Adventure.

Ficando mais ao menos assim:


2. Na tabela de Classificações, gostaria que fosse possível acrescentar setas para mudarmos de mini-jogo para mini-jogo, sendo que a imagem com o 1, 2, 3,4, 5... (a tabela de classificações dos melhores jogadores) mudava inclusive. (Constatem a imagem acima).

3. Por fim, gostaria que fosse traduzivel para diversas linguas, já que o meu fórum tem diversos idiomas.

As imagens possivelmente necessárias:







O código dos mesmos:

Código:

<div id="Menu_minigame_playButton">
</div>
 <script>
if(lang_=="en")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="https://i.imgur.com/XJqRN7E.png" border="0" style="" /></a>';
}
if(lang_=="pt")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="https://i.imgur.com/1a8O8Cn.png" border="0" style="" /></a>'
}
if(lang_=="fr")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="https://i.imgur.com/XwiEkQr.png" border="0" style="" /></a>'
}
if(lang_=="es")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="https://i.imgur.com/bmN14RA.png" border="0" style="" /></a>'
}
if(lang_=="ru")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="https://i.imgur.com/zneXvWO.png" border="0" style="" /></a>'
}
if(lang_=="pl")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="https://i.imgur.com/Z40sGUn.png" border="0" style="" /></a>'
}
if(lang_=="br")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="https://i.imgur.com/1a8O8Cn.png" border="0" style="" /></a>'
}
if(lang_=="tr")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="http://i.hizliresim.com/dbQAaL.png" border="0" style="" /></a>'
}
if(lang_=="it")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="https://i.imgur.com/GBKdrMA.png" border="0" style="" /></a>'
}
if(lang_=="de")
{
document.getElementById("Menu_minigame_playButton").innerHTML = '<a href="http://www.online-winxclub.com/portal?pid=38"><img src="http://i.hizliresim.com/r6qXGm.png" border="0" style="" /></a>'
}
</script>  <script>
document.getElementById("avatar").innerHTML = '<img src="'+_user_avatar+'" alt="" style="margin-top: -0px;">';
</script> 
<div style="background: url(http://i.hizliresim.com/Lyyplz.png) left no-repeat; height: 418px; width: 315px;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
   <div style="float: left; padding-left: 20px; padding-top: 39px;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <strong><span style="color: #474747;"><span style="font-size: 14px;"><span id="highscoreText" style="font-family: Arial Black;">Rank</span></span></span></strong><br /><br /><br /><br /><br /><br />                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
      <div style="float: left; padding-left: 45px;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
      </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
   </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
   <div align="center">
                                                                                                                                                                                                                                                                                                              <br /><br /><br /><br /><br /><br /><iframe style="width: 80%; height: 240px;" src="http://www.online-winxclub.com/h1-highscore" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"><div style="float: left; padding-left: 10px; padding-top: 0px;"></iframe>                                                                                                                                                                                                     
   </div>
                                                                                                                                                                                                         <script>
if(lang_=="en")
{
document.getElementById("highscoreText").innerText = 'Rank';
}
if(lang_=="pt")
{
document.getElementById("highscoreText").innerText = 'Classificação';
}
if(lang_=="fr")
{
document.getElementById("highscoreText").innerText = 'Classement';
}
if(lang_=="es")
{
document.getElementById("highscoreText").innerText = 'Puesto';
}
if(lang_=="ru")
{
document.getElementById("highscoreText").innerText = 'Рекорд';
}
if(lang_=="pl")
{
document.getElementById("highscoreText").innerText = 'Wysoki wynik';
}
if(lang_=="br")
{
document.getElementById("highscoreText").innerText = 'Classificação';
}
if(lang_=="tr")
{
document.getElementById("highscoreText").innerText = 'Yüksek skor';
}
if(lang_=="it")
{
document.getElementById("highscoreText").innerText = 'Classifica';
}
if(lang_=="de")
{
document.getElementById("highscoreText").innerText = 'Highscore';
}
</script>             

                                               

Quase lá.
Aqui está o que falta, se não for muito complicado!
- Eu gostaria que depois do 5, existisse uma barra que fosse para baixo (como você fez originalmente quando estava mais largo )

Gostaria que esta zona diminuisse um pouco, ficando assim:


E já agora, o menu que aí está não é suposto ter o mesmo texto que o debaixo kkk
Os menus são os mesmos, o de cima e o de baixo.
Porém aqui, onde está esse avatar, é suposto dizer apenas "Mini-jogos" e "Winx Adventure", sendo que o de baixo, com a tabela de ranking é que diz "Kikos Adventure", etc...

Gostaria por último que fosse possível editar a fonte e o tamanho para cada texto presente. >-<

Obrigado por tudo


PS - O novo JS foi desativado porque bugou o sistema de idiomas e a caixa de usuários no site

up

up

up

https://codepen.io/anon/pen/BRgvrm?editors=0100

Eu separei as opções dos menus superior e inferior e adicionei o scroll. As fontes podem ser configuradas dentro do .fa-winxgames (o senhor precisa de apoio quanto aos estilos CSS?). Já o bug, precisaria ver o que está acontecendo.

Reativei o JS agora.
Relembro que o erro que ocorre devido ao JS é: A opção sair na caixa do usuário e o sistema de idiomas desapareceram.

Talvez seja melhor eu ter ajuda mesmo no CSS, pois não estou conseguindo colocar as fontes (me sinto censurado agora, mas CSS não é bem o meu forte) kkk

Kyo, o site está um pouco bugado devido ao código então penso que terei de colocar o JS que me deu desativado novamente...

Se quer saber o que se passa, na página inicial e apenas na página inicial o sistema de idiomas desaparece, bem como o botão sair, compare:

com o JS ativo


com o JS desativado

up

up

up

up

Apenas para facilitar o suporte que está obtendo pelo nosso amigo @Kyo Panda:

Para que ele possa realmente saber o que se passa, infelizmente, o senhor terá que manter o Javascript ativado, dado que é usando as ferramentas do desenvolvedor que conseguimos procurar o problema. E caso o código não estiver ativo, como nós vamos conseguir procurá-lo?

o/

Daqui a 2 dias irei colocar sem falta
Neste momento estou em casa de um amigo meu e passarei o fim de semana cá, não posso mesmo que queira :s

Já adicionei tudo!

up....

Dado que questões sobre JS são consideradas abandonadas após três dias sem atividade no tópico: