InícioConfusão no CSS
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Confusão no CSS
por JR_Junior 08.10.17 13:23
Detalhes da questão
Endereço do fórum: http://darkstreetrpg.forumeiros.com
Versão do fórum: phpBB3
Descrição
Olá!
Estou enfrentando um pequeno(?) problema com a folha de estilo do meu tema.
Vou explicar em detalhes para ser entendido.
Eu criei uma página personalizada com um formulário de postagem, o qual montei com o Gerador de Formulário e ele está funcionando perfeitamente, porém, ele possui uma configuração que afeta a estrutura do mesmo e a do fórum.
Página do formulário: http://darkstreetrpg.forumeiros.com/h1-revisao-de-banimento
A classe do CSS, da página do formulário, que contém uma pequena configuração que garante que o formulário fique bem ajustado é:
- Código:
*,
*::before,
*::after {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
A pequena configuração é: box-sizing: border-box; pertencente a *::after.
O problema está no fato que se eu usar essa configuração o formulário fica perfeito, mas ela acaba afetando a parte direita do cabeçalho do fórum, deixando a logo fora da posição.
Usando a configuração: http://prntscr.com/guqn7s
Sem essa configuração, a estrutura do formulário fica comprometida e eu já tentei de tudo, alterei outras classes e não consegui consertar.
Sem a configuração: http://prntscr.com/guqnzj
Eu agradeceria muito se alguém me desse uma solução para isso!
CSS da página do formulário:
- Código:
<!DOCTYPE html>
<html>
<!-- ->
/*
* Gerado em <ajuda.forumeiros.com>.
* Gerador (2.0) feito por Luiz (http://ajuda.forumeiros.com/u60563)
*/
<- -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Revisão de Banimento</title>
<style type="text/css">
*,
*::before,
*::after {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
/*html,
body {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
line-height: 1.5;
color: #24292e;
background-color: #fff;
}*/
#fa-generated-form {
width: 60%;
margin: 0 auto;
background-color: #fff;
border: solid 1px #ddd;
border-radius: 0 0 3px 3px;
}
.fa-form-wrapper {
width: 100%;
}
.fa-form-group {
display: block;
width: 100%;
padding: 0px 20px;
}
.fa-form-group *:last-child {
margin-bottom: 7px;
}
.fa-form-group h4 {
font-size: 23px;
/*color: #3072ab;*/
color: #666666
}
.fa-form-group p {
font-size: 16.4px;
/*border-left: solid 3px #ddd;*/
margin-left: -20px;
padding-left: 17px;
padding-top: 2px;
padding-bottom: 2px;
}
#fa-generated-form h1 {
font-size: 30px;
display: block;
text-align: center;
margin: 15px 0px;
color: #ffffff;
text-transform: uppercase;
/*background-color: #3072ab;*/
background-color: #666666;
margin-top: 0px;
font-weight: normal;
}
.fa-form-group label {
display: block;
font-size: 16px;
margin-bottom: 5px;
}
.fa-form-group input,
.fa-form-group textarea,
.fa-form-group select {
display: block;
resize: none;
width: 100%;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
color: #464a4c;
background-color: #fff;
background-image: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
.fa-form-group input:focus,
.fa-form-group textarea:focus,
.fa-form-group select:focus {
color: #464a4c;
background-color: #fff;
border-color: #5cb3fd;
outline: 0;
}
.fa-form-group select[multiple] {
padding-right: 0px;
}
.fa-submit {
display: block;
width: 100%;
padding: 20px;
text-align: center;
}
.fa-submit button {
padding: 10px 20px;
background-color: #3072ab;
color: #fff;
font-size: 14px;
border: none;
border-radius: 3px;
}
.fa-submit button:hover {
background-color: #2a6192;
}
[class*="conteneur"] form#fa-generated-form {
border-top: solid 1px #ddd;
margin-top: 20px;
border-radius: 3px!important;
}
@media (max-width: 700px) {
#fa-generated-form {
width: 100%;
border: none;
}
}
</style>
</head>
<body>
<form id="fa-generated-form">
<div class="fa-form-wrapper">
<h1>Revisão de Banimento</h1>
<!-- BEGIN Generated HTML Code -->
<div class="fa-form-group clearfix">
<h4 class="form-subtitle data-text"><center>FORMULÁRIO DE POSTAGEM</center></h4>
</div>
<div class="fa-form-group clearfix" style="-webkit-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -moz-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -ms-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -o-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); box-shadow: inset 0 0 30px -9px rgb(0, 0, 0);">
<p class="form-paragraph data-text"><center><b><span style="color: #cc0000; font-size: small;">Preencha os campos adequadamente, do contrário,</span><br />
<span style="color: #cc0000; font-size: small;">seu pedido será rejeitado e você poderá ser punido(a)!</span></b></center></p>
</div><div class="fa-form-group clearfix">
<br>
<label for="campo2"><b>Administrador que Baniu:</b></label>
<input data-type="text" id="campo2" placeholder="" required="" type="text">
</div>
<div class="fa-form-group clearfix">
<label for="campo6"><b>Motivo do Banimento:</b></label>
<select data-type="select" id="campo6" required="">
<!-- First -->
<option value="Cheats / Hacks / Mods">Cheats / Hacks / Mods</option>
<option value="Divulgação">Divulgação</option>
<option value="3/3 Avisos">3/3 Avisos</option>
<option value="Ofensa">Ofensa</option>
<option value="Anti-RPG">Anti-RPG</option>
<option value="Desconhecido">Desconhecido</option>
</select>
</div><div class="fa-form-group clearfix">
<label for="campo4"><b>Seu nome no servidor:</b></label>
<input data-type="text" id="campo4" placeholder="" required="" type="text">
</div>
<div class="fa-form-group clearfix">
<label for="campo5"><b>Relate o ocorrido e justifique-se:</b></label>
<textarea data-type="textarea" id="campo5" placeholder="" required=""></textarea>
</div>
<div class="fa-form-group clearfix">
<label for="campo7"><b>Vídeos ou Screenshots do ocorrido</b>:</label>
<textarea data-type="textarea" id="campo7" placeholder=""></textarea>
</div>
<!-- END Generated HTML Code -->
</div>
<div class="fa-submit">
<button class="post-button" type="submit">Enviar Formulário</button>
</div>
</form>
<!-- Javascript's -->
<!-- Não é recomendada a edição abaixo desta linha. -->
<textarea style="display: none;" id="fa-generated-message">[b]Administrador que Baniu[/b]
{{campo2}}
[b]Motivo do Banimento[/b]
{{campo6}}
[b]Conta Banida[/b]
{{campo4}}
[b]Vídeos ou Screenshots[/b]
{{campo7}}
[b]Relatório do ocorrido e justificação(a)[/b]
{{campo5}}</textarea>
<input type="hidden" id="fa-generated-title" value="Revisão de Ban - {{campo4}} | Motivo: {{campo6}}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(window).on('load', function () {
$('#fa-generated-form').on('submit', function (event) {
event.preventDefault();
$(this).find('button[type="submit"]').text('Postando...');
setTimeout(function () {
$.post('/post', {
subject: $('#fa-generated-title').val().trim(),
f: 4,
message: $('#fa-generated-message').val().trim(),
mode: 'newtopic',
tid: $('[name="tid"]:first').val(),
post: 1,
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
location.pathname = '/f4-';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
CSS do meu tema:
- Código:
/** Avatar com largura massima ***/
.post .postprofile dl dt a[href*="/u"] img[src][alt] {max-width: 195px ;border-radius: 10px !important;}
/* TOOLTIP */
.tipsy {
padding: 5px;
font-size: 11px;
position: absolute;
text-shadow: none;
z-index: 999;
}
.tipsy-inner {
padding: 8px 8px 8px 8px;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
background: black url(http://cuul.tk/img/gradient.png) repeat-x 0 -150px;
}
.tipsy-inner {
border-radius: 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.tipsy-arrow {
position: absolute;
background: url('http://cuul.tk/img/tipsy.gif') no-repeat top left;
width: 9px;
height: 5px;
}
.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -4px;
}
.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
}
.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
}
.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -4px;
background-position: bottom left;
}
.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
background-position: bottom left;
}
.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
background-position: bottom left;
}
.tipsy-e .tipsy-arrow {
top: 50%;
margin-top: -4px;
right: 0;
width: 5px;
height: 9px;
background-position: top right;
}
.tipsy-w .tipsy-arrow {
top: 50%;
margin-top: -4px;
left: 0;
width: 5px;
height: 9px;
}
/* efeito sombra sobre os links */
a:hover {
color: PaleVioletRed;
text-decoration: none;
text-shadow: 0 0 5px;
}
/* Caixa de Login */
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
top: 0px;
}
/*** Imagem na caixa de colocar login ***/
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
/*** Imagem na caixa de colocar senha ***/
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
/*BUSCAR*/
.overview {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-bottom-color: #000000;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #000000;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 2px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #000000;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 2px;
border-top-color: #000000;
border-top-left-radius: 1px;
border-top-right-radius: 25px;
border-top-style: solid;
border-top-width: 2px;
z-index: 999;
}
.title-overview {
border-top-right-radius: 25px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
text-align: center;
}
/* DISPONIBILIDADE NOME DE USUARIO */
#username_reg {
border:2px solid red!important;
}
#username_reg.okusername {
border:2px solid green!important;
}
/* USUARIO */
#wrap {
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 0 1px #FFFFFF;
/*margin-top: -1.4% !important;*/
width: 900px;
}
#site-title, #site-title h1, #logo-desc p {
display: none;
}
ul.forums {
background: transparent;
}
.row2, .row1, .row3, .panel {
border-radius: 4px;
background: #F1F1F1;
border: 1px solid #D7D7D7;
}
form#quick_reply #textarea_content textarea#text_editor_textarea {
border-radius: 4px;
}
a.button1:hover, a.button2:hover, button.button2:hover, input.button1:hover, input.button2:hover {
background-position: 0 100%;
border: 1px solid #127FA7;
color: #127FA7;
}
.module {
border: 1px solid #d7d7d7;
background: #dfe9f0;
border-radius: 3px;
}
a.button1, a.button2, button.button2, input.button1, input.button2 {
background: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px;
border: 1px solid #D0D2D4;}
/*** Imagem antes dos links da estaticas ***/
#page-body p.page-bottom {background: url(http://i.imgur.com/IuSgz.png) no-repeat left top; padding-left:18px;}
hr{border-top:1px solid #2991e6;}
/*** Imagem de um + verde antes dos botões ***/
a[href="/http://www.forumgratuit.ro/ro/directory/informatica-internet-5.htm"]{display:none}
a[href="http://www.forumgratuit.ro/ro/informatica-internet/ajutor-online-119.htm"]{ display:none}
a[href="/search?search_id=newposts"] {background: url(http://i.imgur.com/d9rqT.png) no-repeat left; padding-left: 15px; background-size: 13px 13px;}
a[href="/search?search_id=egosearch"] {background: url(http://i.imgur.com/d9rqT.png) no-repeat left; padding-left: 15px; background-size: 13px 13px;}
a[href="/search?search_id=unanswered"] {background: url(http://i.imgur.com/d9rqT.png) no-repeat left; padding-left: 15px; background-size: 13px 13px;}
a[href="/?mark=forums"] {background: url(http://i.imgur.com/d9rqT.png) no-repeat left; padding-left: 15px; background-size: 13px 13px;}
a[href="/search?search_id=activetopics"] {background: url(http://i.imgur.com/d9rqT.png) no-repeat left; padding-left: 15px; background-size: 13px 13px;}
a[href="/memberlist?mode=today_posters"] {background: url(http://i.imgur.com/d9rqT.png) no-repeat left; padding-left: 15px; background-size: 13px 13px;}
a[href="/memberlist?mode=overall_posters"] {background: url(http://i.imgur.com/d9rqT.png) no-repeat left; padding-left: 15px; background-size: 13px 13px;}
a[href="/?mode=delete_cookies"] {background: url(http://i.imgur.com/d9rqT.png) no-repeat left; padding-left: 15px; background-size: 13px 13px;}
/*** Quem está online com imagem ***/
#i_whosonline + p {background: -webkit-linear-gradient(#f2f2f2,#ffffff);-oz-border-radius:6px;-moz-box-shadow:2px 2px 2px #a8a180;-webkit-border-radius:6px;-webkit-box-shadow:2px 2px 2px #a8a180;background:-moz-linear-gradient(#f2f2f2,#ffffff);background-color:#fff;background-image:-webkit-linear-gradient(#f2f2f2,#ffffff);border: 1px solid rgb(222, 222, 222)border-radius:2px;box-shadow:2px 2px 2px #a8a180;font-size:11px;margin:0;padding:10px;width:90%;background: url(http://i.imgur.com/Zxcce.png) no-repeat left center ;padding-left: 50px;}
/*** Estaticas ***/
.h3 {border-bottom: 1px dashed #419ef0;}
/*** Imagem antes da logo ***/
.headerbar {
background: url("http://2img.net/i/fa/pbucket.gif") repeat scroll 0 0 black;
/*border-top-left-radius: 4px;
border-top-right-radius: 4px;*/
/*margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
/* Definições da Logo */
.headerbar img{
width: auto;
height: auto;
}
#logo {
padding: 0px 0px 0px 0px;
}
.headerbar span{
display: none;
}
/*** Imagem igual ao do rodapé só que em cima ***/
#page-header .navbar {
background: url(http://i39.servimg.com/u/f39/17/79/36/63/menu1010.png) no-repeat center;
margin-left: -85px;
margin-right: -85px;
height: 61px!important;
}
ul.linklist {
border-bottom: none;
}
#search-box {
display: none;
}
#page-header .navbar a {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
position: relative;
text-align: center;
text-shadow: 0 0.1em 0 #818181;
padding: 10px;
text-transform: uppercase;
top: 5px;
}
#page-header .navbar a:hover {
background-color: transparent;
background-image: url("http://i39.servimg.com/u/f39/17/79/36/63/hoverm10.png");!important
background-repeat: repeat-x;
padding: 14px;
background-color: none;
border: none;
border-radius: 0;
text-shadow: 0 0 1px #818181;
}
/*** Categorias e fóruns visualização ***/
.forabg, .forumbg {
background: url("http://i39.servimg.com/u/f39/17/79/36/63/i_list10.png") repeat-x scroll 0 -2px #ECF3F7;
border-bottom: 1px solid #D7D7D7;
border-left: 1px solid #D7D7D7;
border-radius: 5px 5px 2px 2px;
border-right: 1px solid #D7D7D7;
}
/*** Imagem de uma casinha antes do inicio ***/
.icon-home {
margin-left: -5px;
background: url(http://i.imgur.com/x9bDI.png) no-repeat;
background-position: left;
padding-left: 16px;
position: relative;
left: 100px;
}
a.icon-home {
color: transparent;
font-size: 17px;
}
ul#picture_legend {
display: none;
}
li.row {
background: initial;
position: relative;
top: 5px;
border: none;
}
li.row:hover {
background: #fdffcf;
}
/*** Créditos ***/
#page-footer:after {
/*content:"Tema criado por Mazeko. Administrador BR-Design - Tema modificado por fojogo. Administrador PokeChaos";*/
text-align: center;
}
li.row dd {
border: none;
}
/*** Imagem do painel de controle em cima ***/
#page-footer .copyright strong a{
position: fixed;
top: 10px;
left: 20px;
background-image:url('http://cdn1.iconfinder.com/data/icons/discovery/32x32/status/important.png');
width: 65px;
height: 32px;
background-repeat:no-repeat;
background-position:left top;
padding: 1px 4px;
color: transparent;
padding: 3px;
font-size: 1px;
}
/*** Imagem do rodapé ***/
#page-footer .navbar {
background: url(http://i39.servimg.com/u/f39/17/79/36/63/menu1010.png) no-repeat center;
margin-left: -85px;
margin-right: -85px;
height: 61px!important;
position: relative;
top: 35px;
}
#page-footer .navbar a{
position: relative;
right: 85px;
top: 5px;
color: #D7D7D7;
display: none;
}
/*** Titulo do tópico e de quem posto ***/
.postprofile {
background-color: #E5F1F9;
background-position: center bottom;
background-repeat: repeat-x;
border: 1px solid #F2F2F2;
border-radius: 20px 20px 20px 20px;
box-shadow: 0 0 8px #FAFAFA;
color: #000000;
display: inline;
float: left;
margin: 5px 0 0;
min-height: 80px;
padding-bottom: 20px;
padding-right: 10px;
padding-top: 20px;
position: relative;
width: 19%;
border-color: #000000;
border-style: double;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
color: transparent;
display: none;
}
/*** Assinatura ***/
.signature_div {margin-top: 150px;}
body {
background-attachment: scroll;
background-color: #222222;
background-image: url("http://gfxforums.net/styles/fracture/xenforo/background.png");
background-repeat: repeat-x;
color: #536482;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
height: auto;
padding: 10px 0;
}
a:link {
-moz-transition: all 0.2s ease-in 0s;
color: #127FA7;
text-decoration: none;
}
/* USUARIO */
.postprofile {
background-color: #FBFBFB;
border: 1px solid #D7D7D7;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
color: #536482;
display: inline;
float: left;
margin: 1.3em 0 0 -11px;
min-height: 80px;
padding: 10px 7px 0;
position: relative;
width: 22%
text-align: center;
}
.postprofile dd, .postprofile dt {
color: #666666;
display: block;
font-size: 0.9em;
line-height: 1.2em;
margin-left: 8px;
}
.postbody {
clear: both;
color: #536482;
float: right;
line-height: 1.48em;
padding: 0;
width: 76.6%;
}
.row2, .row1, .row3, .panel {
background: none repeat scroll 0 0 #F1F1F1;
border: 1px solid #D7D7D7;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 2px 0 0 #D7D7D7;
margin-bottom: 14px;
}
/* AUTOR DO TÓPICO */
p.author {
background: none repeat scroll 0 0 #FBFBFB;
border: 1px solid #e1e3e5;
border-radius: 0 5px 5px 0;
color: #232323;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 1em;
line-height: 1.2em;
margin: 7px 60% 0.6em -9px;
padding: 0 0 5px;
position: relative;
width: 300px;
}
/* MEMBROS E GRUPOS */
.forumbg table.table1 {
background-color: transparent;
margin: 5px -2px -1px -1px;
}
#tabs a:hover span {
-moz-transition-delay: 0s;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in;
background: none repeat scroll 0 0 #D7D7D7;
border-radius: 10px 10px 0 0;
color: MidnightBlue;
text-shadow: 1px 1px 1px white;
}
/* TOPICOS - TITULO */
.table-title, .table-title h2 {
color: #FBFBFB;
display: inline;
font-size: 1em;
text-shadow: 1px 0 1px #353535;
}
li.header dd, li.header dt {
border-left-width: 0;
color: #FBFBFB;
font-family: Arial,Helvetica,sans-serif,Verdana,Arial,Helvetica,sans-serif;
font-size: 1em;
line-height: 1em;
margin: 2px 0 4px;
padding-bottom: 2px;
padding-top: 2px;
text-shadow: 1px 1px 1px #353535;
text-transform: uppercase;
}
li.row:hover {
background: none repeat scroll 0 0 #ECECEC;
}
/* PAGINACAO */
.pagination span a, .pagination span a:active, .pagination span a:link, .pagination span a:visited {
background-color: #FFFFFF;
border: 1px solid #B4BAC0;
border-radius: 3px 3px 3px 3px;
color: #5C758C;
font-size: 1.5em;
font-weight: 400;
line-height: 1.5em;
margin: 0 2px;
padding: 0 2px;
text-decoration: none;
}
.pagination span strong {
background-color: #627DA3;
border: 1px solid #627DA3;
border-radius: 3px 3px 3px 3px;
color: #FBFBFB;
font-size: 1.5em;
margin: 0 2px;
padding: 0 2px;
}
table.forumline {
background-color: purple;
background-image: url("http://i39.servimg.com/u/f39/17/79/36/63/i_list10.png");
background-position: 0 0;
background-repeat: repeat-x;
border: 1px solid #FBFBFB;
border-radius: 0 5px 5px 5px;
color: white;
font-size: 1.2em;
padding: 6px;
}
/* USUARIO JA EXISTE */
#username_reg {
border:2px solid red!important;
}
#username_reg.okusername {
border:2px solid green!important;
}
/* COISA NOVA NA CAIXA DE MENSAGEM */
#savec { position:relative; }
.save-bloc { dispay: none; color: #555!important; cursor: point; z-index: 999; padding: 5px; border: 1px solid #BCBCBC; background: #efefef url(http://2img.net/i/fa/prosilver/bg_button.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }
.save-bloc div:hover { color: #050505!important; }
.save-bloc div { cursor: pointer; }.save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }
/* CAIXA DE LOGIN */
.quick_connex{
box-shadow:0 0 10px!important;
padding:5px;
position:absolute;
right:200px;
top:185px;
width:160px
}
.quick_connex .connec_close{
bottom:3px;
float:right;
left:5px;
position:relative
}
/* CHAT BOX */
#chatbox_header{background-image: url(http://i46.servimg.com/u/f46/12/26/44/81/chat10.png);}
/* Chatbox-------------------------------------------------*/
body.chatbox {background-image: none;}
.chatbox {background-color: #FAFAFA;}
.chatbox .forabg {margin: 0;border: none;padding: 0;margin: 0;background-image: url
(http://i46.servimg.com/u/f46/12/26/44/81/chat10.png);}
.chatbox-title,.chatbox-title a.chat-title {color: #FAFAFA !important; }
.chatbox-title {float: left;margin: 0;padding: 2px 5px 0 5px;width: 15em;}
.chatbox-options {float: right;list-style: none;font-size: 11px;margin: 0.7em 0.5em 0.5em 0.5em;}
.chatbox-options li {display:inline;}
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {color: #FAFAFA; font-weight: bold;}
#chatbox_members {position: absolute;top: 30px;bottom: 30px;width: 180px;overflow: auto;border-right: 1px solid ;}
#chatbox_members .member-title {text-align: center;padding: 0.5em 0.25em;background-image: none;font-size:
12px;background-color: #C2C2DA;color : #417394;font-family: "Segoe UI", Tahoma, Geneva, sans-serif;}
#chatbox_members ul {list-style: none;margin: 0 0 0 1em;}
#chatbox_members ul li {margin: 0.5em 0.5em 0.5em 0;}
#chatbox {position: absolute;top: 30px;left: 181px;right: 0;bottom: 30px;overflow: auto;line-height: 10px;}
.chatbox_row_3 {padding: 4px;background-color: #0075c6;}
.chatbox_row_2 { background-color: transparent!important; }
.memberlist_row_1 {background-color: #ffffff;}
#chatbox_footer {position: absolute;bottom: 0;left: 0;right: 0;padding: 5px;}
#chatbox_footer label {color: #FAFAFA; font-weight: bold;}
#chatbox_footer .fontbutton{
padding: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background-image: url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: 1px solid #c2d2df;}
#message,#submit_button{border-width: 1px;}
.fontbutton {padding: 1px;cursor: pointer;text-align: left;}
.fontbutton_normal {background: #E1E1E2;}
.fontbutton_selected {background: #BBC7CE;border: 1px solid #22229C;}
.fontbutton_clicked {background: #959595;border: 1px solid #22229C;}
.fontbutton_hover {background: #E1E1E2;border: 1px solid #22229C;}
#chatbox_contextmenu {border: 2px solid black;background-color: #384c56;}
#chatbox_contextmenu p {margin:0;padding: 1px 4px;font-family: verdana, arial, sans-serif;background: #ffffff;border-
bottom:1px solid #777;}
#chatbox_contextmenu p.hover {background: #ffffff;}
#chatbox_contextmenu p.close {background: #ddd;padding: 1px;font-size: 95%;color:#fff;background: url('');}
#chatbox_contextmenu p.close img {vertical-align: middle;padding-left: 20px;}
#chatbox_contextmenu a {color: #417394; text-decoration: none; font-size: 95%;}
#chatbox_contextmenu a:hover {color: ;}
.fontbutton {background:#E1E1E2 none repeat scroll 0%;border:medium none;color:#000000;float:left;margin-
right:10px;padding:1px;}
fieldset.polls {
background-image: url("http://cdn2.iconfinder.com/data/icons/webapp/PNG-32/Pie%20Chart.png");
background-repeat: no-repeat;
background-position: bottom right;
}
#chatbox .user {font-weight: bold;}
#chatbox {background-image: url(http://i44.servimg.com/u/f44/14/84/14/59/chat12.gif)}
/*Barra de Rolagem*/
::-webkit-scrollbar {
width: 10px;
height: 8px;
}
::-webkit-scrollbar-track-piece {
background: #FFF;
}
::-webkit-scrollbar-thumb:vertical {
height: 55px;
background: #D3D3D3;
border-radius: 2px;
border: none;
}
::-webkit-scrollbar-thumb:horizontal {
height: 55px;
background: #D3D3D3;
border-radius: 2px;
border: none;
left: 0px;
}
::-webkit-scrollbar {
width: 15px;
height: 5px; }
::-webkit-scrollbar-track-piece {
background: #fff; }
::-webkit-scrollbar-thumb:vertical {
height: 55px;
background: #333;
border-radius: 20px;
border: 3px groove;}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #000000;
}
/*** Centralizar nome do úsuario ***/
.postprofile {text-align: center;}
/*Cursor Personalizado*/
body {/*cursor: url('http://img97.imageshack.us/img97/9688/cur5582.png'), url('http://img97.imageshack.us/img97/9688/cur5582.png'), auto;*/}
a:hover {/*cursor: url('http://img835.imageshack.us/img835/224/cur558.png'), url('http://img835.imageshack.us/img835/224/cur558.png'), auto;*/}
/*** Aviso na caixa de mensagens privadas ***/
form[action="/privmsg"] h1.page-title:after {
background: none repeat scroll 0 0 #F0E8E0;
border: 1px solid #C00000;
color: #000000;
content: "Afim de melhor aproveitar o sistema de Mensagens Privadas, notificamos que não oferecemos suporte via Mensagem Privada.";
display: block;
font-size: 12px;
padding: 10px;
text-align: center;
}
/*** Maximizando imagens de descrição. ***/
.dterm img {max-width: 30px; max-height: 30px; margin: 5px;}
/*** QUOTE ***/
blockquote {text-shadow: 0px 1px 1px white;color: #5C5C5C;background: #F0F0F0 url(http://www.audentio.com/demo/mybb16/images/glowing/wraptable_bg.png) repeat-x;border: 1px solid #DEDEDE;padding: 10px; font-family: Times New Roman;}
/* efeitos no nome do usuário. */
a[href="/u1"] {background: url('http://i.imgur.com/vbe6NQE.gif');}
a[href="/u504"] {background: url('http://i.imgur.com/ZFoje.gif');}
/*Anti Owner ChatBox*/body.chatbox {display: block !important;}#chatbox p table,#chatbox table{border: medium none; top: 20% !important; right: 30% !important; width: 205px !important; height: 85px !important;position: fixed !important; background: url("http://i39.servimg.com/u/f39/17/71/75/73/27ytna10.png") repeat scroll 0% 0% / 50% 100% transparent;color: transparent;}#chatbox p .msg, #chatbox p .msg * {position: static !important;}
/*** Personalizando Atalhos de Navegação ***/
.pathname-box {
-moz-border-radius: 3px;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 3px;
background: #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px;
box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 3px;
margin-top: 10px;
}
.pathname-box {
color: #F3F3F3;
}
.pathname-box p {
color: #F7F2F2;
font-size: 1.11em;
line-height: 1.5;
margin: 0;
}
a.nav {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/second10.png) no-repeat 100% -1px;
color: #777!important;
font-size: 10px;
line-height: 30px;
padding: 11px 17px 11px 4px;
}
JR_Junior- *
- Membro desde : 10/05/2012
Mensagens : 46
Pontos : 74 -
Re: Confusão no CSS
por Ketholy 08.10.17 14:01
Olá JR_Junior,
Se bem entendi seu problema é quando você utiliza a parti citada abaixo que surgi deformação no seu tema?
Atenciosamente: Ketholy
Se bem entendi seu problema é quando você utiliza a parti citada abaixo que surgi deformação no seu tema?
- Código:
*,
*::before,
*::after {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
Atenciosamente: Ketholy
Ketholy- Super Membro
- Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577 -
JR_Junior- *
- Membro desde : 10/05/2012
Mensagens : 46
Pontos : 74 -
Re: Confusão no CSS
por Ketholy 08.10.17 14:13
JR_Junior escreveu:Isso!
*::after > box-sizing: border-box;
Esse código seria para centralizar seu formulário, correto?
Ketholy- Super Membro
- Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577 -
Re: Confusão no CSS
por JR_Junior 08.10.17 14:17
Ketholy123 escreveu:JR_Junior escreveu:Isso!
*::after > box-sizing: border-box;
Esse código seria para centralizar seu formulário, correto?
Olha, eu acredito que sim, na verdade ele por padrão fica no centro da página, mas essa configuração parece que deixa ele ajustado.
JR_Junior- *
- Membro desde : 10/05/2012
Mensagens : 46
Pontos : 74 -
Re: Confusão no CSS
por Ketholy 08.10.17 14:29
JR_Junior escreveu:Ketholy123 escreveu:JR_Junior escreveu:Isso!
*::after > box-sizing: border-box;
Esse código seria para centralizar seu formulário, correto?
Olha, eu acredito que sim, na verdade ele por padrão fica no centro da página, mas essa configuração parece que deixa ele ajustado.
Vamos tenta resolver isso sem meche no código.
Após usar o código que causa deformação aplique esse em seguida:
Painel de controle>Visualização>Imagens e cores>Cores>Folha de estilo CSS
- Código:
#pun-navlinks ul {
text-align: center;
}
Caso não funcione, tente pelo painel de controle.
Painel de controle>Visualização>Página inicial>Cabeçalho & Navegação>em Posição do menu : escolha [centralizar]
Ketholy- Super Membro
- Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577 -
Re: Confusão no CSS
por JR_Junior 08.10.17 14:42
Ketholy123 escreveu:
Vamos tenta resolver isso sem meche no código.
Após usar o código que causa deformação aplique esse em seguida:
Painel de controle>Visualização>Imagens e cores>Cores>Folha de estilo CSS
- Código:
#pun-navlinks ul {
text-align: center;
}
Deformou a logo mais ainda!
Caso não funcione, tente pelo painel de controle.
Painel de controle>Visualização>Página inicial>Cabeçalho & Navegação>em Posição do menu : escolha [centralizar]
Já está configurado desta forma!
JR_Junior- *
- Membro desde : 10/05/2012
Mensagens : 46
Pontos : 74 -
Re: Confusão no CSS
por Luiz 08.10.17 14:49
Olá, bom dia,
O código gerado foi este, correto?
Para isso, vá na configuração de sua página HTML, procure pela opção "Você deseja utilizar o início e o final da página do seu fórum" e marque "não".
o/
---
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.
O código gerado foi este, correto?
- Código:
<!DOCTYPE html>
<html>
<!-- ->
/*
* Gerado em <ajuda.forumeiros.com>.
* Gerador (2.0) feito por Luiz (http://ajuda.forumeiros.com/u60563)
*/
<- -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Revisão de Banimento</title>
<style type="text/css">
*,
*::before,
*::after {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
/*html,
body {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
line-height: 1.5;
color: #24292e;
background-color: #fff;
}*/
#fa-generated-form {
width: 60%;
margin: 0 auto;
background-color: #fff;
border: solid 1px #ddd;
border-radius: 0 0 3px 3px;
}
.fa-form-wrapper {
width: 100%;
}
.fa-form-group {
display: block;
width: 100%;
padding: 0px 20px;
}
.fa-form-group *:last-child {
margin-bottom: 7px;
}
.fa-form-group h4 {
font-size: 23px;
/*color: #3072ab;*/
color: #666666
}
.fa-form-group p {
font-size: 16.4px;
/*border-left: solid 3px #ddd;*/
margin-left: -20px;
padding-left: 17px;
padding-top: 2px;
padding-bottom: 2px;
}
#fa-generated-form h1 {
font-size: 30px;
display: block;
text-align: center;
margin: 15px 0px;
color: #ffffff;
text-transform: uppercase;
/*background-color: #3072ab;*/
background-color: #666666;
margin-top: 0px;
font-weight: normal;
}
.fa-form-group label {
display: block;
font-size: 16px;
margin-bottom: 5px;
}
.fa-form-group input,
.fa-form-group textarea,
.fa-form-group select {
display: block;
resize: none;
width: 100%;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
color: #464a4c;
background-color: #fff;
background-image: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
.fa-form-group input:focus,
.fa-form-group textarea:focus,
.fa-form-group select:focus {
color: #464a4c;
background-color: #fff;
border-color: #5cb3fd;
outline: 0;
}
.fa-form-group select[multiple] {
padding-right: 0px;
}
.fa-submit {
display: block;
width: 100%;
padding: 20px;
text-align: center;
}
.fa-submit button {
padding: 10px 20px;
background-color: #3072ab;
color: #fff;
font-size: 14px;
border: none;
border-radius: 3px;
}
.fa-submit button:hover {
background-color: #2a6192;
}
[class*="conteneur"] form#fa-generated-form {
border-top: solid 1px #ddd;
margin-top: 20px;
border-radius: 3px!important;
}
@media (max-width: 700px) {
#fa-generated-form {
width: 100%;
border: none;
}
}
</style>
</head>
<body>
<form id="fa-generated-form">
<div class="fa-form-wrapper">
<h1>Revisão de Banimento</h1>
<!-- BEGIN Generated HTML Code -->
<div class="fa-form-group clearfix">
<h4 class="form-subtitle data-text"><center>FORMULÁRIO DE POSTAGEM</center></h4>
</div>
<div class="fa-form-group clearfix" style="-webkit-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -moz-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -ms-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -o-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); box-shadow: inset 0 0 30px -9px rgb(0, 0, 0);">
<p class="form-paragraph data-text"><center><b><span style="color: #cc0000; font-size: small;">Preencha os campos adequadamente, do contrário,</span><br />
<span style="color: #cc0000; font-size: small;">seu pedido será rejeitado e você poderá ser punido(a)!</span></b></center></p>
</div><div class="fa-form-group clearfix">
<br>
<label for="campo2"><b>Administrador que Baniu:</b></label>
<input data-type="text" id="campo2" placeholder="" required="" type="text">
</div>
<div class="fa-form-group clearfix">
<label for="campo6"><b>Motivo do Banimento:</b></label>
<select data-type="select" id="campo6" required="">
<!-- First -->
<option value="Cheats / Hacks / Mods">Cheats / Hacks / Mods</option>
<option value="Divulgação">Divulgação</option>
<option value="3/3 Avisos">3/3 Avisos</option>
<option value="Ofensa">Ofensa</option>
<option value="Anti-RPG">Anti-RPG</option>
<option value="Desconhecido">Desconhecido</option>
</select>
</div><div class="fa-form-group clearfix">
<label for="campo4"><b>Seu nome no servidor:</b></label>
<input data-type="text" id="campo4" placeholder="" required="" type="text">
</div>
<div class="fa-form-group clearfix">
<label for="campo5"><b>Relate o ocorrido e justifique-se:</b></label>
<textarea data-type="textarea" id="campo5" placeholder="" required=""></textarea>
</div>
<div class="fa-form-group clearfix">
<label for="campo7"><b>Vídeos ou Screenshots do ocorrido</b>:</label>
<textarea data-type="textarea" id="campo7" placeholder=""></textarea>
</div>
<!-- END Generated HTML Code -->
</div>
<div class="fa-submit">
<button class="post-button" type="submit">Enviar Formulário</button>
</div>
</form>
<!-- Javascript's -->
<!-- Não é recomendada a edição abaixo desta linha. -->
<textarea style="display: none;" id="fa-generated-message">[b]Administrador que Baniu[/b]
{{campo2}}
[b]Motivo do Banimento[/b]
{{campo6}}
[b]Conta Banida[/b]
{{campo4}}
[b]Vídeos ou Screenshots[/b]
{{campo7}}
[b]Relatório do ocorrido e justificação(a)[/b]
{{campo5}}</textarea>
<input type="hidden" id="fa-generated-title" value="Revisão de Ban - {{campo4}} | Motivo: {{campo6}}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(window).on('load', function () {
$('#fa-generated-form').on('submit', function (event) {
event.preventDefault();
$(this).find('button[type="submit"]').text('Postando...');
setTimeout(function () {
$.post('/post', {
subject: $('#fa-generated-title').val().trim(),
f: 4,
message: $('#fa-generated-message').val().trim(),
mode: 'newtopic',
tid: $('[name="tid"]:first').val(),
post: 1,
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
location.pathname = '/f4-';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
Para isso, vá na configuração de sua página HTML, procure pela opção "Você deseja utilizar o início e o final da página do seu fórum" e marque "não".
o/
---
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Confusão no CSS
por JR_Junior 08.10.17 15:05
Luiz escreveu:Olá, bom dia,
O código gerado foi este, correto?O problema é que ele foi feito para ser usado em uma página HTML sozinho, isto é, sem o início e o fim do fórum.
- Código:
<!DOCTYPE html>
<html>
<!-- ->
/*
* Gerado em <ajuda.forumeiros.com>.
* Gerador (2.0) feito por Luiz (http://ajuda.forumeiros.com/u60563)
*/
<- -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Revisão de Banimento</title>
<style type="text/css">
*,
*::before,
*::after {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
/*html,
body {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
line-height: 1.5;
color: #24292e;
background-color: #fff;
}*/
#fa-generated-form {
width: 60%;
margin: 0 auto;
background-color: #fff;
border: solid 1px #ddd;
border-radius: 0 0 3px 3px;
}
.fa-form-wrapper {
width: 100%;
}
.fa-form-group {
display: block;
width: 100%;
padding: 0px 20px;
}
.fa-form-group *:last-child {
margin-bottom: 7px;
}
.fa-form-group h4 {
font-size: 23px;
/*color: #3072ab;*/
color: #666666
}
.fa-form-group p {
font-size: 16.4px;
/*border-left: solid 3px #ddd;*/
margin-left: -20px;
padding-left: 17px;
padding-top: 2px;
padding-bottom: 2px;
}
#fa-generated-form h1 {
font-size: 30px;
display: block;
text-align: center;
margin: 15px 0px;
color: #ffffff;
text-transform: uppercase;
/*background-color: #3072ab;*/
background-color: #666666;
margin-top: 0px;
font-weight: normal;
}
.fa-form-group label {
display: block;
font-size: 16px;
margin-bottom: 5px;
}
.fa-form-group input,
.fa-form-group textarea,
.fa-form-group select {
display: block;
resize: none;
width: 100%;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
color: #464a4c;
background-color: #fff;
background-image: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
.fa-form-group input:focus,
.fa-form-group textarea:focus,
.fa-form-group select:focus {
color: #464a4c;
background-color: #fff;
border-color: #5cb3fd;
outline: 0;
}
.fa-form-group select[multiple] {
padding-right: 0px;
}
.fa-submit {
display: block;
width: 100%;
padding: 20px;
text-align: center;
}
.fa-submit button {
padding: 10px 20px;
background-color: #3072ab;
color: #fff;
font-size: 14px;
border: none;
border-radius: 3px;
}
.fa-submit button:hover {
background-color: #2a6192;
}
[class*="conteneur"] form#fa-generated-form {
border-top: solid 1px #ddd;
margin-top: 20px;
border-radius: 3px!important;
}
@media (max-width: 700px) {
#fa-generated-form {
width: 100%;
border: none;
}
}
</style>
</head>
<body>
<form id="fa-generated-form">
<div class="fa-form-wrapper">
<h1>Revisão de Banimento</h1>
<!-- BEGIN Generated HTML Code -->
<div class="fa-form-group clearfix">
<h4 class="form-subtitle data-text"><center>FORMULÁRIO DE POSTAGEM</center></h4>
</div>
<div class="fa-form-group clearfix" style="-webkit-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -moz-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -ms-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); -o-box-shadow: inset 0 0 30px -9px rgb(0, 0, 0); box-shadow: inset 0 0 30px -9px rgb(0, 0, 0);">
<p class="form-paragraph data-text"><center><b><span style="color: #cc0000; font-size: small;">Preencha os campos adequadamente, do contrário,</span><br />
<span style="color: #cc0000; font-size: small;">seu pedido será rejeitado e você poderá ser punido(a)!</span></b></center></p>
</div><div class="fa-form-group clearfix">
<br>
<label for="campo2"><b>Administrador que Baniu:</b></label>
<input data-type="text" id="campo2" placeholder="" required="" type="text">
</div>
<div class="fa-form-group clearfix">
<label for="campo6"><b>Motivo do Banimento:</b></label>
<select data-type="select" id="campo6" required="">
<!-- First -->
<option value="Cheats / Hacks / Mods">Cheats / Hacks / Mods</option>
<option value="Divulgação">Divulgação</option>
<option value="3/3 Avisos">3/3 Avisos</option>
<option value="Ofensa">Ofensa</option>
<option value="Anti-RPG">Anti-RPG</option>
<option value="Desconhecido">Desconhecido</option>
</select>
</div><div class="fa-form-group clearfix">
<label for="campo4"><b>Seu nome no servidor:</b></label>
<input data-type="text" id="campo4" placeholder="" required="" type="text">
</div>
<div class="fa-form-group clearfix">
<label for="campo5"><b>Relate o ocorrido e justifique-se:</b></label>
<textarea data-type="textarea" id="campo5" placeholder="" required=""></textarea>
</div>
<div class="fa-form-group clearfix">
<label for="campo7"><b>Vídeos ou Screenshots do ocorrido</b>:</label>
<textarea data-type="textarea" id="campo7" placeholder=""></textarea>
</div>
<!-- END Generated HTML Code -->
</div>
<div class="fa-submit">
<button class="post-button" type="submit">Enviar Formulário</button>
</div>
</form>
<!-- Javascript's -->
<!-- Não é recomendada a edição abaixo desta linha. -->
<textarea style="display: none;" id="fa-generated-message">[b]Administrador que Baniu[/b]
{{campo2}}
[b]Motivo do Banimento[/b]
{{campo6}}
[b]Conta Banida[/b]
{{campo4}}
[b]Vídeos ou Screenshots[/b]
{{campo7}}
[b]Relatório do ocorrido e justificação(a)[/b]
{{campo5}}</textarea>
<input type="hidden" id="fa-generated-title" value="Revisão de Ban - {{campo4}} | Motivo: {{campo6}}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(window).on('load', function () {
$('#fa-generated-form').on('submit', function (event) {
event.preventDefault();
$(this).find('button[type="submit"]').text('Postando...');
setTimeout(function () {
$.post('/post', {
subject: $('#fa-generated-title').val().trim(),
f: 4,
message: $('#fa-generated-message').val().trim(),
mode: 'newtopic',
tid: $('[name="tid"]:first').val(),
post: 1,
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
location.pathname = '/f4-';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
Para isso, vá na configuração de sua página HTML, procure pela opção "Você deseja utilizar o início e o final da página do seu fórum" e marque "não".
o/
---
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.
Primeiramente, acho que você é o criador do gerador né? Se for, parabéns, muito útil e bem feito!
Segundo: Se eu usar ele como HTML sozinho fica horrível, eu gostei de como ele fica usando com o início e o fim do fórum!
Você consegue converter esse código do formulário pra ser usado dentro do início e o fim do fórum?
Obrigado!
JR_Junior- *
- Membro desde : 10/05/2012
Mensagens : 46
Pontos : 74 -
Re: Confusão no CSS
por Luiz 08.10.17 15:06
Obrigado.Primeiramente, acho que você é o criador do gerador né? Se for, parabéns, muito útil e bem feito!
---
Qual o endereço do formulário gerado em seu fórum? o/
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Confusão no CSS
por JR_Junior 08.10.17 15:17
Luiz escreveu:Obrigado.Primeiramente, acho que você é o criador do gerador né? Se for, parabéns, muito útil e bem feito!
---
Qual o endereço do formulário gerado em seu fórum? o/
http://darkstreetrpg.forumeiros.com/h1-revisao-de-banimento
JR_Junior- *
- Membro desde : 10/05/2012
Mensagens : 46
Pontos : 74 -
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Confusão no CSS
por JR_Junior 08.10.17 15:32
A pequena configuração é: box-sizing: border-box; pertencente a *::after.
O problema está no fato que se eu usar essa configuração o formulário fica perfeito, mas ela acaba afetando a parte direita do cabeçalho do fórum, deixando a logo fora da posição.
Usando a configuração: http://prntscr.com/guqn7s
Sem essa configuração, a estrutura do formulário fica comprometida e eu já tentei de tudo, alterei outras classes e não consegui consertar.
Sem a configuração: http://prntscr.com/guqnzj
O problema está no fato que se eu usar essa configuração o formulário fica perfeito, mas ela acaba afetando a parte direita do cabeçalho do fórum, deixando a logo fora da posição.
Usando a configuração: http://prntscr.com/guqn7s
Sem essa configuração, a estrutura do formulário fica comprometida e eu já tentei de tudo, alterei outras classes e não consegui consertar.
Sem a configuração: http://prntscr.com/guqnzj
JR_Junior- *
- Membro desde : 10/05/2012
Mensagens : 46
Pontos : 74 -
Re: Confusão no CSS
por Luiz 08.10.17 15:33
No código do seu formulário, procure por:
Abaixo, você coloca:
Vai ficar mais ou menos assim:
o/
- Código:
<head>
Abaixo, você coloca:
- Código:
<style>
#logo > img {
max-width: 100%;
}
</style>
Vai ficar mais ou menos assim:
- Código:
<head>
<style>
#logo > img {
max-width: 100%;
}
</style>
o/
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Confusão no CSS
por JR_Junior 08.10.17 15:38
Luiz escreveu:No código do seu formulário, procure por:
- Código:
<head>
Abaixo, você coloca:
- Código:
<style>
#logo > img {
max-width: 100%;
}
</style>
Vai ficar mais ou menos assim:o/
- Código:
<head>
<style>
#logo > img {
max-width: 100%;
}
</style>
Tive um orgasmo agora! kkkkkkkkkkkk
Valeu mano veio! Funcionou!
JR_Junior- *
- Membro desde : 10/05/2012
Mensagens : 46
Pontos : 74 -
Re: Confusão no CSS
por Luiz 08.10.17 15:43
| Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
