Adicionar logotipo ao formulário personalizado

3 participantes

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

Tópico resolvido Adicionar logotipo ao formulário personalizado

Mensagem por luquinhasda10 02.08.23 5:46

Detalhes da questão


Endereço do fórum: http://policiatte.forumeiros.com
Versão do fórum: ModernBB

Descrição


Detalhes da questão


Endereço do fórum: http://policiatte.forumeiros.com
Versão do fórum: ModernBB

Descrição


Criei um formulário gostaria que tivesse esse emblema como cabeçalho do formulário: https://i.imgur.com/CdQMzIC.png


E gostaria que quando postasse a resposta fosse para o tópico de número 1.
Estou com dificuldades para isso.


Formulário:
luquinhasda10

luquinhasda10
***

Membro desde : 04/07/2020
Mensagens : 167
Pontos : 236

https://ajuda.forumeiros.com/register?step=2&agreement=1&

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar logotipo ao formulário personalizado

Mensagem por Musashi 02.08.23 12:54

Bom dia, @luquinhasda10,

Troque o seu HTML fornecido acima por esse seguinte HTML:

Código:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon"  type="image/x-icon" href="https://i.imgur.com/CdQMzIC.png">
    <title>Modelo I: Entrada de Membros</title>
    <style>
        body{
            font-family: Arial, Helvetica, sans-serif;
            background-image: radial-gradient(circle, #4b0303, #4b0303, #4b0303, #4b0303, #4b0303);;
        }
        .box{
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: black;
            padding: 15px;
            border-radius: 15px;
            width: 20%;
        }
        fieldset{
            border: 3px solid #a30006;
        }
        legend{
            border: 1px solid #a30006;
            padding: 10px;
            text-align: center;
            background-color: #a30006;
            border-radius: 8px;
        }
        .inputBox{
            position: relative;
        }
        .inputUser{
            background: none;
            border: none;
            border-bottom: 1px solid white;
            outline: none;
            color: white;
            font-size: 15px;
            width: 100%;
            letter-spacing: 2px;
        }
        .labelInput{
            position: absolute;
            top: 0px;
            left: 0px;
            pointer-events: none;
            transition: .5s;
        }
        .inputUser:focus ~ .labelInput,
        .inputUser:valid ~ .labelInput{
            top: -20px;
            font-size: 12px;
            color: dodgerblue;
        }
        #data_nascimento{
            border: none;
            padding: 8px;
            border-radius: 10px;
            outline: none;
            font-size: 15px;
        }
        #submit{
            background-image: linear-gradient(to right,rgb(81 15 15), rgb(80 16 16));
            width: 100%;
            border: none;
            padding: 15px;
            color: black;
            font-size: 15px;
            cursor: pointer;
            border-radius: 10px;
        }
        #submit:hover{
            background-image: linear-gradient(to right,rgb(47 1 16), rgb(81 15 15))
        }
    </style>
</head>
<body>
    <div class="box">
        <form id="form-content">
            <fieldset>
                <legend><b>Entrada de Membros</b></legend>
                <br>
                <div class="inputBox">
                    <input type="text" name="nome" id="nome" class="inputUser" required>
                    <label for="nome" class="labelInput"><b>Nick do integrante</b></label>
                </div>
                <br><br>             
                <label for="data_nascimento"><b>Registro:</b></label>
                <input type="date" name="data_nascimento" id="data_nascimento" required>
                <br><br>
                <input type="submit" name="submit" id="submit">
            </fieldset>
        </form>
    </div>

   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
  (function ($) {
    "use strict";

    $(function () {
      $("#form-content").on("submit", function (event) {
        var data = {
          data_nascimento: $("#data_nascimento").val(),
          nome: $("#nome")
        };

        event.preventDefault();
        setTimeout(function () {
          $.post("/post", {
            t: Number,
            message: [
          `[b]TÍTULO[/b]
             
           [b]nome:[/b] ${data.nome}
           [b]Registro:[/b] ${data.data_nascimento}`,
            ].join("\n"),
            mode: "reply",
            tid: $('[name="tid"]:first').val(),
            post: 1,
            attach_sig: "on",
          })
            .done(function () {
              alert("Postagem realizada com sucesso! Aguarde o redirecionamento para o tópico...");
              location.href = "/tNumber-" + location.host + "/tNumber-?view=newest";
            })
            .fail(function () {
              alert("Ocorreu um erro! Tente novamente, se o problema persistir, entre em contato com um administrador do fórum.");
            });
        }, 600);
      });
    });
  })(jQuery);
</script>
</body>
</html>

Lembrando: Quando você for pesquisar a seguinte palavra em seu código: Number.
Será onde você deverá está adicionado o número do tópico que o mesmo deseja que seja encaminhado a respostas, juntamente com o direcionamento do usuário para o tópico que enviou a resposta:


Onde tem os números marcados, será o número que você estará colocando no local dos parâmetros que houver o código mencionado anteriormente.

Caso não tenha funcionado, responda esse tópico que estaremos tentando resolver em um outro tipo de método!

(Aguardo respostas).
Atenciosamente,
Musashi! Muito feliz
Musashi

Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar logotipo ao formulário personalizado

Mensagem por luquinhasda10 04.08.23 15:24

