ArtigosComo faço isso no meu fórum
5 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
Como faço isso no meu fórum
por CR7 Oliveira 11.03.16 19:11
Detalhes da questão
Endereço do fórum: http://master-nwdgames.forumeiros.com/
Versão do fórum: PhpBB3
Descrição
Como faça para coloca isso no meu fórum na tela de login ?
https://imgur.com/7YxnlaI
CR7 Oliveira- *****
- Membro desde : 08/02/2016
Mensagens : 468
Pontos : 698 -
Re: Como faço isso no meu fórum
por Hancki 11.03.16 20:07
Olá!
Isso é uma página de login personalizada.
Criando uma página HTML no Painel de Controle, definimos a página personalizada como página inicial do fórum e é assim que aparece.
Se quer replicar exatamente essa página, preciso de saber onde viu.
Hancki
Isso é uma página de login personalizada.
Criando uma página HTML no Painel de Controle, definimos a página personalizada como página inicial do fórum e é assim que aparece.
Se quer replicar exatamente essa página, preciso de saber onde viu.
Hancki
Hancki- Membro Entusiasta
- Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250 -
Re: Como faço isso no meu fórum
por CR7 Oliveira 11.03.16 20:14
Hancki escreveu:Olá!
Isso é uma página de login personalizada.
Criando uma página HTML no Painel de Controle, definimos a página personalizada como página inicial do fórum e é assim que aparece.
Se quer replicar exatamente essa página, preciso de saber onde viu.
Hancki
http://pm-nwd.forumeiros.com/
CR7 Oliveira- *****
- Membro desde : 08/02/2016
Mensagens : 468
Pontos : 698 -
Re: Como faço isso no meu fórum
por Dr.Maximus_. 11.03.16 22:01
- Código:
<html lang="en" class="no-js"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CoOLOQUE TITULO AQUI</title>
<meta name="description" content="Editavel">
<meta name="keywords" content="SA:MP - RPG">
<meta name="author" content="Codrops">
<link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
<link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen">
<script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
<style>
/* General styles for all menus */
.cbp-spmenu {
background: #163c52;
position: fixed;
}
.cbp-spmenu h3 {
color: #afdefa;
font-size: 1.9em;
padding: 20px;
margin: 0;
font-weight: 300;
background: #0d77b6;
}
.cbp-spmenu a {
display: block;
color: #fff;
font-size: 1.1em;
font-weight: 300;
}
.cbp-spmenu a:hover {
background: #1c5f85;
}
.cbp-spmenu a:active {
background: #afdefa;
color: #0f354b;
}
/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
}
.cbp-spmenu-vertical a {
border-bottom: 1px solid #1c5f85;
padding: 1em;
-webkit-transition:background 0.5s ease-out;
-moz-transition:background 0.5s ease-out;
-o-transition:background 0.5s ease-out;
-ms-transition:background 0.5s ease-out;
}
.cbp-spmenu-horizontal {
width: 100%;
height: 150px;
left: 0;
z-index: 1000;
overflow: hidden;
}
.cbp-spmenu-horizontal h3 {
height: 100%;
width: 20%;
float: left;
}
.cbp-spmenu-horizontal a {
float: left;
width: 20%;
padding: 0.8em;
border-left: 1px solid #1c5f85;
-webkit-transition:background 0.5s ease-out;
-moz-transition:background 0.5s ease-out;
-o-transition:background 0.5s ease-out;
-ms-transition:background 0.5s ease-out;
}
/* Vertical menu that slides from the left or right */
.cbp-spmenu-left {
left: -240px;
}
.cbp-spmenu-right {
right: -240px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}
.cbp-spmenu-right.cbp-spmenu-open {
right: 0px;
}
/* Horizontal menu that slides from the top or bottom */
.cbp-spmenu-top {
top: -150px;
}
.cbp-spmenu-bottom {
bottom: -150px;
}
.cbp-spmenu-top.cbp-spmenu-open {
top: 0px;
}
.cbp-spmenu-bottom.cbp-spmenu-open {
bottom: 0px;
}
/* Push classes applied to the body */
.cbp-spmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.cbp-spmenu-push-toright {
left: 240px;
}
.cbp-spmenu-push-toleft {
left: -240px;
}
/* Transitions */
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* Example media queries */
@media screen and (max-width: 55.1875em){
.cbp-spmenu-horizontal {
font-size: 75%;
height: 110px;
}
.cbp-spmenu-top {
top: -110px;
}
.cbp-spmenu-bottom {
bottom: -110px;
}
}
@media screen and (max-height: 26.375em){
.cbp-spmenu-vertical {
font-size: 90%;
width: 190px;
}
.cbp-spmenu-left,
.cbp-spmenu-push-toleft {
left: -190px;
}
.cbp-spmenu-right {
right: -190px;
}
.cbp-spmenu-push-toright {
left: 190px;
}
}
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-family: 'fontawesome';
src:url('../fonts/fontawesome.eot');
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#lixo {
display:none;
}
body {
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #D5D4D4;
background: #273749 url("http://i.imgur.com/lPv5zbk.jpg") top no-repeat;
}
a {
color: #f0f0f0;
text-decoration: none;
}
.main,
.container > header {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 0 1.875em 3.125em 1.875em;
}
.container > header {
padding: 2.875em 1.875em 1.875em;
}
.container > header h1 {
font-size: 2.125em;
line-height: 1.3;
margin: 0;
float: left;
font-weight: 400;
}
.container > header span {
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.6em 0.1em;
}
.container > header nav {
float: right;
}
.container > header nav a {
display: block;
float: left;
position: relative;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
color: transparent;
margin: 0 0.1em;
border: 4px solid #0f354b;
text-indent: -8000px;
}
.container > header nav a:after {
content: attr(data-info);
color: #0f354b;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
opacity: 0;
pointer-events: none;
}
.container > header nav a:hover:after {
opacity: 1;
}
.container > header nav a:hover {
background: #0f354b;
}
.main > section {
max-width: 260px;
width: 90%;
margin: 0 auto;
}
.main > section h2 {
font-weight: 300;
color: #ccc;
}
.main > section button {
border: none;
background: #0f354b;
color: #fff;
padding: 1.5em;
display: block;
width: 100%;
cursor: pointer;
margin: 10px 0;
font-size: 0.8em;
-webkit-transition:background 0.5s ease-out;
-moz-transition:background 0.5s ease-out;
-o-transition:background 0.5s ease-out;
-ms-transition:background 0.5s ease-out;
}
.main > section button:hover {
background: #1c5f85;
-webkit-transition:background 0.5s ease-out;
-moz-transition:background 0.5s ease-out;
-o-transition:background 0.5s ease-out;
-ms-transition:background 0.5s ease-out;
}
.main > section button.active {
background: #0d77b6;
}
.main > section button.disabled {
background: #aaa;
pointer-events: none;
}
.icon-drop:before,
.icon-arrow-left:before {
font-family: 'fontawesome';
position: absolute;
top: 0;
width: 100%;
height: 100%;
speak: none;
font-style: normal;
font-weight: normal;
line-height: 2;
text-align: center;
color: #0f354b;
-webkit-font-smoothing: antialiased;
text-indent: 8000px;
padding-left: 8px;
}
.container > header nav a:hover:before {
color: #fff;
}
.icon-drop:before {
content: "\e000";
}
.icon-arrow-left:before {
content: "\f060";
}
span.eddyeowna{
background: #0f354b;
position:fixed;
right:0px;
bottom:30px;
font-size:12px;
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
span.eddyeowna a{
color:#fff;
text-transform:uppercase;
text-decoration:none;
margin-right:30px;
}
span.eddyeowna a:hover{
color:#000;
}
</style></head>
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>Fórum</h3>
<a href="/forum">Acessar</a>
<a href="/login">Logar</a>
<a href="/register">Registrar-se</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<h3>Servidores</h3>
<a href="samp://editavel">SA-MP RPG NWD</a>
</nav>
<div class="container">
<header class="clearfix">
<center><h2><span class="animated BounceInUp">Bem - vindo à website da corporação Polícia Militar NWD </span><center><h2>
</h2></center></h2></center></header>
<div class="main">
<section class="buttonset">
<center><h3><span class="animated BounceInUp">ACESSO RÁPIDO</span></h3></center>
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showLeftPush" class="animated bounceInUp">Fórum</button>
<button id="showRightPush" class="animated bounceInDown">Servidores</button>
</section>
</div>
<center><h2><span class="animated BounceInUp"></span><center><h2>
</h2></center></h2></center></div>
<span class="eddyeowna">
<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
<script src="http://asusgames.esy.es/CSS/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
menuTop = document.getElementById( 'cbp-spmenu-s3' ),
menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
showLeft = document.getElementById( 'showLeft' ),
showRight = document.getElementById( 'showRight' ),
showTop = document.getElementById( 'showTop' ),
showBottom = document.getElementById( 'showBottom' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRightPush' );
};
function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
if( button !== 'showRight' ) {
classie.toggle( showRight, 'disabled' );
}
if( button !== 'showTop' ) {
classie.toggle( showTop, 'disabled' );
}
if( button !== 'showBottom' ) {
classie.toggle( showBottom, 'disabled' );
}
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
if( button !== 'showRightPush' ) {
classie.toggle( showRightPush, 'disabled' );
}
}
</script>
<div id="lixo">
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="JavaScript">
<!--
var mensagem="";
function clickIE() {if (document.all) {(mensagem);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(mensagem);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
<script language="JavaScript">
function protegercodigo() {
if (event.button==2||event.button==3){
}
document.onmousedown=protegercodigo
</script>
</span><div id="window-resizer-tooltip"><a href="#" title="Edit settings"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div></body></html>
Isso que vc queria ?
Não editei alguns campos porq não analisei o codigo, falta de tempo...
Dr.Maximus_.- Novo Membro
- Membro desde : 17/12/2012
Mensagens : 20
Pontos : 37 -
Re: Como faço isso no meu fórum
por GSCode 11.03.16 22:57
Olá,
Dessa forma é melhor, e já está modificado para nosso clã.
Dessa forma é melhor, e já está modificado para nosso clã.
- Código:
<html><head><title>Bem-vindo</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta http-equiv="content-script-type" content="text/javascript"><meta http-equiv="content-style-type" content="text/css"><link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/zFsxjN0.png"><link rel="stylesheet" href="http://flames.br22.com/proxima-nova.css"><meta name="title" content="Upgrade | Bem-vindo!"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><style>/* GOOGLE FONTS */
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
/* GERAL */* {margin: 0;padding: 0;list-style-type: none;text-decoration: none;}body {background: #202020;color: white;}a {color: white;}.content {width: 75%;margin: 0 auto;}.none {display: none;}
/* SLIDE */#slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}#slide > #slide-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;-webkit-filter: brightness(1.2) blur(3px);z-index: 9;}#slide > #slide-main {position: absolute;top: 38%;bottom: 41%;z-index: 99;text-align: center;left: 17.5%;right: 17.5%;width: 65%;}#slide > #slide-main h1.logotype {color: white;font-family: "proxima-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 900;font-size: 82px;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);line-height: 90px;}#slide > #slide-main p.paragraph {font-family: 'Lato';font-weight: 300;font-size: 20px;padding: 5px 0;font-style: italic;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);}#slide > #slide-main .slide-button {background: rgba(0, 0, 0, 0.42);padding: 8px 20px 9px 20px;border: 1px solid white;display: inline-block;border-radius: 3px;font-family: 'Lato', 'Helvetica Neue';margin-top: 12px;margin-right: 10px;}#slide > #slide-main .slide-button.contact {margin-right: 0;margin-left: 10px;border-color: darkcyan;color: darkcyan;}
/* CONTATO */#contact {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);z-index: 999;display: none;}#contact > .container {text-align: center;}#contact > .container h1.logotype {color: white;font-family: "proxima-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 900;font-size: 62px;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);line-height: 80px;}#contact > .container .paragraph {font-family: 'Lato';font-weight: 300;font-size: 20px;font-style: italic;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);opacity: 0;padding: 15px 0;}#contact > .container form {text-align: center;margin: 50px 0;}#contact > .container form input {background: rgba(255, 255, 255, 0.15);padding: 14px 25px;border: 0;border-bottom: 1px solid rgba(255, 255, 255, 0.35);display: inline-block;font-family: 'Lato', 'Helvetica Neue';font-size: 18px;font-style: italic;font-weight: 300;margin-bottom: 20px;color: white;width: 50%;}#contact > .container form textarea {background: rgba(255, 255, 255, 0.15);padding: 14px 25px;border: 0;border-bottom: 1px solid rgba(255, 255, 255, 0.35);display: inline-block;font-family: 'Lato', 'Helvetica Neue';font-size: 18px;font-style: italic;font-weight: 300;margin-bottom: 20px;color: white;width: 50%;height: 150px;}#contact > .container form input.button2 {width: 10%;cursor: pointer;}#contact > .container form .captcha img {padding: 12px 20px;border: 1px solid #222;background: rgba(255, 255, 255, 0.15);margin-bottom: 0px;}#contact > #contact-close {position: fixed;top: 25px;right: 25px;display: block;}#contact > #contact-close a {display: block;width: 25px;height: 24px;background-image: url(https://cdn1.iconfinder.com/data/icons/jigsoar-icons/64/_close.png);background-color: #252525;background-repeat: no-repeat;background-size: 22px;background-position: center;border: 0;border-radius: 500px;padding: 10px;cursor: pointer;-webkit-filter: grayScale();}</style><script>function contact() {$('#contact').fadeToggle();}
function submit_form() {var result=$('iframe[name="rcontact"]').contents().find('#main-content .main .main-content p.center').text();$('#contact > .container .paragraph').html(result);$('#contact > .container .paragraph').animate({opacity: '1'}, 2500);if(result="O código de confirmação não corresponde ao da imagem. Tente mais tarde.") {$('#contact > .container form .captcha img').attr('src','/antirobot_pic.forum?a=262cf829fcf970a531ff7b6bccc7ba62');}if(result="A tua mensagem nos foi transmitida. Ela será lida nos melhores prazos.") {setTimeout('contact()', 5000);}}</script>
</head><body><div id="slide">
<script>
var id = 0;
var imgs = new Array();
imgs[0] = "http://im.ziffdavisinternational.com/t/ign_br/screenshot/default/gtav-pc-4k10jpg-a961c7_kudj.1920.jpg";
imgs[2] = "http://cs1.gtaall.com.br/screenshots/5a9f9/2013-09/original/aaca80ccd51f44b508b44ed7a427bdbeb5bc204a/52357-1343901573-gallery14.jpg";
//Aqui apenas adicione mais imagens
function troca(){
if (id<imgs.length-1){
id++;
}else{
id=0
}
$("#slide-bg").fadeOut(500);
setTimeout("$('#slide-bg').html('<img src=\""+imgs[id]+"\" width=\"100%\" height=\"100%\" />');$('#slide-bg').fadeIn(500);",500);
}
var segundos = 5; //Segundos entre cada imagem
setInterval("troca();",segundos*1000);
</script>
<div id="slide-main" class="content container">
<h1 class="logotype">
Master
</h1>
<p class="paragraph">
O seu clã de DM!
</p>
<a href="http://master-nwdgames.forumeiros.com/forum" class="slide-button">Ir ao Fórum</a> <a href="http://master-nwdgames.forumeiros.com/register" class="slide-button">Criar uma nova conta</a>
</div>
<div id="slide-bg" style="opacity: 0.6; display: block; background-image: url("http://i.imgur.com/PEZyiOu.jpg");"><img src="http://cs1.gtaall.com.br/screenshots/5a9f9/2013-09/original/aaca80ccd51f44b508b44ed7a427bdbeb5bc204a/52357-1343901573-gallery14.jpg" width="100%" height="100%"></div>
<div id="footer">
</div>
</div>
<div id="contact">
<div id="contact-main" class="content container">
<h1 class="logotype">
fale conosco
</h1>
<div class="center paragraph">
O código de confirmação não corresponde ao da imagem. Tente mais tarde.
</div>
<form action="/contact?action=submit" target="rcontact" class="report" method="post">
<input name="subject" id="subject" maxlength="49" class="report-abuse-textarea" placeholder="Assunto" type="text"> <br> <br> <textarea cols="25" rows="10" name="message" id="message" class="report-abuse-textarea" placeholder="Mensagem"></textarea> <br> <br>
<div class="captcha">
<div class="captcha-img">
<label for="reg_key" dir="ltr"> <img src="/antirobot_pic.forum?a=262cf829fcf970a531ff7b6bccc7ba62" alt=""> </label> <input name="username" value="" type="hidden"> <input name="time" value="" type="hidden">
</div>
<input class="inputbox tiny" name="reg_key" id="reg_key" maxlength="5" placeholder="Captcha" dir="ltr" style="margin-bottom: 5px;" type="text">
</div>
<br> <br> <input class="button2" name="submit" value="Enviar" onclick="contact();submit_form();" type="submit"> <input name="time" value="" type="hidden">
</form>
<iframe src="" name="rcontact" style="width: 0;height: 0;border: 0;opacity: 0;display: none;visibility: hidden;"></iframe>
</div>
<div id="contact-close">
<a href="#" onclick="contact();"></a>
</div>
</div>
<div id="linkforum">
<a href="#" target="_blank"></a>
</div><a href="http://www.forumeiros.com" target="_blank"> </a></body></html>
GSCode- Membro
- Membro desde : 11/10/2013
Mensagens : 591
Pontos : 1031 -
CR7 Oliveira- *****
- Membro desde : 08/02/2016
Mensagens : 468
Pontos : 698 -
Re: Como faço isso no meu fórum
por Shek 12.03.16 15:27
 | Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Tópicos semelhantes» Como que faço isso
» Como faço isso no meu forum?
» Como faço isso no meu forum
» Ownarão meu Fórum, como faço para Tirar isso ?
» Como faço isso?
» Como faço isso no meu forum?
» Como faço isso no meu forum
» Ownarão meu Fórum, como faço para Tirar isso ?
» Como faço isso?
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