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
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
197 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 191 Visitantes :: 1 Motor de busca

Claudio Arthur, iPlayer, iScroll, Kyo Panda, Luiz~, PESS_dodo

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Adição de setas e menu dropdown ao widget

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

Em curso Adição de setas e menu dropdown ao widget

Mensagem por juleic1123 em Qui 13 Abr 2017 - 18:41

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 : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Sex 14 Abr 2017 - 18:04

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Sab 15 Abr 2017 - 18:06

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Dom 16 Abr 2017 - 18:51

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por Sennior em Dom 16 Abr 2017 - 21:04

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

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

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

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

Mensagem por juleic1123 em Seg 17 Abr 2017 - 1:02

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 : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Ter 18 Abr 2017 - 1:13

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Qui 20 Abr 2017 - 0:57

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Sex 21 Abr 2017 - 3:51

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Sab 22 Abr 2017 - 4:56

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Dom 23 Abr 2017 - 2:32

U-up...
*morre*
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Seg 24 Abr 2017 - 2:58

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda em Seg 24 Abr 2017 - 12:59

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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

Mensagem por juleic1123 em Seg 24 Abr 2017 - 22:23

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 : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Qua 26 Abr 2017 - 23:30

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda em Qui 27 Abr 2017 - 14:15

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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

Mensagem por juleic1123 em Qui 27 Abr 2017 - 18:42

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 : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda em Qui 27 Abr 2017 - 19:11

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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

Mensagem por juleic1123 em Sex 28 Abr 2017 - 2:50

Aqui está Muito feliz

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

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Sab 29 Abr 2017 - 9:38

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Dom 30 Abr 2017 - 12:41

up Muito feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Seg 1 Maio 2017 - 12:16

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda em Ter 2 Maio 2017 - 14:23

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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

Mensagem por juleic1123 em Ter 2 Maio 2017 - 14:37

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 : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Qua 3 Maio 2017 - 14:37

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda em Qui 4 Maio 2017 - 13:05

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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

Mensagem por juleic1123 em Qui 4 Maio 2017 - 18:39

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 : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda em Sex 5 Maio 2017 - 12:38

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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

Mensagem por juleic1123 em Sex 5 Maio 2017 - 13:46

Sim Feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Sab 6 Maio 2017 - 16:08

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Dom 7 Maio 2017 - 16:23

*insere aqui o seu típico up*
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Seg 8 Maio 2017 - 21:05

Up Mostrando a lingua
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Ter 9 Maio 2017 - 19:36

up Mostrando a lingua
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Qua 10 Maio 2017 - 19:32

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Qui 11 Maio 2017 - 20:54

up xD
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Sab 13 Maio 2017 - 0:08

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Dom 14 Maio 2017 - 0:45

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda em Seg 15 Maio 2017 - 12:21

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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

Mensagem por juleic1123 em Seg 15 Maio 2017 - 19:36

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 : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Ter 16 Maio 2017 - 19:38

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 : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Qua 17 Maio 2017 - 20:35

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda em Qui 18 Maio 2017 - 13:58

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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

Mensagem por juleic1123 em Qui 18 Maio 2017 - 19:09

Atualizo manualmente Feliz
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 em Sab 20 Maio 2017 - 16:22

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por juleic1123 Ontem à(s) 2:30

up
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 554
Pontos Ativos : 796

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

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

Mensagem por Kyo Panda Hoje à(s) 13:38

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 : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

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