Uso de um fundo no login personalizado

2 participantes

Ir para baixo

Tópico resolvido Uso de um fundo no login personalizado

Mensagem por PauloVinicios1755 29.05.21 19:01

Detalhes da questão


Endereço do fórum: https://brasilplayobscure.forumeiros.com
Versão do fórum: AwesomeBB

Descrição


olá amigos, então queria trocar esse fundo branco por uma imagem,

Código:
(function($) {
    'use strict';
    $(function() {
        if (_userdata.session_logged_in === 1) {
            return
        }
        if (!((/^\/login/i.test(location.pathname)))) {
            return
        }
          $('#page-header').css({ 'display':'none'});
          $('.statistics').css({ 'display':'none'});
          $('#page-footer').css({ 'top':'-100px', 'position':'absolute'});
          $('#main-content p:first-child').css({ 'display':'none'});
          $('fieldset.fields1 dt').css({ 'display':'none'});
          $('#main-content p:first-child').css({ 'display':'none'});
          $(".panel fieldset").attr("style", "margin: 0!important");
          $("dd:last-child").attr("style", "text-align: right");
          $(".content").attr("style", "display: none");
          $(".panel").attr("style", "background-color: inherit; box-shadow: none");
          $(".h3").attr("style", "border: 0; font-size: 32px; font-weight: 500; margin-bottom: 20px;");
          $("input[type='text']").attr("style", "width: 100%!important; border: 1px solid #ced4da; border-radius: 5px; padding: 6px 12px; font-size: 16px;");
          $(".button1").attr("style", "text-transform: uppercase; font-size: 20px; width: 100%!important; margin: 8px 0 0;");
          $("#wrap").attr("style", "background-color: #fff; margin-top: 64px;");
          $("dd").attr("style", "margin-left: 0!important; text-align: right;");
          $("label").attr("style", "margin-right: 0!important;");
          $("dl:nth-child(3)").attr("style", "padding: 0;");
          $(".conteneur_minwidth_IE").attr("style", "flex: inherit");
          $(".page-title").attr("style", "color: #444; border: 0; font-size: 32px; font-weight: 500; padding: 0");
          $(".inner p").attr("style", "width: 105%;");
          $("body").attr("style", "background-color: #fff; align-items: center; justify-content: center; display: flex;");
          $("#username").attr("placeholder", "Nome de usuário");
          $("#password").attr("placeholder", "Senha");
          $(".button1").attr("value", "Entrar");
          $(".h3").text( "Iniciar sessão" );
          
          var $password = $('#password');
          $password.attr("style", "width: 100%!important; border: 1px solid #ced4da; border-radius: 5px; padding: 6px 12px; font-size: 16px; margin-bottom: 8px;");
          var $panel1 = $('form .panel');
          $panel1.attr("style", "background-color: #fff; box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; padding: 32px; width: 366px; margin: auto; display:block!important");
          var $content = $('form .content');
          $content.attr("style", "display: block!important");
          var $register = $('form .panel .inner .content .fields1');
          $register.append('<a href="/register"><div style="font-size: 20px; align-items: center; justify-content: center; display: flex; padding: 10px 24px; text-transform: uppercase;"><i class="fa fa-user" style="margin-right: 8px"></i>Registrar</div></a>');
          var $footer = $('.conteneur_minwidth_IE');
          $footer.append('<div style="text-align: center; font-size: 16px; color: #6c757d;"><p style="margin: 0 0 6px; font-size: 14px">Feito <i class="fas fa-code"></i> por <a href="https://ajuda.forumeiros.com/u64319">vcapelli</a> para <a href="https://forumeiros.com/">Forumeiros.com</a></p><div class="footer-link"><a href="/forum">Início</a><a href="/faq">FAQ</a><a href="/privacy">Política de Privacidade</a></div>');
          $footer.append('<img style="position: absolute; top: calc(20% - 44.50px - 44.50px); left: 50%; transform: translate(-50%, 0);" src="https://2img.net/r/frmste/images/sigle.png"/>');
          var $footercss = $('.footer-link a');
          $footercss.attr("style", "margin: 0 6px;");
          var $awesome = $('head');
          $awesome.append('<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">');
        });
}
)(jQuery);

olhando meu fórum vcs ver um fundo todo branco
PauloVinicios1755
PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Uso de um fundo no login personalizado

Mensagem por tikky 29.05.21 19:38

Olá @PauloVinicios1755,

Localize no seu código:
Código:
$("body").attr("style", "background-color: #fff; align-items: center; justify-content: center; display: flex;");
substitua para:
Código:
$("body").attr("style", "background-image: url([URL_DA_IMAGEM_AQUI]); align-items: center; justify-content: center; display: flex;");
alterando [URL_DA_IMAGEM_AQUI] para o endereço da sua imagem!


