Detalhes da questão

Endereço do fórum: https://wildstrawb3rry.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Olá, tudo bem?

Eu comprei um código de multicontas, porém estou tendo dificuldade em configurá-lo (e o traduzir) por ser todo em java e css, porém gostaria de deixá-lo de acordo com o print: https://i.imgur.com/DscGdTz.png ao clicar no botão sinalizado de vermelho ele abrir a abinha de multicontas. Como nesse fórum aqui, por exemplo bloodandbones. foroactivo .com/

Botão de login

Código:

<div class="botaologin"><span class="lnr lnr-select"></span></div>

Código:

.botaologin {
cursor: pointer;
font-size: 20px;
transition: .2s ease;
right: 76px;
padding: 9px;
position: absolute;
background: var(--primary-color);
transform: rotate(45deg);
transition: ease .5s;
outline: 1px solid var(--highligh);
}

.botaologin .lnr {
transform: rotate(-45deg);
transition: ease .5s;
color: #000;
}

O codigo java do multicontas (que da pra observar no final do fórum, depois das estatisticas) eu posso passar por MP, pois eu paguei por ele.

Bom dia.

Talvez possamos ajudá-lo se postar o código. Porém, caso não queira você deve buscar suporte no vendedor, pois, suporte por mensagem privada é proibido pelas regras. Por gentileza, poderia postar o código em sua próxima mensagem?

Atenciosamente,
Shek

Eu vou postar, mas pretendo apagar em algumas horas, peço desculpas já por isso.

Bom dia.

Apenas duas partes do código são importantes por assim dizer... Poderei citá-las aqui sem expor o código por inteiro.

Código:

window.switchBefore="#picture_legend";
window.switchAfter="";

switchBefore ou switchAfter se refere ao local da aplicação do código. Isto é, seria a classe ou ID de uma div ou elemento da página que receberá todo o contexto do código script. O que diferencia ambos (pelo que entendi, claro) é a forma que seriam aplicados. Before se aplica antes do elemento descrito, e o after é depois. Não percebi certa diferença, mas ao aplicar o código por inteiro modificando o switchBefore para sua div da imagem, eu percebi isso:

Eu queria pedir que no seu código já aplicado no fórum, substituísse o #picture_legend por .botaologin

Os testes que fiz foram pelo console do meu navegador, então eu suponho que não seja o que pediu, mas isso me da uma dimensão de como ficará. Poderia salvar a alteração e me notificar aqui por favor?

Antes da modificação, perceba que o código é executado, mas na parte inferior do fórum, na legenda:

Atenciosamente.

Ponto, modifiquei!

Olá novamente.

Eu presumo que o que deseja agora seria que se abra uma espécie de "lightbox" para que esse elemento não apareça no menu. Então vou sugerir outras mudanças, que pode ajudar.

No código que incluiu, acredito que no template:

Código:

<div class="botaologin"><span class="lnr lnr-select"></span></div>

Adicione outra div depois dele:

Código:

<div class="openElement" style="padding: 10px;background-color: rgb(255, 255, 255);position: fixed;right: 80px;margin-bottom: -70px;"></div>

Modifique o nome .botaologin por .openElementDepois disso, no script que já está na página javascript do seu fórum (aquele script que me mostrou no documento do Google), inclua depois de todo o código esse novo código:

Código:

$(document).ready(function(){
  $(".botaologin").click(function(){
  $(".openElement").slideToggle();
  });
});

Obrigado por notificar sobre o funcionamento.

Adicionei, porém acredito que não tenha funcionado como deveria

Olá de novo.

Vejamos... Modifique o script para esse:

Código:

$(document).ready(function(){
  $(".botaologin").click(function(){
  $(".cambio-cuenta").slideToggle();
  });
});

No seu CSS, localize:

Código:

.cambio-cuenta

e adicione dentro das chaves a propriedade: display:none;Salve e pode apagar o código:

Código:

<div class="openElement" style="padding: 10px; background-color: rgb(255, 255, 255); position: fixed; right: 80px; margin-bottom: -70px; display: none;"></div>

A ideia agora é fazer com que o código fique escondido, mas quando clicado no botão do menu ele abra.

Eu sei que estamos fazendo várias tentativas, mas é assim que se trabalha em código de outros desenvolvedores. Espero que entenda.

OBS: Quanto a tradução do código, realmente deverá contatar o autor, pois, o código está ofuscado impedindo a alteração do idioma dele.

Atenciosamente.

Oie! Não tem problema, sei como a questão de codes é complicada!

Dessa vez já aparece escondido e quando clica ele abre, apenas de não estar no lugar ideal. Porém percebi que na página de /login, ao clicar no botão aparecem três das caixas de login

Eita! Vamos tentar algo... Diferente.

Eu acredito que ficaria melhor incluir o código abaixo do logo... Então, troque o .botaologin por div.titleGI. Se ocorrer como penso, isso fará com ele apareça assim:

Se na página de login ele aparece, acho que devemos incluir algo aqui. Pega todo o código script que tens, e substitua o termo CODIGO_AQ por seu código script:

Código:

if(location.pathname !== '/login') {
CODIGO_AQ
}

Isso fará com que ele funcione em toda página, exceto na de login.

Substitui o .botaologin por div.titleGI nesse codigo que cê enviou e ele parou de aparece quando clico no botão, então não sei se resolveu a página de login também (mas apliquei o codigo!)

Shek escreveu:

Código:

$(document).ready(function(){
  $(".botaologin").click(function(){
  $(".cambio-cuenta").slideToggle();
  });
});

Ah, não. Eu esqueci de citar (@kkmlpk) que não era no script $(".botaologin").click(function(){. A modificação era para o window.switchBefore="#picture_legend";.

Desfaça a alteração no $(".botaologin").click(function(){, e aplique a mudança para o window.switchBefore.

OHH, prontinho!

Dei uma olhada e na página de login já não aparece mais! Mas nas outras páginas ele acabou ficando acima da caixa do título

Poderia citar as páginas por favor?

O que impede a visualização do código nas páginas é o location.pathname !== '/login'. Ele verifica se a página é diferente de /login, e se a condição for verdadeira o código é executado. Por tanto, para aplicar para outras páginas, é preciso incluir outros operadores. Ou seja, ficaria algo assim:

Código:

if(location.pathname !== '/login' || location.pathname !== '/register' || location.pathname !== '/faq')

A cada nova página que será considerada uma excessão, então é incluso um operador ||, que quer dizer OU. Seria o mesmo que dizer em palavras:

Código:

SE(location.pathname !== '/login' OU location.pathname !== '/register' OU location.pathname !== '/faq') {O código é executado.}

Certo, era isso mesmo. Pra ele não aparecer só na página de login e não ficar triplicado, nas outras páginas aparece normal, sem triplicar!

Agora tudo está funcional, certo? Poderia confirmar se ainda precisa de assistência?

Desculpa vir incomodar de novo!

Estou fazendo umas modificações, porém queria saber se tem como colocar a caixa em cima dos outros elementos, pois acaba ficando "por baixo"

E também quando não estou logada e clico no botão, a caixa aparece duplicada.

Olá novamente.

Teria que alterar o .tabanunciosbox no CSS. No caso, mudar o display:flex; para display:unset;...

Funcionou, obrigada!