olá! bom dia.
havia especificado tb: "Criei um formulário gostaria que tivesse esse emblema como cabeçalho do formulário: https://i.imgur.com/CdQMzIC.png" Muito feliz
luquinhasda10

luquinhasda10
***

Membro desde : 04/07/2020
Mensagens : 167
Pontos : 236

https://ajuda.forumeiros.com/register?step=2&agreement=1&

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar logotipo ao formulário personalizado

Mensagem por Musashi 04.08.23 15:36

Bom dia, @luquinhasda10,

Peço perdão por não ter adicionado esse pedido. Ops...
Pode me mostrar onde exatamente o mesmo deseja que tenha essa imagem?! Louco:

(Aguardo respostas).
Atenciosamente,
Musashi! Muito feliz
Musashi

Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar logotipo ao formulário personalizado

Mensagem por luquinhasda10 04.08.23 15:49

luquinhasda10

luquinhasda10
***

Membro desde : 04/07/2020
Mensagens : 167
Pontos : 236

https://ajuda.forumeiros.com/register?step=2&agreement=1&

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar logotipo ao formulário personalizado

Mensagem por Musashi 04.08.23 16:51

Certo então @luquinhasda10,

Altere o seu código para esse seguinte modelo:

Código:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon"  type="image/x-icon" href="https://i.imgur.com/CdQMzIC.png">
    <title>Modelo I: Entrada de Membros</title>
    <style>
        body{
            font-family: Arial, Helvetica, sans-serif;
            background-image: radial-gradient(circle, #4b0303, #4b0303, #4b0303, #4b0303, #4b0303);;
        }
        .box{
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: black;
            padding: 15px;
            border-radius: 15px;
            width: 20%;
        }
        fieldset{
            border: 3px solid #a30006;
        }
        legend{
            border: 1px solid #a30006;
            padding: 10px;
            text-align: center;
            background-color: #a30006;
            border-radius: 8px;
        }
        .inputBox{
            position: relative;
        }
        .inputUser{
            background: none;
            border: none;
            border-bottom: 1px solid white;
            outline: none;
            color: white;
            font-size: 15px;
            width: 100%;
            letter-spacing: 2px;
        }
        .labelInput{
            position: absolute;
            top: 0px;
            left: 0px;
            pointer-events: none;
            transition: .5s;
        }
        .inputUser:focus ~ .labelInput,
        .inputUser:valid ~ .labelInput{
            top: -20px;
            font-size: 12px;
            color: dodgerblue;
        }
        #data_nascimento{
            border: none;
            padding: 8px;
            border-radius: 10px;
            outline: none;
            font-size: 15px;
        }
        #submit{
            background-image: linear-gradient(to right,rgb(81 15 15), rgb(80 16 16));
            width: 100%;
            border: none;
            padding: 15px;
            color: black;
            font-size: 15px;
            cursor: pointer;
            border-radius: 10px;
        }
        #submit:hover{
            background-image: linear-gradient(to right,rgb(47 1 16), rgb(81 15 15))
        }
      .logo {
       margin: auto;
     position: relative;
     justify-content: center;
     display: flex;
    transform: translateY(23rem);
}
    </style>
</head>
<body>
  <div class="logo">
    <img src="https://i.imgur.com/CdQMzIC.png"/>
  </div>
    <div class="box">
        <form id="form-content">
            <fieldset>
                <legend><b>Entrada de Membros</b></legend>
                <br>
                <div class="inputBox">
                    <input type="text" name="nome" id="nome" class="inputUser" required>
                    <label for="nome" class="labelInput"><b>Nick do integrante</b></label>
                </div>
                <br><br>           
                <label for="data_nascimento"><b>Registro:</b></label>
                <input type="date" name="data_nascimento" id="data_nascimento" required>
                <br><br>
                <input type="submit" name="submit" id="submit">
            </fieldset>
        </form>
    </div>
 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
  (function ($) {
    "use strict";
 
    $(function () {
      $("#form-content").on("submit", function (event) {
        var data = {
          data_nascimento: $("#data_nascimento").val(),
          nome: $("#nome")
        };
 
        event.preventDefault();
        setTimeout(function () {
          $.post("/post", {
            t: Number,
            message: [
          `[b]TÍTULO[/b]
           
          [b]nome:[/b] ${data.nome}
          [b]Registro:[/b] ${data.data_nascimento}`,
            ].join("\n"),
            mode: "reply",
            tid: $('[name="tid"]:first').val(),
            post: 1,
            attach_sig: "on",
          })
            .done(function () {
              alert("Postagem realizada com sucesso! Aguarde o redirecionamento para o tópico...");
              location.href = "/tNumber-" + location.host + "/tNumber-?view=newest";
            })
            .fail(function () {
              alert("Ocorreu um erro! Tente novamente, se o problema persistir, entre em contato com um administrador do fórum.");
            });
        }, 600);
      });
    });
  })(jQuery);
</script>
</body>
</html>

Caso não tenha ficado como havia solicitado, retorne uma mensagem para esse tópico.

(Aguardo uma resposta).
Atenciosamente,
Musashi! Muito feliz
Musashi

Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Adicionar logotipo ao formulário personalizado

Mensagem por Sleep 10.08.23 14:49

Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.
Sleep

Sleep
Ajudeiro
Ajudeiro

Membro desde : 10/08/2012
Mensagens : 1117
Pontos : 1352

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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