Como mudar o Portal pra esse Estilo
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
Como mudar o Portal pra esse Estilo
Eu gostaria de saber como por pra quando entrar no forum aparecer tipo assim... é que eu achei meio interessante.. Se vc n consegur vver a img completa ve aki http://www.tickimg.com.br/uploads/_sem_titulo_74.png
**
**
Re: Como mudar o Portal pra esse Estilo
Olá Lexxus,
Este não é o portal do fórum, mas sim uma página em HTML que redireciona para o fórum! Queira checar o tópico a baixo.
[FAQ] Criar uma página inicial HTML personalizada
Mas é necessário que faça o código da página, queira ceder o endereço da página onde tirou a screen, e é só dizer os menus que quer que os faço pra você.
Abraços, Harker.
Este não é o portal do fórum, mas sim uma página em HTML que redireciona para o fórum! Queira checar o tópico a baixo.
[FAQ] Criar uma página inicial HTML personalizada
Mas é necessário que faça o código da página, queira ceder o endereço da página onde tirou a screen, e é só dizer os menus que quer que os faço pra você.
Abraços, Harker.
Re: Como mudar o Portal pra esse Estilo
Ok Harker , Obrigado que possa fazer para min ! Queria uma com essa Wallpaper ... Link : Clique Aqui
E Se pudesse escreve-se Brasil Play Clube no Meio da Imagem !
OPS: Ja ia esquecendo o endereço do forum da Print Screnn - Liink: Clique aqui
Grato Lexxus
E Se pudesse escreve-se Brasil Play Clube no Meio da Imagem !
OPS: Ja ia esquecendo o endereço do forum da Print Screnn - Liink: Clique aqui
Grato Lexxus
Re: Como mudar o Portal pra esse Estilo
Bom dia!
Acesse Módulos > HTML e Javascript > Gestão das páginas HTML > Criar uma nova página HTML >, e em seguida adicione este código no campo de texto:
Leia este tutorial:
Atenciosamente,
Shek
Acesse Módulos > HTML e Javascript > Gestão das páginas HTML > Criar uma nova página HTML >, e em seguida adicione este código no campo de texto:
- Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Team VoLKinG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/9UZMZfI.png" />
<link rel="stylesheet" href="http://www.ggames.com.br/css/style.css" type="text/css" media="screen">
<script type="text/css">
<!--////////////////////////////////////////////////////////////////////////////////-->
<!--/ ///-->
<!--/ ///-->
<!--/ Portal Versão 2.0 ///-->
<!--/ Criado Por iTroLL ///-->
<!--/ ///-->
<!--////////////////////////////////////////////////////////////////////////////////-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28009881-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://espions.webs.com/cufon-yui.js" type="text/javascript"></script>
<script src="http://espions.webs.com/BabelSans_500.font.js" type="text/javascript"></script>
<script src="http://espions.webs.com/jquery.easing.1.3.js" type="text/javascript"></script>
<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>
<script type="text/javascript">
$(function() {
Cufon.replace('a, span').CSS.ready(function() {
var $menu = $("#slidingMenu");
var $selected = $menu.find('li:first');
var $moving = $('<li />',{
className : 'move',
top : $selected[0].offsetTop + 'px',
width : $selected[0].offsetWidth + 'px'
});
$('#slidingMenuDesc > div').each(function(i){
var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});
$menu.bind('mouseleave',function(){
moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});;
function moveTo($elem,speed){
$moving.stop(true).animate({
top : $elem[0].offsetTop + 'px',
width : $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
}) ;
});
</script>
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:14px;
}
span.reference a{
color:#aaa;
text-decoration:underline;
}
body {
background-image: url('http://imageshack.us/a/img854/2537/1vvl.jpg') !important;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<span class="reference">
Team VoLKing| Desenvolvido por <a href="http://team-volking.forumeiros.com/" target="_Blank" alt="Web Designer iTroLL.">iTroLL.</a> | Hospedado por <a href="http://www.forumeiros.com" target="_Blank" alt="Forumeiros">Forumeiros.</a>
</span>
</div>
<div id="slidingMenuDesc" class="slidingMenuDesc">
<div><span>Ja se Cadastrou ? Entao faca seu Login aqui!</span></div>
<div><span>Registre-se e faca parte do Team VoLKinG</span></div>
<div><span>Veja o nosso Portal!</span></div>
<ul id="slidingMenu" class="slidingMenu">
<li><a href="/forum">Forum</a></li>
<li><a href="/login" title="">Login</a></li>
<li><a href="/register" title="">Registro</a></li>
<li><a href="/portal" title="">Portal</a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
</ul>
</body>
Leia este tutorial:
- TUTORIAL:
Página HTML personalizada
Vamos disponibilizar neste tutorial um código HTML personalizado no modelo oficializado para o Fórum dos Fóruns. Esta página HTML possui também um slide integrado na qual você poderá usar para publicar as suas novidades.
1º - Aplicação do HTML:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML
Título - Pode colocar o título que quiser para a página, não irá afetar em nada. Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente. Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).
2º - Aplicação do código:
Em seguida, cole o seguinte código:- Código:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
<!----------------------------------------------- Créditos: -----------------------------------------------!>
Está página foi desenvolvida por BrunoH.
Nome: Fórum dos Fóruns - Forumeiros
Autor: BrunoH.
Perfil: http://ajuda.forumeiros.com/u47318
Link: https://www.facebook.com/brunohenriqueweb.com.br
Data: 12/03/2014
<!-------------------------------- Não retire os créditos - @copyright 2013 -------------------------------!>
hr {
border-color: #fff;
}
#top5 {
display:none;
position: fixed;
left: 86.6%;
top: 97%;
color: #73AAFD;
font-family: "Courier New", Courier, monospace font-size:14px;
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
opacity: 0.7;
-webkit-transition-duration: 1s;
background: rgb(27, 27, 27);
width: 20%;
-webkit-box-shadow: rgb(255, 255, 255) 1px 1px 6px;
}
#top5:hover {
height: 80%;
top: 47%;
opacity: 1;
}
#cssmenu {
height: 49px;
background: transparent;
margin-left: 50%;
margin-top: -7%;
width: 50%!important;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: transparent;
color: #fff;
display: inline-block;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
line-height: 35px;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
border-radius: 3px;
margin-left: 5px;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
}
#cssmenu > ul > li:hover > a {
background: rgba(0, 0, 0, 0.1);
color: white;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 3px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px, rgba(255, 255, 255, 0.1) 0px 1px 0px;
box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 3px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px, rgba(255, 255, 255, 0.1) 0px 1px 0px;
}
#cssmenu a[href="/"] {
background: rgba(0, 0, 0, 0.2);
color: white;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.2) 0px 1px 0px;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.2) 0px 1px 0px;
}
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}
.menu {
width: 87.2%;
background: transparent;
margin-top: -4%;
position: absolute;
margin-left: 5%;
padding: 10px;
-webkit-border-radius: 7px 7px 0px 0;
color:#fff;
}
.menu a{
transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-webkit-moz-trasition:all linear 0.5s;
font-weight:bold;
color:#999999;
margin-right:35px;
text-decoration:none;
}
#tabela1 {
display: table;
background: #fff;
width: 90%;
height: 500px;
float: center;
border: 1px solid black;
margin-top: 165px;
border: 1px solid rgba(0, 0, 0, 0.35);
-webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
}
#tabela1 a{
text-decoration:none;
color:#000;
}
body{
background: url(http://2img.net/i/fa/fdf3/bg.png);
background-attachment: fixed;
color: #5a5a5a;
font: normal 11px tahoma,helvetica,arial,sans-serif;
padding-bottom: 20px;
}
.conectado {
margin-top: -2.9%;
margin-left: 6%;
position: absolute;
background: rgba(0, 0, 0, 0.18);
height: 37px;
box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
border: 1px solid rgba(0, 0, 0, 0.35);
width: 87%;
}
.botao {
font-weight: bold;
color: white;
float: left;
padding: 0 13px 9px 13px;
line-height: 36px;
outline: none;
height: 26px;
text-decoration: none;
}
.botao a {
color: white;
text-decoration: none;
}
.botao:hover {
background: rgba(0, 0, 0, 0.1);
}
#brunoh {
background-color: #fbfbfb;
border: 1px solid rgb(231, 231, 231);
padding: 6px;
}
#footer {
font-size: 11px;
height: 23px;
margin: -12px;
padding: 8px;
margin-left: -5.8%;
margin-top: 1%;
width: 110.1%;
position: relative;
border-top: 1px solid #D8D8D8;
text-shadow: rgba(255, 255, 255, 0.8) 0px 1px 0px;
background: #EEE url('http://www.ipbforumskins.com/skindemo/public/style_images/overlayr34x/highlight_faint.png') repeat-x 0 0;
}
.redesociais {
position: absolute;
margin-top: -2.8%;
margin-left: 85%;
}
</style>
<link rel="shortcut icon" type="image/x-icon" href="http://cdn1.iconfinder.com/data/icons/crystalproject/128x128/devices/Globe2.png" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página Forumeiros personalizada</title>
</head>
<body>
<center><img src="http://i.imgur.com/DrTHtX5.png" style=" position: absolute; left: -157px; top: 37px;padding: 0px;"></center><div class="conectado"><div class="botao"><a href='Link1'><span>Menu1</span></a></div><div class="botao"><a href="Link2">Menu2</a></div><div class="botao"><a href="Link3">Menu3</a></div><div class="botao"><a href="Link4">Menu4</a></div>
</div>
<center><div class="menu"><div id='cssmenu'>
<ul>
<li class='has-sub'><a href='/forum'><span>Fórum</span></a></li>
<li class='active'><a href='/'><span>Home</span></a></li>
<li class='has-sub'><a href='/portal'><span>Portal</span></a></li>
<li class='last'><a href='/f60-'><span>Anúncios</span></a></li>
</ul>
</div></div>
<div class="redesociais"><a href="https://www.facebook.com/forumeirospt"><img src="http://i.imgur.com/UklM5rn.png" alt="Página Facebook" title="Página Facebook" style="height: 39px;"></a><a href="http://www.youtube.com/tvforumeiros"><img src="http://i.imgur.com/mTsSggT.png" alt="Youtube" title="Youtube" style="height: 39px;"></a></div>
<table id="tabela1">
<td><center><div style="border-radius:5px; background:transparent; margin-bottom:10px;width:90%; height:100%;margin-top: -1%;">
<br>
<! Slide Show !>
<style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:135px}.picshow_main{position:relative;width:105.6%;height:135px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:105.7%;height:135px;margin-left: -5.5%;}.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:5px;left:60px}.picshow_change img{width:15px;height:15px}.picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline}a.axx{border-color:#555}a.axx:hover{border-color:#000}a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0}a.bxx{border-color:#000}a.bxx:hover{border-color:#000}img{border:0px}</style>
<script>var counts = 5;
img1 = new Image();
img1.src = 'http://i.imgur.com/atkb0Ht.png';
img2 = new Image();
img2.src = 'http://i.imgur.com/jipwiLZ.png';
img3 = new Image();
img3.src = 'http://i.imgur.com/7HRdhVb.png';
img4 = new Image();
img4.src = 'http://i.imgur.com/6RTHtdV.png';
img5 = new Image();
img5.src = 'http://i.imgur.com/A5mJEe2.png';
var smallImg = new Array();
smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';
smallImg[3] = 'http://i.imgur.com/j9q7B.png';
smallImg[4] = 'http://i.imgur.com/mzFKQ.png';
url1 = 'http://skygames.sampforum.net/';
url2 = 'http://skygames.sampforum.net/';
url3 = 'http://skygames.sampforum.net/';
url4 = 'http://skygames.sampforum.net/ ';
url5 = 'http://skygames.sampforum.net/';
alt1 = new Image();
alt1.alt = 'Sky Games!';
alt2 = new Image();
alt2.alt = 'Sky Games - RPG';
alt3 = new Image();
alt3.alt = 'Sky Games!';
alt4 = new Image();
alt4.alt = 'Sky Games!';
alt5 = new Image();
alt5.alt = 'Sky Games!';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";
} else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}
for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 4000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}</script><script>ImageShow()</script>
<! Fim Slide Show !>
<center><div>
<br>
<span style="font-family: Arial, Helvetica, sans-serif;">O Fórum dos Fóruns é um espaço de contato pessoal entre Forumeiros e você, onde encontrará todo o tipo de informações: o nosso regulamento, as perguntas mais frequentes, as atualizações constantes e as principais dicas para administrar e personalizar o seu fórum Forumeiros.</span>
<br>
<hr>
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/Md4-0n7irLQ" width="425" height="350" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit"></embed>
<hr>
<table width="90%" style="padding: 3px; font-size: 0.8em; margin-bottom:0px; padding-bottom: 0px;margin-top: 15px;font-family: Verdana,Arial,Helvetica,sans-serif;"><tr valign="top"><td>
<b>Regulamentos e afins:</b>
<br><a href="/link">Equipe Forumeiros</a>
<br><a href="/link">Regras do fórum</a>
<br><a href="/link">Como entrar na equipe</a>
</td><td><strong> Seções do fórum:</strong><br><a href="link"> Ajuda e suporte</a><br><a href="link"> Serviços aos usuários</a><br><a href="/link"> Forumeiros e você</a></td>
<td><strong> Miscelânea:</strong><br><a href="/link"> Sugestões em geral</a><br><a href="/link"> Tutoriais em Geral</a><br><a href="/link"> Discussões gerais</a></td>
</tr></table>
</center>
<br>
<div id="footer">Todos os direitos autorais reservados Fórum dos Fóruns - Forumeiros</div>
</div></center>
</table></center>
</body>
</html>
<a href="http://www.forumeiros.com" target="_blank" style="display: none;"> Fórumeiros</a>
Algumas observações antes de seguir para as edições. Para encontrar as imagens correspondentes ao slide, basta pressionar o Ctrl + F e pesquisar pelas seguintes imagens:
Atenção:
Para realizar as edições na página, aconselhamos que não remova os créditos internos do código, pois, mesmo deixando-os este não será visível na página e não atrapará em nenhuma função adicional ou atual da página. Ao mesmo tempo, informamos que você poderá obter ajuda adicional com a edição acessando o tutorial Estrutura duma página HTML disponível neste fórum.
- Resultado
© Fórum dos Fóruns & BrunoH.
Atenciosamente,
Shek
Tópicos semelhantes
» Como coloco esse estilo de login
» Como mudar estilo dos botões
» Como colocar um mini slide de promoção na pagina do portal como esse ae!(ajuda ae)
» portal como esse
» Como por um portal que nem esse
» Como mudar estilo dos botões
» Como colocar um mini slide de promoção na pagina do portal como esse ae!(ajuda ae)
» portal como esse
» Como por um portal que nem esse
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