Atenciosamente,
pedxz.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Uso de um fundo no login personalizado

Mensagem por PauloVinicios1755 29.05.21 21:06

olá ele a imagem ficou no local errado mais nisso eu já ajeitei, outra teria como remover o rodapé de cima do fórum e remover a capa banner?
PauloVinicios1755
PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Uso de um fundo no login personalizado

Mensagem por tikky 30.05.21 14:55

Altere o seu código para:
Código:
(function($) {
    'use strict';
    $(function() {
        if (_userdata.session_logged_in === 1) {
            return;
        }
        if (!((/^\/login/i.test(location.pathname)))) {
            return;
        }


        $('header').css({
            'display': 'none'
        });

     
        $(".panel fieldset").attr("style", "margin: 0!important");
        $("dd:last-child").attr("style", "text-align: right");
        $(".content").attr("style", "display: none");
        $(".panel").attr("style", "background-color: inherit; box-shadow: none");
        $(".h3").attr("style", "border: 0; font-size: 32px; font-weight: 500; margin-bottom: 20px;");
        $("input[type='text']").attr("style", "width: 100%!important; border: 1px solid #ced4da; border-radius: 5px; padding: 6px 12px; font-size: 16px;");
        $(".button1").attr("style", "text-transform: uppercase; font-size: 20px; width: 100%!important; margin: 8px 0 0;");
        $("#wrap").attr("style", "background-color: #fff; margin-top: 64px;");
        $("dd").attr("style", "margin-left: 0!important; text-align: right;");
        $("label").attr("style", "margin-right: 0!important;");
        $("dl:nth-child(3)").attr("style", "padding: 0;");
        $(".conteneur_minwidth_IE").attr("style", "flex: inherit");
        $(".page-title").attr("style", "color: #444; border: 0; font-size: 32px; font-weight: 500; padding: 0");
        $(".inner p").attr("style", "width: 105%;");
        $("body").attr("style", "background-color: #fff; align-items: center; justify-content: center; display: flex;");
        $("#username").attr("placeholder", "Nome de usuário");
        $("#password").attr("placeholder", "Senha");
        $(".button1").attr("value", "Entrar");
        $(".h3").text("Iniciar sessão");

        $('#wrap').css({
            'background-image': 'url(https://i.imgur.com/5WyZt2Q.png)',
            'position': 'fixed',
            'top': 0,
            'left': 0,
            'display': 'block',
            'max-width': '100%',
            'z-index': '999999',
            'right': 0,
            'min-width': '100%',
            'overflow': 'hidden',
            'bottom': 0,
            'margin-top': 0
        });

        var $password = $('#password');
        $password.attr("style", "width: 100%!important; border: 1px solid #ced4da; border-radius: 5px; padding: 6px 12px; font-size: 16px; margin-bottom: 8px;");
        var $panel1 = $('form .panel');
        $panel1.attr("style", "background-color: #fff; box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; padding: 32px; width: 366px; margin: auto; display:block!important");
        var $content = $('form .content');
        $content.attr("style", "display: block!important");
        var $register = $('form .panel .inner .content .fields1');
        $register.append('<a href="/register"><div style="font-size: 20px; align-items: center; justify-content: center; display: flex; padding: 10px 24px; text-transform: uppercase;"><i class="fa fa-user" style="margin-right: 8px"></i>Registrar</div></a>');
        var $footer = $('.conteneur_minwidth_IE');
        $footer.append('<div style="text-align: center; font-size: 16px; color: #6c757d;"><p style="margin: 0 0 6px; font-size: 14px">Feito <i class="fas fa-code"></i> por <a href="https://ajuda.forumeiros.com/u64319">vcapelli</a> para <a href="https://forumeiros.com/">Forumeiros.com</a></p><div class="footer-link"><a href="/forum">Início</a><a href="/faq">FAQ</a><a href="/privacy">Política de Privacidade</a></div>');
        $footer.append('<img style="position: absolute; top: calc(20% - 44.50px - 44.50px); left: 50%; transform: translate(-50%, 0);" src="https://2img.net/r/frmste/images/sigle.png"/>');
        var $footercss = $('.footer-link a');
        $footercss.attr("style", "margin: 0 6px;");
        var $awesome = $('head');
        $awesome.append('<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">');
    });
})(jQuery);
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Uso de um fundo no login personalizado

Mensagem por PauloVinicios1755 31.05.21 18:35

ótimo obrigado desde já, uma coisa gostaria de colocar uma imagem na vdd uma logo, no lugar de: 
Conectar-se
pdser? agradeço desde já.
PauloVinicios1755
PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Uso de um fundo no login personalizado

