InícioCustomização do Cabeçalho.
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Customização do Cabeçalho.
por davy9526 10.06.20 19:34
Detalhes da questão
Endereço do fórum: https://sistemadco.forumeiros.com/
Versão do fórum: ModernBB
Descrição
Boa tarde, sobre o cabeçalho do meu fórum. Eu gostaria de tirar coisas que não me servem, como: Calendário e o FAQ.
E tirar esse botões de cima do banner e colocá-los em cima ou em baixo do banner.
Deixá-los com aparência melhor, ou algo do tipo.
Aqui está meu overall_header:
- Código:
<!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
<link rel="search" type="application/opensearchdescription+xml"
href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch (tickerDirParam) {
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function () {
$('#fa_ticker_content').css('display', 'block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0) {
$('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item) {
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert) {
var height_max = h_perso;
$('ul#fa_ticker_content li').each(function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
});
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
} else {
$('ul#fa_ticker_content li:not(:first)').css('display', 'none');
$('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if (pm != null) {
pm.focus();
}
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if (report != null) {
report.focus();
}
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function () {
Ticker.start({
height: {switch_ticker.HEIGHT},
spacing: {switch_ticker.SPACING},
speed: {switch_ticker.SPEED},
direction: '{switch_ticker.DIRECTION}',
pause: {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready(function () {
$(window).resize(function () {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth / 2 - popupWidth / 2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align: center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})
(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a
href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="headerbar">
<div id="headerbar-top">
<div class="wrap">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
<div class="wrap">
<div id="site-desc">
<!-- BEGIN switch_h1 -->
<div id="site-title">{switch_h1.MAIN_SITENAME}</div>
<!-- END switch_h1 -->
<!-- BEGIN switch_desc -->
<p>{switch_desc.SITE_DESCRIPTION}</p>
<!-- END switch_desc -->
</div>
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
davy9526- Novo Membro
- Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14 -
Re: Customização do Cabeçalho.
por tikky 10.06.20 22:16
Olá @davy9526,
Adicione na sua folha de estilo o seguinte código:
Aguardo uma resposta sua,
pedxz.
Adicione na sua folha de estilo o seguinte código:
- Código:
.mainmenu[href="/faq"],
.mainmenu[href="/calendar"] {
display: none;
}
O senhor refere-se ao quê?E tirar esse botões de cima do banner e colocá-los em cima ou em baixo do banner.
Aguardo uma resposta sua,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Customização do Cabeçalho.
por davy9526 11.06.20 18:46
@pedxz
Eu gostaria de aumentar o tamanho dos botões do cabeçalho e com isso colocar eles na parte de cima do banner e não por cima dele. Fazendo com que o banner apareça totalmente.
Eu gostaria de aumentar o tamanho dos botões do cabeçalho e com isso colocar eles na parte de cima do banner e não por cima dele. Fazendo com que o banner apareça totalmente.
davy9526- Novo Membro
- Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14 -
Re: Customização do Cabeçalho.
por tikky 11.06.20 18:54
Adicione na sua folha de estilo, o seguinte código e diga-me se ele soluciona a sua questão:
- Código:
#page-header > .headerbar .navbar {
height: 60px!important;
line-height: 60px!important;
position: fixed!important;
top: 40px!important;
right: 0!important;
left: 0!important;
width: 100%!important;
background-color: #2EA3F2;
z-index: 999;
overflow-y: hidden;
text-align: center;
padding: 0!important;
box-shadow: rgba(0,0,0,0.10) 0 1px 5px;
}
#page-header > .headerbar .navbar li {
margin: 0!important;
}
#page-header > .headerbar .wrap {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Customização do Cabeçalho.
por davy9526 11.06.20 19:20
@Pedxz
É para adicionar isso no overall_header?
É para adicionar isso no overall_header?
davy9526- Novo Membro
- Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14 -
Re: Customização do Cabeçalho.
por tikky 11.06.20 19:22
Na sua folha de estilo, entre no Painel de controle > Visualização > Imagens e Cores > Cores no separador "Folha de estilo CSS"!
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Customização do Cabeçalho.
por davy9526 11.06.20 19:27
@Pedxz não era assim que eu gostaria de deixar o cabeçalho. Perdão por não explicar direito. Vou lhe mostrar um exemplo:
https://pmcem.forumeiros.com/
https://policiactr.forumeiros.com/forum
Algo parecido assim, com os botões mais a vista.
https://pmcem.forumeiros.com/
https://policiactr.forumeiros.com/forum
Algo parecido assim, com os botões mais a vista.
davy9526- Novo Membro
- Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14 -
Re: Customização do Cabeçalho.
por tikky 11.06.20 20:37
Relativamente ao seu segundo exemplo, veja este tópico: Questão resolvida, caso tenha dúvidas diga!
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Customização do Cabeçalho.
por davy9526 13.06.20 0:38
@Chanp
Então, eu fiz isso igual no link que você mandou e aconteceu isso: https://i.imgur.com/PAU01ap.png Poderia me ajudar a reajustar o banner?
Eu gostaria de trocar CSM, por DCO. E trocar a logo ao lado do nome CSM para essa: https://i.servimg.com/u/f54/20/22/40/48/captur11.png
Então, eu fiz isso igual no link que você mandou e aconteceu isso: https://i.imgur.com/PAU01ap.png Poderia me ajudar a reajustar o banner?
Eu gostaria de trocar CSM, por DCO. E trocar a logo ao lado do nome CSM para essa: https://i.servimg.com/u/f54/20/22/40/48/captur11.png
davy9526- Novo Membro
- Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14 -
Re: Customização do Cabeçalho.
por Chanp 13.06.20 1:00
Olá @davy9526,
Provavelmente você acabou cometendo algum erro no momento de copiar os códigos passados na questão resolvida. Portanto, deixarei mais claro neste tópico.
Substitua todo o seu template overall_header por este:
Localize /linkhonra e substitua pelo link que o usuário será direcionado ao clicar no símbolo das Honrarias. Além disso, substitua também LINKfb, LINKdiscord e LINKwhatsapp pelos links das redes sociais (facebook, discord e whatsapp, respectivamente).
Feito isso, remova apenas os códigos relacionados a essa parte do fórum e coloque este no lugar:
A propósito, não há nada escrito com HTML naquele logo. Tanto o grupo da polícia quanto o slogan são uma única imagem. Portanto, coloquei a imagem que você disponibilizou no lugar do logo. Caso não esteja satisfeito e queira alterar, basta procurar o URL da imagem e alterar por outra.
Caso o seu banner não fique na resolução adequada, saiba que é porque o seu banner não está no tamanho exigido pelo header. O tamanho correto é 1350x350, caso queira redimensionar.
Resolve sua questão?
Chanp
Provavelmente você acabou cometendo algum erro no momento de copiar os códigos passados na questão resolvida. Portanto, deixarei mais claro neste tópico.
Substitua todo o seu template overall_header por este:
- Código:
<!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml"
href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script type="text/javascript" src="https://illiweb.com/rs3/44/frm/mentions/tooltipster.js"></script>
<link rel="stylesheet" type="text/css" href="https://illiweb.com/rs3/44/frm/mentions/tooltipster.css" />
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({ switch_ticker.HEIGHT });
switch (tickerDirParam) {
case 'top':
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function () {
$('#fa_ticker_content').css('display', 'block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / { switch_ticker.SIZE });
if (width_max > 0) {
$('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item) {
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert) {
var height_max = h_perso;
$('ul#fa_ticker_content li').each(function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
});
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: { switch_ticker.STOP_TIME },
auto_direction: auto_dir,
scroll: 1,
size: { switch_ticker.SIZE },
height_max: height_max,
animation: { switch_ticker.SPEED }
});
}
else {
$('ul#fa_ticker_content li:not(:first)').css('display', 'none');
$('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
< !--BEGIN switch_enable_pm_popup-- >
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if (pm != null) { pm.focus(); }
< !--END switch_enable_pm_popup-- >
< !--BEGIN switch_report_popup-- >
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if (report != null) { report.focus(); }
< !--END switch_report_popup-- >
< !--BEGIN switch_ticker-- >
$(document).ready(function () {
Ticker.start({
height: { switch_ticker.HEIGHT },
spacing: { switch_ticker.SPACING },
speed: { switch_ticker.SPEED },
direction: '{switch_ticker.DIRECTION}',
pause: { switch_ticker.STOP_TIME }
});
});
< !--END switch_ticker-- >
});
< !--BEGIN switch_login_popup-- >
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = { LOGIN_POPUP_WIDTH }, logInPopUpHeight = { LOGIN_POPUP_HEIGHT }, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready(function () {
$(window).resize(function () {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth / 2 - popupWidth / 2
});
});
});
< !--END switch_login_popup-- >
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer,
div.navbar,
div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside,
ul.linklist li.rightside a.copyright {
display: inline !important;
}
< !-- BEGIN switch_ticker_new -->.jcarousel-skin-tango .jcarousel-item {
text-align: center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {
switch_ticker.SPACING
}
px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {
switch_ticker.SPACING
}
px;
}
< !-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
< !--BEGIN google_analytics_code_bis-- >
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
< !--END google_analytics_code_bis-- >
ga('send', 'pageview');
< !--BEGIN google_analytics_code_bis-- >
ga('bis.send', 'pageview');
< !--END google_analytics_code_bis-- >
ga('set', 'anonymizeIp', true);
< !--BEGIN google_analytics_code_bis-- >
ga('bis.set', 'anonymizeIp', true);
< !--END google_analytics_code_bis-- >
//]]>
</script>
<!-- END google_analytics_code -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese"
rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a
href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<nav class="menu">
<div class="menu-container">
<div class="menu-link-wrapper">
<a class="menu-link" href="/forum" style="color:#5fe0d4;">
<div class="icon forum"></div>
<div class="text">Início</div>
</a>
<a class="menu-link" href="/h1-" style="color:#5fe0d4">
<div class="icon portal"></div>
<div class="text">Portal</div>
</a>
<a class="menu-link" href="/memberlist" style="color:#5fe0d4">
<div class="icon membros"></div>
<div class="text">Membros</div>
</a>
<a class="menu-link" href="/groups" style="color:#5fe0d4">
<div class="icon grupos"></div>
<div class="text">Grupos</div>
</a>
<a class="menu-link" href="/linkhonra" style="color:#5fe0d4">
<div class="icon medalhistas"></div>
<div class="text">Honrarias</div>
</a>
</div>
<a href="/forum">
<div class="menu-logo"></div>
<div class="menu-social">
<a class="social-btn social-facebook" href="LINKfb" target="_blank"><i
class="fab fa-facebook-f"></i></a>
<a class="social-btn social-discord" href="LINKdiscord" target="_blank"><i
class="fab fa-discord"></i></a>
<a class="social-btn social-whatsapp" href="LINKwhatsapp"
target="_blank"><i class="fab fa-whatsapp"></i></a>
</div>
</a>
</div>
</nav>
<div id="page-header">
<div class="headerbar">
<div class="header-box">
<!-- BEGIN switch_user_logged_out -->
<div class="box-title">Área do Usuário</div>
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<input type="text" class="login-inputbox" name="username" placeholder="{L_USERNAME}" required />
<input type="password" class="login-inputbox" name="password" placeholder="{L_PASSWORD}" required />
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} hidden />
<input type="submit" class="login-btn login" name="login" value="{L_LOGIN}" />
<input type="button" class="login-btn register" name="register" value="{L_REGISTER}"
onclick="parent.location='{U_REGISTER}';" />
</form>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="box-title">Olá,
<script>document.write(_userdata.username)</script>
</div>
<div class="box-content">
<a href="/profile?mode=editprofile">Informações</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Preferências</a>
<a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos e Ignorados</a>
</div>
<div class="box-avatar">
<img id="user-avatar" src="" />
<script>document.getElementById('user-avatar').src = "https://www.habbletapi.gq/avatar.php?user=" + _userdata.username + "&action=wav&direction=2&head_direction=3&img_format=png&gesture=sml&headonly=0&size=b";</script>
</div>
<div class="box-logout">
<a href="/login?logout">
<input type="button" class="login-btn logout" name="logout" value="Desconectar" />
</a>
<a href="/privmsg?folder=inbox" id="notify_link" data-status="{PRIVATE_MESSAGE_INFO}"
title="{PRIVATE_MESSAGE_INFO}">
<button type="button" class="login-btn mp" name="mp"></button>
</a>
<a href="/search?search_id=watchsearch" title="Notificações">
<button type="button" class="login-btn notif" name="notif"></button>
</a>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}" {CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Localize /linkhonra e substitua pelo link que o usuário será direcionado ao clicar no símbolo das Honrarias. Além disso, substitua também LINKfb, LINKdiscord e LINKwhatsapp pelos links das redes sociais (facebook, discord e whatsapp, respectivamente).
Feito isso, remova apenas os códigos relacionados a essa parte do fórum e coloque este no lugar:
- Código:
/* Início do Header */
.headerbar {
background-color: #1D262C;
background-image: url(https://i.servimg.com/u/f54/20/22/40/48/banner12.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 350px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
/*--- MENU ---*/
.menu {
width: 100%;
position: fixed;
top: 0;
background-color: rgb(20, 20, 20);
box-shadow: inset rgba(0, 0, 0, 0.20) 0px -2px 0px;
height: 70px;
z-index: 999;
}
.menu .menu-container {
width: 95%;
margin: 0 auto;
}
/*-- Links do menu --*/
.menu .menu-container .menu-link-wrapper {
width: 40%;
float: left;
}
.menu-link-wrapper .menu-link {
background-color: rgba(190, 190, 190, 0.05);
position: relative;
display: inline-block;
margin-right: 6px;
width: 70px;
height: 70px;
cursor: pointer;
}
.menu-link-wrapper .menu-link .icon {
width: 100%;
filter: grayscale(100%);
height: 70px;
background-position: center;
background-repeat: no-repeat;
}
.menu-link-wrapper .menu-link:hover .icon {
filter: grayscale(0%);
}
.menu-link-wrapper .menu-link .icon.forum {
background-image: url(https://i.imgur.com/jitvb34.png);
}
.menu-link-wrapper .menu-link .icon.portal {
background-image: url(https://i.imgur.com/uCeqD77.gif);
}
.menu-link-wrapper .menu-link .icon.membros {
background-image: url(https://i.imgur.com/D5cdIHq.gif);
}
.menu-link-wrapper .menu-link .icon.grupos {
background-image: url(https://i.imgur.com/WjOvImt.gif);
}
.menu-link-wrapper .menu-link .icon.medalhistas {
background-image: url(https://i.imgur.com/VRxDwjs.png);
}
.menu-link-wrapper .menu-link .text {
border: 1px solid #2b2b2b;
border-radius: 4px;
background-color: #212121;
box-shadow: 0 0 2px 1px rgba(255, 255, 255, .3) inset, 0 3px 9px rgba(0, 0, 0, .18);
font-weight: 700;
font-size: 1.3rem;
line-height: 25px;
color: #fff;
position: absolute;
bottom: -30px;
left: -20px;
z-index: 2;
width: 108px;
height: 28px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
opacity: 0;
-webkit-transition: .3s opacity;
-moz-transition: .3s opacity;
transition: .3s opacity;
}
.menu-link-wrapper .menu-link:hover .text {
opacity: 1;
-webkit-transition: .3s opacity;
-moz-transition: .3s opacity;
transition: .3s opacity;
}
.menu-link-wrapper .menu-link .text:after {
position: absolute;
top: -8px;
left: calc(50% - 7px);
content: '';
-webkit-filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.18));
filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.18));
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #464646;
}
/*-- Logo --*/
.menu .menu-container .menu-logo {
background: url(https://i.servimg.com/u/f54/20/22/40/48/captur11.png) no-repeat center center;
float: left;
width: 28%;
height: 70px;
}
/*-- Links das redes sociais --*/
.menu .menu-container .menu-social {
position: absolute;
top: 15px;
right: 10px;
}
.menu-social .social-btn {
box-shadow: inset 0 3px rgba(255, 255, 255, 0.15), inset 0 -3px rgba(0, 0, 0, 0.15), 0 3px rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
line-height: 40px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 20px;
margin-top: 0px;
text-align: center;
color: #FFF;
text-shadow: 0 4px rgba(0, 0, 0, 0.2);
font-size: 18px;
float: left;
padding: 5%;
margin-right: 10px;
}
.menu-social .social-btn.social-facebook {
background-color: rgb(80, 113, 156);
background-image: linear-gradient(to bottom, rgb(80, 113, 156), rgb(55, 80, 115));
}
.menu-social .social-btn.social-facebook:active {
background-image: linear-gradient(to top, rgb(80, 113, 156), rgb(55, 80, 115));
}
.menu-social .social-btn.social-whatsapp {
background-color: rgb(#34af23);
background-image: linear-gradient(to bottom, #34af23, #227317);
}
.menu-social .social-btn.social-whatsapp:active {
background-image: linear-gradient(to top, #34af23, #227317);
}
.menu-social .social-btn.social-discord {
background-color: #23272a;
background-image: linear-gradient(to bottom, #23272a, #2c2f33);
}
.menu-social .social-btn.social-discord:active {
background-image: linear-gradient(to top, #23272a, #2c2f33);
}
/*--- HEADER BOX ---*/
.header-box {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(93, 89, 89, 0.8));
width: 260px;
height: 190px;
border-radius: 10px;
box-shadow: 0 3px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1), inset 0 -3px rgba(0, 0, 0, 0.15);
font-size: 13px;
padding: 5px;
color: #fff;
text-shadow: 0 2px rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 5%;
right: 5%;
}
.header-box .box-title {
font-size: 20px;
text-align: center;
}
.header-box .box-content {
margin: 5px;
}
.box-content a {
display: block;
color: #fff;
}
.box-content a:hover {
text-shadow: 0 0 5px;
}
.header-box .box-avatar {
float: right;
margin-top: -48%;
}
.box-logout {
width: 100%;
}
.login-inputbox {
background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(235, 235, 235));
width: 240px;
height: 40px;
border: none;
border-radius: 8px;
margin: 5px;
padding: 0 15px!important;
font-size: 1em!important;
cursor: auto!important;
box-shadow: inset 0 -3px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.login-inputbox:hover,
.login-inputbox:focus {
border-bottom: none!important;
}
.login-btn {
height: 40px;
border-radius: 8px!important;
margin: 2px;
box-shadow: 0 3px rgba(0, 0, 0, 0.15), inset 0 -3px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.3), 0 0 4px rgba(0, 0, 0, 0.15)!important;
color: #FFF;
text-shadow: 0 2px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
font-weight: 500;
font-size: 1.2rem;
padding: 1px 10px!important;
cursor: pointer!important;
}
.login-btn.login {
background-image: linear-gradient(to bottom, rgb(80, 113, 156), rgb(55, 80, 115));
border: 1px solid rgb(46, 65, 93);
width: 140px!important;
}
.login-btn.login:active {
background-image: linear-gradient(to top, rgb(80, 113, 156), rgb(55, 80, 115));
}
.login-btn.register {
background-image: linear-gradient(to bottom, rgb(113, 208, 43), rgb(77, 141, 29));
border: 1px solid rgb(48, 88, 18);
width: 100px;
}
.login-btn.register:active {
background-image: linear-gradient(to top, rgb(113, 208, 43), rgb(77, 141, 29));
}
.login-btn.logout {
background-image: linear-gradient(to bottom, rgb(207, 72, 46), rgb(144, 50, 32));
border: 1px solid rgb(102, 36, 23);
width: 140px;
margin-top: 0;
}
.login-btn.logout:active {
background-image: linear-gradient(to top, rgb(207, 72, 46), rgb(144, 50, 32));
}
.login-btn.mp,
.login-btn.notif {
width: 48px;
outline: none;
font-size: 15px;
}
.login-btn.mp {
background-image: linear-gradient(to bottom, rgb(255, 165, 0), rgb(179, 116, 0));
border: 1px solid rgb(103, 66, 0);
}
.login-btn.mp:active {
background-image: linear-gradient(to top, rgb(255, 165, 0), rgb(179, 116, 0));
}
.login-btn.mp:before {
content: '\f0e0';
font-family: 'Font Awesome 5 Free';
}
a[data-status*="Nova"] .login-btn.mp:after {
content: '';
width: 7px;
height: 7px;
background-color: red;
border-radius: 50%;
position: absolute;
margin-left: -1%;
margin-top: -.3%;
}
.login-btn.notif {
background-image: linear-gradient(to bottom, rgb(113, 208, 43), rgb(77, 141, 29));
border: 1px solid rgb(48, 88, 18);
}
.login-btn.notif:active {
background-image: linear-gradient(to top, rgb(113, 208, 43), rgb(77, 141, 29));
}
.login-btn.notif:before {
content: '\f0f3';
font-family: 'Font Awesome 5 Free';
}
/* Fim do Header */
A propósito, não há nada escrito com HTML naquele logo. Tanto o grupo da polícia quanto o slogan são uma única imagem. Portanto, coloquei a imagem que você disponibilizou no lugar do logo. Caso não esteja satisfeito e queira alterar, basta procurar o URL da imagem e alterar por outra.
Caso o seu banner não fique na resolução adequada, saiba que é porque o seu banner não está no tamanho exigido pelo header. O tamanho correto é 1350x350, caso queira redimensionar.
Resolve sua questão?
Chanp
Chanp- Super Membro
- Membro desde : 04/01/2018
Mensagens : 1072
Pontos : 1191 -
Re: Customização do Cabeçalho.
por davy9526 13.06.20 16:00
@Chanp
Ficou ótimo! Muito obrigado mesmo! Só que ficou uma coisa que não me agradou, pode me ajudar? Olha imagem.
https://i.servimg.com/u/f54/20/22/40/48/2020-010.jpg
Essa parte teria como modificar, tirar ou algo do tipo? Ficou tapando o cabeçalho.
Ficou ótimo! Muito obrigado mesmo! Só que ficou uma coisa que não me agradou, pode me ajudar? Olha imagem.
https://i.servimg.com/u/f54/20/22/40/48/2020-010.jpg
Essa parte teria como modificar, tirar ou algo do tipo? Ficou tapando o cabeçalho.
davy9526- Novo Membro
- Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14 -
Re: Customização do Cabeçalho.
por tikky 13.06.20 16:43
Vá ao Painel de controle > Módulos > Barra de Ferramentas > Configuração e desative!davy9526 escreveu:Essa parte teria como modificar, tirar ou algo do tipo? Ficou tapando o cabeçalho.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Customização do Cabeçalho.
por Chanp 19.06.20 21:40
Tópico resolvidoTópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão. |
Chanp- Super Membro
- Membro desde : 04/01/2018
Mensagens : 1072
Pontos : 1191 -
Tópicos semelhantes» Customização dos Widgets
» Customização do postbody
» Customizacao de Perfil
» Customização do Quote
» Customização de uma pagina em html
» Customização do postbody
» Customizacao de Perfil
» Customização do Quote
» Customização de uma pagina em html
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos