Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Ranks Servidor RPG
Hoje à(s) 03:36 pm por Roger_Crazzy

» Remover propaganda
Hoje à(s) 03:08 pm por Kyo Panda

» Botões adicionar amigos
Hoje à(s) 01:14 pm por Kyo Panda

» Sistema de like nas mensagens
Hoje à(s) 01:06 pm por Kyo Panda

» Remover permissão
Hoje à(s) 12:31 pm por paulim78

» O tópico ou mensagem que você está procurando não existe
Hoje à(s) 12:21 pm por paulim78

» Adicionar Javascript no post
Hoje à(s) 12:03 pm por Marmitt

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Luiz
 
Marcelo22m2
 
Kyo Panda
 
paulim78
 
Lincoln
 
Shek
 
APOllO
 
>.< T-T =3
 
b@nzé
 

Quem está conectado
310 usuários online :: 9 usuários cadastrados, 1 Invisível e 300 Visitantes :: 1 Motor de busca

Ajux, Connor R., JamesZ., Key of Destiny, Kyo Panda, Lincoln, Marmitt, paulim78, Roger_Crazzy

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Adição de setas e menu dropdown ao widget

Página 1 de 2 1, 2  Seguinte

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 13/04/17, 02:41 pm

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! Muito feliz
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. Feliz

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



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. Feliz

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>             

                                               
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 14/04/17, 02:04 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 15/04/17, 02:06 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 16/04/17, 02:51 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum
  • 0

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Sennior em 16/04/17, 05:04 pm

Boas!

Vamos por etapas, porque fiquei confuso Rindo
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!


Seta Jamais forneça seus dados pessoais, tais como e-mail de fundação ou senhas pelo fórum!
Seta Antes de criar um novo tópico faça uma pesquisa rápida e olhe a lista de tutoriais prontos.
Seta Perdeu a senha de administração? Veja o que fazer.
Seta Ferramentas do Administrador.

"Você será lembrado pelo que faz, e não pela cor que tens".
avatar

Sennior
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16306
Pontos Ativos : 20793

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 16/04/17, 09:02 pm

Sennior, que saudades! Venerar
Relativamente à função... sim, ela é mesmo para ser assim, apesar de parecer confuso. Rindo
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. Muito feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 17/04/17, 09:13 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 19/04/17, 08:57 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 20/04/17, 11:51 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 22/04/17, 12:56 am

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 22/04/17, 10:32 pm

U-up...
*morre*
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 23/04/17, 10:58 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum
  • 0

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 24/04/17, 08:59 am

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"?


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 24/04/17, 06:23 pm

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 >_<
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 26/04/17, 07:30 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 27/04/17, 10:15 am

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/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 27/04/17, 02:42 pm

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 Muito feliz

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.
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 27/04/17, 03:11 pm

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.


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 27/04/17, 10:50 pm

Aqui está Muito feliz

http://imgur.com/a/ysTX1
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 29/04/17, 05:38 am

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 30/04/17, 08:41 am

up Muito feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 01/05/17, 08:16 am

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 02/05/17, 10:23 am

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.


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 02/05/17, 10:37 am

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);
}
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 03/05/17, 10:37 am

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 04/05/17, 09:05 am

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?


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 04/05/17, 02:39 pm

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

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. Feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 05/05/17, 08:38 am

Assim?

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 05/05/17, 09:46 am

Sim Feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 06/05/17, 12:08 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 07/05/17, 12:23 pm

*insere aqui o seu típico up*
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 08/05/17, 05:05 pm

Up Mostrando a lingua
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 09/05/17, 03:36 pm

up Mostrando a lingua
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 10/05/17, 03:32 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 11/05/17, 04:54 pm

up xD
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 12/05/17, 08:08 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 13/05/17, 08:45 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 15/05/17, 08:21 am

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. :/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 15/05/17, 03:36 pm

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

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 16/05/17, 03:38 pm

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

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 17/05/17, 04:35 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 18/05/17, 09:58 am

Okay. O trampo findou. ._.

---

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 18/05/17, 03:09 pm

Atualizo manualmente Feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 20/05/17, 12:22 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 21/05/17, 10:30 pm

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 23/05/17, 09:38 am

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 24/05/17, 10:51 am

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... ;-;

avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 24/05/17, 11:10 am

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://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Kiko',
         points: 9001,
      }]
   }, {
      title: 'Other Game',
      url: '#',
      ranking: [{
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/2612/28/77/07/avatars/43393-49.jpg',
         name: 'Van',
         points: 9001,
      }, {
         avatar: 'https://imgfast.net/users/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.


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em 24/05/17, 12:08 pm

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

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! Feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 586
Pontos Ativos : 829

http://www.online-winxclub.com/forum

Resolvido Re: Adição de setas e menu dropdown ao widget

Mensagem por Kyo Panda em 25/05/17, 08:31 am

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3631
Pontos Ativos : 4849

http://ajuda.forumeiros.com

Página 1 de 2 1, 2  Seguinte

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum