Adição de setas e menu dropdown ao widget

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>             

                                               

up

up

up

Boas!

Vamos por etapas, porque fiquei confuso
Bem, deseja que ao clicar sobre "WINX ADVENTURE" apareça uma função descrita com "Mini-games e Winx Adventure"? Em Drop Down?
Mas não ficara confuso, pois, ao clicar em "WINX ADVENTURE" ira abrir uma outra aba com "Mini-games e Winx Adventure"?

Explique para mim esta parte.
Até mais!

Sennior, que saudades!
Relativamente à função... sim, ela é mesmo para ser assim, apesar de parecer confuso.
Esse botão serve para mostrar todas as páginas relativamente aos jogos, daí estar desta forma. O jogo princípal será o Winx Adventure, então o menu já estará definido para redirecionar para lá, porém os jogadores podem derivar e mudar para Mini-jogos, caso seja a intenção dos mesmos fazer isto.

up

up

up

up

U-up...
*morre*

up

Até podemos fazer, mas precisarei que o senhor "picote" um pouco mais as imagens.



Para a caixa branca que forma o Widget, preciso que você recorte as quatro pontos (1, 2, 3, 4) e os quatro centros (5, 6, 7, 8).

Dos títulos, precisaria das duas pontas e o centro (9, 10, 11,).

Do logo da caixa (12) e se quiser traduzir o "Play Game", do mesmo separado (13).

---

Da mesma forma que os títulos, preciso que separe pontas e centros do botão de seleção e da caixa do seleção. E as setas precisam estar separadas (sem fundo) também.

Blz?

---

Quer que coloque o avatar do membro dentro do círculo ao lado do "Play Game"?

Olá!
Claro, adoraria que os avatares estivessem no lugar! Muito obrigado!

Relativamente ao que me pediu, aqui está tudo, penso:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
as setas sem fundo:
O botão "PLAY GAME": (ainda não fiz, lamento, mas vá preparando tudo e se quiser até me dar, e eu coloco quando tiver tempo)


Se faltar alguma coisa diga >_<

up

Eu precisarei que o senhor faça alguns ajustes no recorte:

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

Tente recortar as imagens novamente, entre no modelo e edite-as no CSS. Eu comentei em cima de cada uma sobre o que elas se referem. Como base, tente manter todas as partes com 32x32. Assim fica mais fácil de alinhar. o/

Prontinho, algumas coisas não deu para recortar 32x32 então deixei o antigo, ficando um pouco mal... se precisar de meus recortes (im)profissionais, só precisa falar

Para o caso do código não ter guardado:

Código:

body {
  font-family: sans-serif;
}

.fa-winxgames-body {
  position: relative;
  width: 20rem;
  margin-bottom: 8rem;
  background-color: #fff;
  /* Topo caixa */
  background: url(http://i.hizliresim.com/r34dr3.png) repeat-x;
}

.fa-winxgames-inner {
  padding: 2rem 0;
  /* Fundo caixa */
  background: url(http://i.hizliresim.com/7qJ8zN.png) repeat-x center bottom;
}

.fa-winxgames-content {
  padding: 0 2rem;
  position: relative;
}

.fa-winxgames-body:before,
.fa-winxgames-body:after,
.fa-winxgames-inner:before,
.fa-winxgames-inner:after,
.fa-winxgames-header-inner:after {
  content: ' ';
  position: absolute;
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
}

.fa-winxgames-body:before {
  top: 0;
  left: 0;
  /* Canto superior esquerdo caixa */
  background-image: url(http://i.hizliresim.com/P0dEyd.png);
}

.fa-winxgames-body:after {
  top: 0;
  right: 0;
  /* Canto superior direito caixa */
  background-image: url(http://i.hizliresim.com/9QzpyN.png);
}

.fa-winxgames-inner:before {
  bottom: 0;
  left: 0;
  /* Canto inferior esquerdo caixa */
  background-image: url(http://i.hizliresim.com/gqgLaO.png);
}

.fa-winxgames-inner:after {
  bottom: 0;
  right: 0;
  /* Canto inferior direito caixa */
  background-image: url(http://i.hizliresim.com/oj5Y2q.png);
}

.fa-winxgames-content:before,
.fa-winxgames-content:after {
  content: ' ';
  position: absolute;
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  width: 2rem;
}

.fa-winxgames-content:before {
  /* Lado esquerdo caixa */
  background-image: url(http://i.hizliresim.com/LyMorZ.png);
  left: 0;
}

.fa-winxgames-content:after {
  /* Lado direito caixa */
  background-image: url(http://i.hizliresim.com/1Lbn5N.png);
  background-position: right;
  right: 0;
}

.fa-winxgames-title {
  font-weight: 700;
  margin-bottom: 1rem;
}

.fa-winxgames-bar { 
  padding: 0 1rem;
  position: relative;
}

.fa-winxgames-bar-inner {
  /* Centro barra título */
  background: url(http://i.hizliresim.com/vbGo94.png);
  line-height: 2.125rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.fa-winxgames-bar:before,
.fa-winxgames-bar:after {
  content: ' ';
  width: 1rem;
  height: 2.125rem;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
}

.fa-winxgames-bar:before {
  /* Lado esquerdo barra título */
  background-image: url(http://i.hizliresim.com/nRdGnM.png);
  left: 0;
}

.fa-winxgames-bar:after {
  /* Lado direito barra título */
  background-image: url(http://i.hizliresim.com/1Lb2k1.png);
  background-position: right;
  right: 0;
}

.fa-winxgames-prev,
.fa-winxgames-next {
  position: absolute;
  display: block;
  line-height: 2.125rem;
  z-index: 1;
}

.fa-winxgames-prev {
  left: 0;
}

.fa-winxgames-next {
  right: 0;
}

.fa-winxgames-header {
  background: #fff url(https://i58.servimg.com/u/f58/16/73/13/78/1210.png) no-repeat;
  right: 0;
  left: 0;
  height: 123px;
  position: absolute;
  left: 0.75rem;
  z-index: 5;
}

.fa-winxgames-header-inner {
  /* Lado direito caixa */
  background: url(https://i58.servimg.com/u/f58/16/73/13/78/710.png) repeat-y right;
  height: 4.75rem;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 10;
}

.fa-winxgames-header-inner:before {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 85%;
  right: 2rem;
  height: 2rem;
  background: url(https://i58.servimg.com/u/f58/16/73/13/78/810.png) repeat-x center bottom;
  z-index: -1;
}

.fa-winxgames-header-inner:after {
  content: ' ';
  bottom: 0;
  right: 0;
  /* Canto inferior direito caixa */
  background-image: url(https://i58.servimg.com/u/f58/16/73/13/78/410.png);
}

PS. A barra cor de rosa, no seu lado direito, ficava mal em 32x32, então recotei 32x34, só assim alinhou perfeitamente.

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

Precisava apenas dos botões de seleção de jogo, cortados da mesma maneira da barra rosa.

Aqui está

https://imgur.com/a/ysTX1

up

up

up

Acho que vou precisar de um recorte do botão de seleção ativo também:

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

Ele terá que ser sem o canto arredondado.

Já coloquei mas ficou um pouco bugado :s

Código:

body {
  font-family: sans-serif;
  padding-top: 10rem;
}
 
.fa-winxgames-body {
  position: relative;
  width: 20rem;
  margin-bottom: 8rem;
  background-color: #fff;
  /* Topo caixa */
  background: url(http://i.hizliresim.com/r34dr3.png) repeat-x;
}
 
.fa-winxgames-inner {
  padding: 2rem 0;
  /* Fundo caixa */
  background: url(http://i.hizliresim.com/7qJ8zN.png) repeat-x center bottom;
}
 
.fa-winxgames-content {
  padding: 0 2rem;
  position: relative;
  min-height: 2.8rem;
}
 
.fa-winxgames-body:before,
.fa-winxgames-body:after,
.fa-winxgames-inner:before,
.fa-winxgames-inner:after,
.fa-winxgames-header-inner:after {
  content: ' ';
  position: absolute;
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
}
 
.fa-winxgames-body:before {
  top: 0;
  left: 0;
  /* Canto superior esquerdo caixa */
  background-image: url(http://i.hizliresim.com/P0dEyd.png);
}
 
.fa-winxgames-body:after {
  top: 0;
  right: 0;
  /* Canto superior direito caixa */
  background-image: url(http://i.hizliresim.com/9QzpyN.png);
}
 
.fa-winxgames-inner:before {
  bottom: 0;
  left: 0;
  /* Canto inferior esquerdo caixa */
  background-image: url(http://i.hizliresim.com/gqgLaO.png);
}
 
.fa-winxgames-inner:after {
  bottom: 0;
  right: 0;
  /* Canto inferior direito caixa */
  background-image: url(http://i.hizliresim.com/oj5Y2q.png);
}
 
.fa-winxgames-content:before,
.fa-winxgames-content:after {
  content: ' ';
  position: absolute;
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  width: 2rem;
}
 
.fa-winxgames-content:before {
  /* Lado esquerdo caixa */
  background-image: url(http://i.hizliresim.com/LyMorZ.png);
  left: 0;
}
 
.fa-winxgames-content:after {
  /* Lado direito caixa */
  background-image: url(http://i.hizliresim.com/1Lbn5N.png);
  background-position: right;
  right: 0;
}
 
.fa-winxgames-title {
  font-weight: 700;
  margin-bottom: 1rem;
}
 
.fa-winxgames-bar { 
  padding: 0 1rem;
  position: relative;
}
 
.fa-winxgames-bar-inner {
  /* Centro barra título */
  background: url(http://i.hizliresim.com/vbGo94.png);
  line-height: 2.125rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
 
.fa-winxgames-bar:before,
.fa-winxgames-bar:after {
  content: ' ';
  width: 1rem;
  height: 2.125rem;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
}
 
.fa-winxgames-bar:before {
  /* Lado esquerdo barra título */
  background-image: url(http://i.hizliresim.com/nRdGnM.png);
  left: 0;
}
 
.fa-winxgames-bar:after {
  /* Lado direito barra título */
  background-image: url(http://i.hizliresim.com/1Lb2k1.png);
  background-position: right;
  right: 0;
}
 
.fa-winxgames-prev,
.fa-winxgames-next {
  position: absolute;
  display: block;
  line-height: 2.125rem;
  z-index: 1;
}
 
.fa-winxgames-prev {
  left: 0;
}
 
.fa-winxgames-next {
  right: 0;
}
 
.fa-winxgames-header {
  background: #fff url(https://i58.servimg.com/u/f58/16/73/13/78/1210.png) no-repeat;
  right: 0;
  left: 0;
  height: 123px;
  position: absolute;
  left: 0.75rem;
  z-index: 5;
}
 
.fa-winxgames-header-inner {
  height: 5.15rem;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 10;
}

.fa-winxgames-header-top {
  /* Lado direito caixa */
  background: url(https://i58.servimg.com/u/f58/16/73/13/78/710.png) repeat-y right;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 3rem;
}
 
.fa-winxgames-header-inner:before {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 85%;
  right: 2rem;
  height: 2rem;
  background: url(https://i58.servimg.com/u/f58/16/73/13/78/810.png) repeat-x center bottom;
  z-index: -1;
}
 
.fa-winxgames-header-inner:after {
  content: ' ';
  bottom: 0;
  right: 0;
  /* Canto inferior direito caixa */
  background-image: url(http://i.hizliresim.com/oj5Y2q.png);
}

.fa-winxgames-inner-top {
  height: 2.8rem;
}

.fa-winxgames-selector {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  height: 1.925rem;
}

.fa-winxgames-toggle,
.fa-winxgames-dropdown a {
  background: url(http://i.imgur.com/XjeJFws.png);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  height: 1.925rem;
  line-height: 2rem;
  text-align: center;
  position: absolute;
  right: 0.4rem; 
  margin: 0 2rem;
  white-space: nowrap;
}

.fa-winxgames-toggle:after,
.fa-winxgames-toggle:before,
.fa-winxgames-dropdown a:after,
.fa-winxgames-dropdown a:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
}

.fa-winxgames-toggle:after,
.fa-winxgames-dropdown a:after{
  right: -2rem;
  background-image: url(http://i.hizliresim.com/P0J64N.png);
}

.fa-winxgames-toggle:before,
.fa-winxgames-dropdown a:before {
  left: -2rem;
  background-image: url(http://i.imgur.com/hxWfS8W.png);
}

.fa-winxgames-dropdown {
  padding: 0;
  list-style: none;
  margin: 0;
  position: absolute;
  bottom: 1.925rem;
  right: 0;
}

.fa-winxgames-dropdown a {
  position: relative;
  height: 2rem;
  background-image: url(http://i.imgur.com/QA5ApgK.png);
}

.fa-winxgames-dropdown a:after {
  background-image: url(http://i.imgur.com/gQHrb7I.png);
}

.fa-winxgames-dropdown a:before {
  background-image: url(http://i.imgur.com/42t6ddo.png);
}

up

Está ficando um pouco complicado de acertar o código. Logo, teremos que tomar um dos caminhos:

• Podemos utilizar imagens inteiras, porém elas não redimensionarão de acordo com o conteúdo.
  
• Posso fazer com CSS puro, mas não ficará igual a imagem.

Qual prefere?

Se não houver mesmo solução, iria preferir a primeira, se não for muito complicado.

Contudo, tive outra ideia para remediar o problema (talvez), é consigo.

Já que está tudo pronto e o problema parece ser o menu "dropdown", se quiser pode colocar o menu com as setas que colocou na highscore dos membros, onde está o "Kiko Adventure", se vir que é mais fácil pode criar um sistema de setas igual.

Assim?

https://codepen.io/anon/pen/RVLMGJ?editors=1000

Sim

up

*insere aqui o seu típico up*

Up

up

up

up xD

up

up

Apenas dando um retorno, eu peço perdão pela demora no pedido. Estamos a fazer algumas melhorias nos códigos do FA é isso está consumindo bastante tempo. Eu não possuo uma data para quando as terminaremos, pois a cada pena puxada, surge uma galinha. :/

ahahah, sem problemas, nunca se apressa a perfeição e eu aprendi isso com você.
E pelo que ouvi o Luiz~ dizendo... provavelmente vai ficar muito bom.

só para não correr o risco do tópico ser bloqueado por inatividade
(Up)

up

Okay. O trampo findou. ._.

---

A lista de usuários vem de algum lugar ou o senhor atualiza manualmente?

Atualizo manualmente

up

up

Acho que terminamos: https://codepen.io/anon/pen/mmaYxE

Olá! Obrigado por tudo, mas acho que temos um problema >-<
Eu coloquei o código no portal inicial e por algum motivo nenhum deles resultou... ;-;

O senhor esqueceu de aplicar o CSS:

Código:


.fa-winxgames-body {
  position: relative;
  width: 20rem;
  margin-bottom: 8rem;
  background-color: #fff;
  /* Topo caixa */
  background: url(http://i.hizliresim.com/r34dr3.png) repeat-x;
}
 
.fa-winxgames-inner {
  padding: 2rem 0;
  /* Fundo caixa */
  background: url(http://i.hizliresim.com/7qJ8zN.png) repeat-x center bottom;
}
 
.fa-winxgames-content {
  padding: 0 2rem;
  position: relative;
  min-height: 2.8rem;
}
 
.fa-winxgames-body:before,
.fa-winxgames-body:after,
.fa-winxgames-inner:before,
.fa-winxgames-inner:after,
.fa-winxgames-header-inner:after {
  content: ' ';
  position: absolute;
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
}
 
.fa-winxgames-body:before {
  top: 0;
  left: 0;
  /* Canto superior esquerdo caixa */
  background-image: url(http://i.hizliresim.com/P0dEyd.png);
}
 
.fa-winxgames-body:after {
  top: 0;
  right: 0;
  /* Canto superior direito caixa */
  background-image: url(http://i.hizliresim.com/9QzpyN.png);
}
 
.fa-winxgames-inner:before {
  bottom: 0;
  left: 0;
  /* Canto inferior esquerdo caixa */
  background-image: url(http://i.hizliresim.com/gqgLaO.png);
}
 
.fa-winxgames-inner:after {
  bottom: 0;
  right: 0;
  /* Canto inferior direito caixa */
  background-image: url(http://i.hizliresim.com/oj5Y2q.png);
}
 
.fa-winxgames-content:before,
.fa-winxgames-content:after {
  content: ' ';
  position: absolute;
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  width: 2rem;
}
 
.fa-winxgames-content:before {
  /* Lado esquerdo caixa */
  background-image: url(http://i.hizliresim.com/LyMorZ.png);
  left: 0;
}
 
.fa-winxgames-content:after {
  /* Lado direito caixa */
  background-image: url(http://i.hizliresim.com/1Lbn5N.png);
  background-position: right;
  right: 0;
}
 
.fa-winxgames-title {
  font-weight: 700;
  margin-bottom: 1rem;
}
 
.fa-winxgames-bar { 
  padding: 0 1rem;
  position: relative;
}
 
.fa-winxgames-bar-inner {
  /* Centro barra título */
  background: url(http://i.hizliresim.com/vbGo94.png);
  line-height: 2.125rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
 
.fa-winxgames-bar:before,
.fa-winxgames-bar:after {
  content: ' ';
  width: 1rem;
  height: 2.125rem;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
}
 
.fa-winxgames-bar:before {
  /* Lado esquerdo barra título */
  background-image: url(http://i.hizliresim.com/nRdGnM.png);
  left: 0;
}
 
.fa-winxgames-bar:after {
  /* Lado direito barra título */
  background-image: url(http://i.hizliresim.com/1Lb2k1.png);
  background-position: right;
  right: 0;
}
 
.fa-winxgames-prev,
.fa-winxgames-next {
  position: absolute;
  display: block;
  line-height: 2.125rem;
  z-index: 1;
}
 
.fa-winxgames-prev {
  left: 0;
}
 
.fa-winxgames-next {
  right: 0;
}
 
.fa-winxgames-header {
  background: #fff url(https://i58.servimg.com/u/f58/16/73/13/78/1210.png) no-repeat;
  right: 0;
  left: 0;
  height: 123px;
  position: absolute;
  left: 0.75rem;
  z-index: 5;
  margin-top: -11px;
  cursor: pointer;
}

.fa-winxgames-header-inner {
  height: 5.15rem;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 10;
}

.fa-winxgames-header-top {
  /* Lado direito caixa */
  background: url(https://i58.servimg.com/u/f58/16/73/13/78/710.png) repeat-y right;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 3rem;
}
 
.fa-winxgames-header-inner:before {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 85%;
  right: 2rem;
  height: 2rem;
  background: url(https://i58.servimg.com/u/f58/16/73/13/78/810.png) repeat-x center bottom;
  z-index: -1;
}
 
.fa-winxgames-header-inner:after {
  content: ' ';
  bottom: 0;
  right: 0;
  /* Canto inferior direito caixa */
  background-image: url(http://i.hizliresim.com/oj5Y2q.png);
}

.fa-winxgames-ranking {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
  max-height: 350px;
  overflow: auto;
}

.fa-winxgames-ranking li {
  background-color: #e9b7d0;
  padding: 10px;
  overflow: hidden;
}

.fa-winxgames-ranking li:nth-child(even) {
  background-color: #fecce5;
}

.fa-winxgames-ranking-pos {
  float: left;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-weight: 700;
  background-color: #ff679a;
  margin: 10px 10px 10px 0;
}

.fa-winxgames-avatar {
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.fa-winxgames-ranking-meta {
  line-height: 25px;
}

.fa-winxgames-ranking-name {
  font-weight: 700;
}

E o JS:

Código:

(function($) {
   'use strict';
   
   var games = [{
      title: 'Kiko\'s Adventure',
      url: '#',
      ranking: [{
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }]
   }, {
      title: 'Other Game',
      url: '#',
      ranking: [{
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://2img.net/u/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }]
   }];
   
   var i18n = {
      'pt': {
         'Games': 'Jogos',
         'Ranking': 'Classificação',
         'Kiko\'s Adventure': 'Aventura da Kiko',
         'Other Game': 'Outro Jogo',
      },
   };
   
   var my_getcookie = my_getcookie || function() { return false; };
   
   var lang_ = window.lang_ || my_getcookie('lang_') || 'en';
   
   var lang = i18n[lang_] ? i18n[lang_] : {};
   
   var t = function(message) {
      return lang[message] ? lang[message] : message;
   };
   
   var $ranking;
   
   var buildRanking = function(index) {
      var ranking = games[index].ranking;
      var html = [];
      
      $.each(ranking, function(index) {
         html.push([
              '<li>'
            , '  <div class="fa-winxgames-ranking-pos">' + (index + 1) + '</div>'
            , '  <img class="fa-winxgames-avatar" src="' + this.avatar + '" />'
            , '  <div class="fa-winxgames-ranking-meta">'
            , '    <div class="fa-winxgames-ranking-name">' + this.name + '</div>'
            , '    <div class="fa-winxgames-ranking-points">' + this.points + '</div>'
            , '  </div>'
            , '</li>'
         ].join('\n'));
      });
      
      $ranking.html(html.join(''));
   };
   
   $(function() {
      var $widget = $('.fa-winxgames');
      
      $.each(lang, function(key, value) {
         $widget.html($widget.html().replace(new RegExp(key, 'g'), value));
      });
      
      $ranking = $('.fa-winxgames-ranking');
      var $titlePlay = $('.fa-winxgames-play-bar');
      var $titleRanking = $('.fa-winxgames-ranking-bar');
      
      var indexPlay = 0;
      var indexRanking = 0;
      
      $titlePlay.text(t(games[indexPlay].title));
      $titleRanking.text(t(games[indexRanking].title));
      buildRanking(indexRanking);
      
      $widget.on('click', '.fa-winxgames-header', function() {
         location.href = games[indexPlay].url;
      });
      
      $widget.on('click', '.fa-winxgames-play-prev, .fa-winxgames-play-next', function(event) {
         event.preventDefault();
         
         var $this = $(this);
         
         indexPlay += $this.hasClass('fa-winxgames-play-prev') ? -1 : 1;
         indexPlay = indexPlay < 0 ? games.length - 1 : indexPlay > games.length - 1 ? 0 : indexPlay;
         
         $titlePlay.text(t(games[indexPlay].title));
      });
      
      $widget.on('click', '.fa-winxgames-ranking-prev, .fa-winxgames-ranking-next', function() {
         event.preventDefault();
         
         var $this = $(this);
         
         indexRanking += $this.hasClass('fa-winxgames-ranking-prev') ? -1 : 1;
         indexRanking = indexRanking < 0 ? games.length - 1 : indexRanking > games.length - 1 ? 0 : indexRanking;
         
         $titleRanking.text(t(games[indexRanking].title));
         
         buildRanking(indexRanking);
      });
   });   
}(jQuery));

Dê uma olhada no JS para definir os jogos, rankings e traduções.

Muito obrigado!
Agradeço por tudo o que tem feito, você tem me ajudado imenso nestes últimos 2 meses com o fórum.

Hmm... uma perguntinha... há possíbilidade de diminuir esta parte para que fique igual à de cima?


E um outro pedido...
Existe maneira de colocar tudo um pouco mais parecido com a imagem original que eu dei? Como por exemplo nas fontes e tamanhos, está tudo muito pequeno, quando deveria ter Arial Black nos títulos a 14px, por exemplo, e as fotos mais pequenas, o "1", "2" no lado esquerdo totalmente...

Muito obrigado mais uma vez por todo o tempo dedicado!

https://codepen.io/anon/pen/ybwKzR o/