Mensagem por tikky 31.05.21 21:58

PauloVinicios1755 escreveu:gostaria de colocar uma imagem na vdd uma logo, no lugar de: 
Conectar-se

Código:
        (function($) {
            'use strict';
            $(function() {
                if (_userdata.session_logged_in === 1) {
                    return;
                }
                if (!((/^\/login/i.test(location.pathname)))) {
                    return;
                }
       
       
                $('header').css({
                    'display': 'none'
                });
       
           
                $(".panel fieldset").attr("style", "margin: 0!important");
                $("dd:last-child").attr("style", "text-align: right");
                $(".content").attr("style", "display: none");
                $(".panel").attr("style", "background-color: inherit; box-shadow: none");
                $(".h3").attr("style", "border: 0; font-size: 32px; font-weight: 500; margin-bottom: 20px;");
                $("input[type='text']").attr("style", "width: 100%!important; border: 1px solid #ced4da; border-radius: 5px; padding: 6px 12px; font-size: 16px;");
                $(".button1").attr("style", "text-transform: uppercase; font-size: 20px; width: 100%!important; margin: 8px 0 0;");
                $("#wrap").attr("style", "background-color: #fff; margin-top: 64px;");
                $("dd").attr("style", "margin-left: 0!important; text-align: right;");
                $("label").attr("style", "margin-right: 0!important;");
                $("dl:nth-child(3)").attr("style", "padding: 0;");
                $(".conteneur_minwidth_IE").attr("style", "flex: inherit");
                $(".page-title").attr("style", "color: #444; border: 0; font-size: 32px; font-weight: 500; padding: 0");
                $(".inner p").attr("style", "width: 105%;");
                $("body").attr("style", "background-color: #fff; align-items: center; justify-content: center; display: flex;");
                $("#username").attr("placeholder", "Nome de usuário");
                $("#password").attr("placeholder", "Senha");
                $(".button1").attr("value", "Entrar");
                $(".h3").text("Iniciar sessão");
                $('.page-header').css('text-align', 'center');
                $('.page-header h2').replaceWith('<img src="https://2img.net/i.imgur.com/DxsSFEe.png" alt="Brasil Play Obscure" width="150">');
       
                $('#wrap').css({
                    'background-image': 'url(https://i.imgur.com/5WyZt2Q.png)',
                    'position': 'fixed',
                    'top': 0,
                    'left': 0,
                    'display': 'block',
                    'max-width': '100%',
                    'z-index': '999999',
                    'right': 0,
                    'min-width': '100%',
                    'overflow': 'hidden',
                    'bottom': 0,
                    'margin-top': 0
                });
       
                var $password = $('#password');
                $password.attr("style", "width: 100%!important; border: 1px solid #ced4da; border-radius: 5px; padding: 6px 12px; font-size: 16px; margin-bottom: 8px;");
                var $panel1 = $('form .panel');
                $panel1.attr("style", "background-color: #fff; box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; padding: 32px; width: 366px; margin: auto; display:block!important");
                var $content = $('form .content');
                $content.attr("style", "display: block!important");
                var $register = $('form .panel .inner .content .fields1');
                $register.append('<a href="/register"><div style="font-size: 20px; align-items: center; justify-content: center; display: flex; padding: 10px 24px; text-transform: uppercase;"><i class="fa fa-user" style="margin-right: 8px"></i>Registrar</div></a>');
                var $footer = $('.conteneur_minwidth_IE');
                $footer.append('<div style="text-align: center; font-size: 16px; color: #6c757d;"><p style="margin: 0 0 6px; font-size: 14px">Feito <i class="fas fa-code"></i> por <a href="https://ajuda.forumeiros.com/u64319">vcapelli</a> para <a href="https://forumeiros.com/">Forumeiros.com</a></p><div class="footer-link"><a href="/forum">Início</a><a href="/faq">FAQ</a><a href="/privacy">Política de Privacidade</a></div>');
                $footer.append('<img style="position: absolute; top: calc(20% - 44.50px - 44.50px); left: 50%; transform: translate(-50%, 0);" src="https://2img.net/r/frmste/images/sigle.png"/>');
                var $footercss = $('.footer-link a');
                $footercss.attr("style", "margin: 0 6px;");
                var $awesome = $('head');
                $awesome.append('<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">');
            });
        })(jQuery);
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Uso de um fundo no login personalizado

Mensagem por PauloVinicios1755 01.06.21 3:28

te amo ped fucionou <3 pode fechar o tópico
PauloVinicios1755
PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Uso de um fundo no login personalizado

Mensagem por tikky 01.06.21 8:11

Tópico resolvido


Movido para "Questões resolvidas".
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos