ArtigosComo criar anúncios rotativos
4 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
Como criar anúncios rotativos
por Rike100 04.01.22 12:07
Detalhes da questão
Endereço do fórum: http://policiadsa.forumeiros.com
Versão do fórum: ModernBB
Descrição
Peguei isso da Polícia RCC(policiarcc.com)
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Re: Como criar anúncios rotativos
por Musashi 04.01.22 12:44
Bom dia @Rike100,
Veja se o seguinte tópico pode salientar sua dúvida em relação sobre o questionamento: https://ajuda.forumeiros.com/t116440-area-de-anuncios?highlight=anúncios#824541
Atenciosamente,
Wusthy.
Veja se o seguinte tópico pode salientar sua dúvida em relação sobre o questionamento: https://ajuda.forumeiros.com/t116440-area-de-anuncios?highlight=anúncios#824541
Atenciosamente,
Wusthy.
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
Re: Como criar anúncios rotativos
por Rike100 06.01.22 12:45
Deu certo, mas quando eu clico para ele ir para o lado ele recarrega a pagina.... e as vezes nem ir para o lado ele vai.
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Re: Como criar anúncios rotativos
por Rike100 06.01.22 12:47
Meu overall_header com o anúncio
- 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" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" />
<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}
<div id="page-header">
<div class="headerbar"></div>
<nav id="main-menu">
<div class="wrap">
<div class="navbar-content">
<ul class="navbar-links">
<a href="/forum"><li><i class="fas fa-home"></i>Início</li></a>
<a href="/groups"><li><i class="fas fa-user-friends"></i>Grupos</li></a>
<a href="/memberlist"><li><i class="fas fa-users"></i>Membros</li></a>
</ul>
<div class="navbar-user">
<div class="is-normal">
<input type="checkbox" href="#" class="user-menu-open" name="user-menu-open" id="user-menu-open" />
<label class="user-menu-open-button" for="user-menu-open">
<div class="avatar">
<!-- BEGIN switch_user_logged_in -->
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbletapi.gq/avatar?user=" + _userdata.username + "&action=std&direction=2&head_direction=2&img_format=png&gesture=std&headonly=0&size=lU' title='Clique para mais opções'/>");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<img src="https://i.imgur.com/D2vHls4.png" />
<!-- END switch_user_logged_out -->
</div>
</label>
<!-- BEGIN switch_user_logged_in -->
<a href="/profile?mode=editprofile" title="Editar o meu perfil" class="user-item blue"><i class="fas fa-user"></i></a>
<a href="/privmsg?folder=inbox" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}" class="user-item green"><i class="fas fa-envelope"></i></a>
<a href="/login?logout=1" title="Fechar sessão" class="user-item red"><i class="fas fa-sign-out-alt"></i></a>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/login" title="Iniciar sessão" class="user-item blue"><i class="fas fa-sign-in-alt"></i></a>
<a href="/register" title="Registrar-se" class="user-item green"><i class="fas fa-user-plus"></i></a>
<a href="/profile?mode=sendpassword" title="Esqueci minha senha" class="user-item red"><i class="fas fa-question"></i></a>
<!-- END switch_user_logged_out -->
</div>
<div class="is-sticky">
<div class="dropdown">
<div class="user-nav">
<span class="username"><!-- BEGIN switch_user_logged_out -->Visitante<!-- END switch_user_logged_out --></span><i class="fas fa-caret-down"></i>
<div class="dropdown-submenu">
<!-- BEGIN switch_user_logged_in -->
<a href="/profile?mode=editprofile">Editar perfil</a>
<a href="/privmsg?folder=inbox" data-status="{PRIVATE_MESSAGE_INFO}">{PRIVATE_MESSAGE_INFO}</a>
<a href="/login?logout=1">Fechar sessão</a>
<script type="text/javascript">
//<![CDATA[
(function ($) {
'use strict';
$('.username').append(_userdata.username);
})(jQuery);
//]]>
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/login">Iniciar sessão</a>
<a href="/register">Registrar-se</a>
<a href="/profile?mode=sendpassword">Esqueci minha senha</a>
<!-- END switch_user_logged_out -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- 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">
<!--Anúncios!-->
<div class="slideshow-container">
<a href="">
<div class="mySlides fade" style="display:block">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 1</div>
</div>
</a>
<a href="">
<div class="mySlides fade" style="display:none">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 2</div>
</div>
</a>
<a href="">
<div class="mySlides fade" style="display:none">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 3</div>
</div>
</a>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center;margin-top:8px">
<span class="dot active" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Re: Como criar anúncios rotativos
por Rike100 06.01.22 12:48
Minha CSS com o anúncio
- Código:
/* IMPORT */
@font-face {
font-family: 'Volter Goldfish';
src: url("https://mundogoph.github.io/fonts/Volter.ttf") format('ttf'),
url("https://mundogoph.github.io/fonts/Volter.woff2") format('woff2'),
url("https://mundogoph.github.io/fonts/Volter.woff") format('woff'),
url("https://mundogoph.github.io/fonts/Volter.svg") format('svg');
font-weight: normal;
font-style: normal;
}
/*** TAGS GENÉRICAS
======================================= ***/
fieldset a:link,
fieldset a:visited,
fieldset a:active { color: #444; }
.postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a { color: #444; font-weight: 500;}
a:link {color: #444;}
.statistics-item a:link, .statistics-item a:visited {
color: #4F793E;}
/**-- Buttons bloqueado --**/
.button1[title*="não pode"] { background-color: #db4928!important; }
.button1[title*="Este Fórum está Bloqueado."]:after { content: "Fórum Bloqueado"; }
.button1[title*="Este Tópico está bloqueado."]:after { content: "Tópico Bloqueado"; }
.button1[title*="não pode"] span { display: none; }
/**-- Checkboxes e Radiobuttons --**/
input[type=checkbox],
input[type=radio] {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: inherit;
width: 1em;
margin: 0;
color: inherit;
outline: none;
font-family: 'Font Awesome 5 Free';
transition: 300ms ease-out;
margin-right: .35em;
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
background-color: transparent;
border: none;
}
input[type=checkbox]::after,
input[type=radio]::after {
content: '\f111';
display: inline-block;
text-align: center;
width: 1em;
}
input[type=checkbox]:checked::after,
input[type=radio]:checked::after {
font-weight: 900;
}
input[type=checkbox]:disabled::after,
input[type=radio]:disabled::after {
color: #909090;
font-weight: 900;
cursor: not-allowed;
}
input[type=checkbox]:active,
input[type=radio]:active {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
input[type=checkbox]:after {
content: '\f0c8';
}
input[type=checkbox]:checked::after {
content: '\f14a';
}
input[type=checkbox]:disabled::after {
content: '\f146';
}
/**-- Codebox, Spoiler e Citar --**/
blockquote {
padding: 8px 16px 8px 10px;
border-radius: 3px;
border-style: solid;
border-width: 0 0 0 6px;
font-size: 14px;
line-height: 1.5;
background-color: transparent;
border-width: 1px 1px 1px 6px;
}
blockquote:before, .codebox:before { display: none!important; }
blockquote cite {
color: rgba(0,0,0,0.44);
margin-bottom: 3px;
}
.codebox {
background-color: #354147!important;
border-color: rgba(0,0,0,0.44)!important;
border-radius: 3px!important;
color: #FFF;
font-size: 14px!important;
line-height: 1.5!important;
padding: 8px 16px 8px 10px!important;
}
.codebox .fa-code-copy-button {
position: absolute;
right: 10px;
top: 8px;
color: #fff;
}
.codebox:not(.spoiler) dt {
font-size: 1.3rem!important;
text-align: left!important;
}
.codebox dt {
color: rgba(255,255,255,0.44)!important;
margin-bottom: 3px!important;
border-bottom: none!important;
}
.spoiler_content .codebox:not(.spoiler) dt {
color: rgba(255,255,255,0.44)!important;
background-color: transparent;
}
.spoiler_content .codebox dt:after { display: none; }
.codebox code {
max-height: 400px!important;
white-space: nowrap!important;
color: #e6e1dc!important;
margin: 0!important;
font-size: 15px!important;
}
.hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute, .hljs-string, .hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote,
.hljs-title, .hljs-attr, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-keyword, .hljs-selector-tag, .hljs-type {
color: #fff!important;
}
.spoiler {
border: none!important;
background-color: transparent!important;
padding: 0!important;
color: #212121;
}
.spoiler dt {
background-color: rgba(0,0,0,0.22);
border-radius: 3px;
padding: 6px 11px;
position: relative;
color: #263238!important;
font-size: 15px!important;
}
.spoiler dt:after, .spoiler_content .spoiler dt:after {
content: "\f104";
font-family: "IonIcons";
line-height: 36px;
pointer-events: none;
position: absolute;
right: 11px;
top: 0;
}
.spoiler_content {
border-left: 3px solid rgba(0,0,0,0.22);
display: none;
margin-top: 6px;
padding-left: 22px!important;
padding-bottom: 20px;
padding: 2px;
}
/**-- Tabelas --**/
#preview .postbody table:not(.info-table),
#preview .postbody td,
div[class*='post--'] .postbody table:not(.info-table),
div[class*='post--'] .postbody td { border: solid 1px #c2c2c2!important; }
#preview .postbody .info-table,
#preview .postbody .info-table td,
div[class*='post--'] .postbody .info-table,
div[class*='post--'] .postbody .info-table td { border: none!important; }
hr { border-top-color: #444; }
.postbody .content table {
border-collapse: collapse;
border: solid 1px #c2c2c2;
text-align: center;
width: -webkit-fill-available;
}
.postbody .content table:not(.info-table) tr {
border-bottom: solid 1px #d0d0d0;
}
.postbody .content table td, .postbody .content table th {
padding: 15px 15px;
border: none;
}
/* USERS & GRUPOS
**===================*/
.rank {
color: #fff;
font-size: 13px;
font-weight: 700;
height: 40px;
line-height: 40px;
margin: 10px auto 0;
width: 200px;
padding: 0 5px;
border-radius: 10px;
border-bottom: 2px solid rgba(0,0,0,0.2);
}
.rank:before {
float: left;
width: 40px;
height: 40px;
line-height: 40px;
left: 5px;
background-color: rgba(255,255,255,0.2);
text-align: center;
font-size: 15px;
color: #fff;
font-family: 'Font Awesome 5 Free';
}
/* Ranks Administrativos*/
.rank.supr{background-image: linear-gradient(124deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);background-size: 1800% 1800%;animation: rainbow 5s linear infinite;}
.rank.supr:before{content: "\f521";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.adm{background-image: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);background-size: 1800% 1800%;animation: rainbow 6s ease infinite;}
.rank.adm:before{content: "\f085";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.cor{background-image: linear-gradient(to right, #666666, #5c5c5c, #525252, #484848, #3f3f3f, #373737, #2f2f2f, #282828, #202020, #181818, #0e0e0e, #000000);}
.rank.cor:before{content: "\f0e3";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.goe{background: linear-gradient(to right, #000000 0%, #4b0303 100%); color:#0b0c0d;}
.rank.goe:before{content: "\f714";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.coman{background: linear-gradient(to right, #000000 0%, #4b0303 100%); color:#AD1818;}
.rank.coman:before{content: "\f714";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.dsn{background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);background-size: 1800% 1800%;animation: rainbow 10s ease infinite;}
.rank.dsn:before{content: "\f121";margin-right: 5px;font-family: "Font Awesome 5 Free";}
@keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;}}
.rank.crh{background-image: linear-gradient(to right, #00bf9f, #14b8a0, #24b1a0, #31a99f, #3da29d, #3ea7a2, #3eaca7, #3fb1ac, #33c4b9, #24d8c4, #12ebce, #04ffd5);}
.rank.crh:before{content: "\f2c2";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.p2{background-image: linear-gradient(to right, #000000, #004002, #040038, #a98a01, #115000);color: #fff09c;background-size: 1800% 1800%;animation: rainbow 6s linear infinite;}
.rank.p2:before {content: "\f21b";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.srp{background-image: linear-gradient(to left, #a0b8b5, #879a97, #6f7d7a, #57615f, #414645);}
.rank.srp:before {content: "\f274";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.dir{background: linear-gradient(to left, #000000, #0f9b0f);}
.rank.dir:before {content: "\f24e";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.cpos{background: linear-gradient(to right, #858A8A 0%, #858A8A 74%);}
.rank.cpos:before {content: "\f02d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.cad{background: linear-gradient(to right, #1e130c, #9a8478);}
.rank.cad:before{content: "\f0b1";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.exo{background-color: #000000; color: #e20303}
.rank.exo:before{content: "\f714";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.exo:after{content: "\f714";margin-left: 5px;font-family: "Font Awesome 5 Free";}
.rank.aud{background-image: radial-gradient(circle, #00731F, #00731F, #00C735, #00731F, #00731F);}
.rank.aud:before {content: "\f201";margin-right: 5px;font-family: "Font Awesome 5 Free";}
/*Ranks Companhia */
.rank.emav{background-image: radial-gradient(circle, #00731F, #00731F, #00C735, #00731F, #00731F);}
.rank.emav:before {content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.unam{background-image: radial-gradient(circle, #120F3B, #120F3B, #0A0094, #120F3B, #120F3B);}
.rank.unam:before {content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.untm{background-image: radial-gradient(circle, #661E1E, #661E1E, #E30000, #661E1E, #661E1E);}
.rank.untm:before {content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
/*Ranks dos Usuários*/
.rank.mbr{background-color:#78866b}
.rank.mbr:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.ldr{background: linear-gradient(to right, #009688 0%, #7986CB 100%);}
.rank.ldr:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.ref{background: linear-gradient(to right, #ccab04 0%, #904e00 100%);}
.rank.ref:before{content: "\f5a2";margin-right: 5px;font-family: "Font Awesome 5 Free";}
/*Ranks de Centrais*/
.rank.ct{background-color: #de0000;}
.rank.ct:before{content: "\f501";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.ca{background-color: #04064a;}
.rank.ca:before{content: "\f501";margin-right: 5px;font-family: "Font Awesome 5 Free";}
/*PERSONALIZAÇÃO DE LEGENDA E GRUPOS*/
a[style*="#0000A1"], span[style*="#0000A1"] {
background: repeating-linear-gradient(124deg,#000000,#273e73,#1e88e5,#ffffff,#1de840,#1ddde8,#2b1de8,#dd00f3,#dd00f3);
-webkit-background-clip: text;
background-size: 1800% 1800%;
-webkit-text-fill-color: transparent;
animation: rainbow 3s ease infinite;
}
div [style*="#0000A1"]::before {
font-family: "Font Awesome 5 Free";
content:'\f521';
margin-right: 3px;
font-weight: 1000;
font-size: 12px;
}
a[style*="#4C0082"], span[style*="#4C0082"] {
background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);
-webkit-background-clip: text;
background-size: 1800% 1800%;
-webkit-text-fill-color: transparent;
animation: rainbow 3s ease infinite;
}
div [style*="#4C0082"]::before {
font-family: "Font Awesome 5 Free";
content:'\f505';
margin-right: 3px;
font-weight: 1000;
font-size: 12px;
}
a[style*="#0A0A0A"], span[style*="#0A0A0A"] {
font-weight: bold;
}
div [style*="#0A0A0A"]::before {
font-family: "Font Awesome 5 Free";
content:'\f0e3';
color: #0A0A0A;
margin-right: 3px;
font-weight: 1000;
font-size: 12px;
}
a[style*="#629975"], span[style*="#629975"] {
background: repeating-linear-gradient(128deg, #000000, #0f9b0f);
background-size: 1800% 1800%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow 3s ease-in-out infinite;
}
div [style*="#629975"]::before {
font-family: "Font Awesome 5 Free";
content:'\f24e';
color: #629975;
margin-right: 3px;
font-weight: 1000;
font-size: 12px;
}
a[style*="#6A8A00"], span[style*="#6A8A00"] {
background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);
-webkit-background-clip: text;
background-size: 1800% 1800%;
-webkit-text-fill-color: transparent;
animation: rainbow 3s ease infinite;
}
div [style*="#6A8A00"]::before {
font-family: "Font Awesome 5 Free";
content:'\f21b';
margin-right: 3px;
font-weight: 1000;
font-size: 12px;
}
div [style*="#AD1818"]::before {
font-family: "Font Awesome 5 Free";
content:'\f6b7';
color:#AD1818;
margin-right: 3px;
font-weight: 1000;
font-size: 12px;
}
a[style*="#00BF9F"], span[style*="#00BF9F"] {
font-weight: bold;
}
div [style*="#00BF9F"]::before {
font-family: "Font Awesome 5 Free";
content:'\f2bb';
color:#00BF9F;
margin-right: 3px;
font-weight: 1000;
font-size: 12px;
}
a[style*="#E30000"], span[style*="#E30000"] {
font-weight: bold;
}
div [style*="#E30000"]::before {
font-family: "Font Awesome 5 Free";
content:'\f19d';
color:#E30000;
margin-right: 3px;
font-weight: 1000;
font-size: 12px;
}
a[style*="#02730A"], span[style*="#02730A"] {
font-weight: bold;
}
div [style*="#02730A"]::before {
font-family: "Font Awesome 5 Free";
content:'\f19d';
color: #02730A;
margin-right: 3px;
font-weight: 1000;
font-size: 13px;
}
a[style*="#0A0094"], span[style*="#0A0094"] {
font-weight: bold;
}
div [style*="#0A0094"]::before {
font-family: "Font Awesome 5 Free";
content:'\f19d';
color: #0A0094;
margin-right: 3px;
font-weight: 1000;
font-size: 13px;
}
a[style*="#A4C290"], span[style*="#A4C290"] {
font-weight: bold;
}
div [style*="#A4C290"]::before {
font-family: "Font Awesome 5 Free";
content:'\f19d';
color: #A4C290;
margin-right: 3px;
font-weight: 1000;
font-size: 13px;
}
/*LEG COLOR - USUARIOS*/
a[href="/u66"] {
font-weight: bold;
color: #fb11c9!important;
}
/*** HEADER
======================================= ***/
/*.headerbar {
background-size: initial;
}*/
#main-menu {
position: relative;
background-color: #2c353b;
-webkit-box-shadow: 0 -3px rgba(0, 0, 0, 0.23), 0 3px rgba(0, 0, 0, 0.078);
box-shadow: 0 -3px rgba(0, 0, 0, 0.23), 0 3px rgba(0, 0, 0, 0.078);
color: #fff;
text-align: center;
height: 50px;
}
#main-menu.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.navbar-links {
width: 100%;
padding: 0 2%;
}
.navbar-links a li {
float: left;
list-style: none;
font-size: 14px;
font-weight: 400;
padding: 14px;
color: #FFF;
}
.navbar-links a li:hover {
box-shadow: inset 0px -2px 0 #fff;
background-color: rgba(0,0,0,.2);
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
.navbar-links a li i { margin-right: 5px; }
.navbar-user {
position: absolute;
right: 50px;
}
.navbar-user .is-normal {
position: absolute;
top: -15px;
right: 20px;
}
.navbar-user .is-normal .user-menu-open { display: none!important; }
.navbar-user .is-normal .avatar {
position: relative;
width: 80px;
height: 80px;
margin-right: 10px;
background-image: url(https://i.imgur.com/xt57fuH.jpg);
padding: 7px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 2px 3px rgba(0,0,0,0.8), 0 0 2px rgb(0,0,0);
border: none;
z-index: 1;
}
.navbar-user .is-normal .avatar img {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
position: absolute;
left: 15px;
width: auto;
top: 10px;
}
.is-normal .user-item {
background: #EEEEEE;
border-radius: 100%;
width: 50px;
height: 50px;
margin-left: -40px;
position: absolute;
color: #FFFFFF!important;
text-align: center;
font-size: 20px;
padding-top: 14px;
-webkit-transform: translate3d(5px, -65px, 0);
transform: translate3d(5px, -65px, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.is-normal .user-item:hover { background-color: #FFF!important; }
.is-normal .user-menu-open:checked ~ .user-item:nth-child(3) {
transition-duration: 180ms;
-webkit-transition-duration: 180ms;
-webkit-transform: translate3d(-55px, -135px, 0);
transform: translate3d(-55px, -135px, 0);
}
.is-normal .user-menu-open:checked ~ .user-item:nth-child(4) {
transition-duration: 280ms;
-webkit-transition-duration: 280ms;
-webkit-transform: translate3d(5px, -135px, 0);
transform: translate3d(5px, -135px, 0);
}
.is-normal .user-menu-open:checked ~ .user-item:nth-child(5) {
transition-duration: 380ms;
-webkit-transition-duration: 380ms;
-webkit-transform: translate3d(65px, -135px, 0);
transform: translate3d(65px, -135px, 0);
}
.is-normal .user-item.blue {
background-color: #669AE1;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.is-normal .user-item.blue:hover {
color: #669AE1!important;
text-shadow: none;
}
.is-normal .user-item.green {
background-color: #70CC72;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.is-normal .user-item.green:hover {
color: #70CC72!important;
text-shadow: none;
}
.is-normal .user-item.red {
background-color: #FE4365;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.is-normal .user-item.red:hover {
color: #FE4365!important;
text-shadow: none;
}
.user-item[data-status*="Nova"]:after {
content: '';
width: 7px;
height: 7px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 25%;
right: 20%;
}
.user-nav {
background-color: rgba(0,0,0,.3);
position: relative;
width: auto;
min-width: 160px;
font-size: 15px;
height: 50px;
padding: 13px;
cursor: pointer;
}
.user-nav:hover { background-color: rgba(0,0,0,.5); }
.user-nav i { margin-left: 7px; }
.dropdown-submenu {
width: 100%;
text-align: center;
position: absolute;
left: 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
border-radius: 0 0 3px 3px;
font-size: 14px;
font-weight: 300;
padding: 10px 0;
cursor: pointer;
margin-top: 14px;
background-color: #2c353b;
}
.dropdown-submenu a {
color: #fff;
font-size: 1.4rem;
display: block;
padding: 5px;
}
.dropdown-submenu a:hover { background-color: rgba(0,0,0,.3); }
.user-nav > .dropdown-submenu { display: none; }
.user-nav:hover > .dropdown-submenu { display: block; }
/*** CONTEÚDO
======================================= ***/
.panel a, #privmsgs-menu a { color: #444; }
#wrap {background-color: rgba(148, 143, 143, 0.08); }
/**
* Design das categorias e fóruns:
*/
.forabg, .forumbg {
background-color: transparent;
background-image: none;
box-shadow: none;
margin-bottom: 10px;
}
.forabg.hidden { background-color: transparent; }
.forumbg.announcement { margin-bottom: 2%; }
.forabg.hidden .header {
background-color: rgba(0,0,0,0.3);
border-radius: 3px;
}
.header .icon .dterm { width: 100%; }
.table-title h2 {
margin-left: 7px;
font-size: 2rem!important;
}
.btn-collapse {
left: 18px;
right: auto;
}
ul.topiclist.forums { background-color: transparent; }
li.row {
border: none;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
li.row:hover { background-color: #fff; }
.topiclist > .row > .icon { margin-bottom: 1%; }
.row > .icon > .dterm .topics {
font-size: 1.3rem;
color: rgba(0,0,0,0.55);
margin: 5px 0;
background-color: rgba(0,0,0,0.05);
padding: 3px 7px;
width: auto;
display: inline-block;
border-radius: 3px;
}
ul.forums dl.icon dd.dterm > div { margin-left: 30px!important; }
ul.topics .row dd.dterm {
padding-left: 30px;
padding-top: 15px;
}
a.forumtitle { font-size: 1.75rem; }
a.topictitle { font-size: 1.6rem; }
.forabg a:link,
.forabg a:visited,
.forumbg a:link,
.forumbg a:visited { color: #4F793E!important; }
.forum-desc br { display: none; }
dd.lastpost { float: right!important; }
.lastpost-avatar { padding: 5px 10px 5px 0; }
.lastpost-avatar img {
height: 50px;
width: 50px;
}
.lastpost-avatar:after {
height: 50px;
top: 5px;
width: 50px;
}
.lastpost .color-groups { float: none!important; }
.lastpost-info {
position: absolute;
top: 15px;
}
/*-- Forum Header --*/
.sub-header-info { width: 100%; }
h1.page-title {
display: block;
font-size: 30px;
font-weight: 400;
margin: 0 0 16px;
}
.sub-header-path {
background-color: #263238;
border-radius: 3px;
clear: both;
color: #fff;
display: inline-block;
font-size: 0;
margin-bottom: 22px;
max-width: 100%;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.sub-header-path a {
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 13px;
padding: 9px 16px;
position: relative;
}
.sub-header-path a:first-child { padding: 9px 16px!important; }
.sub-header-path a + a { margin-left: 0; }
.sub-header-path a + a:before {
font-size: 16px;
left: 0;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate3d(-50%,-50%,0);
}
.sub-header-path a:hover { background-color: rgba(0,0,0,0.44); }
.sub-header-path a:last-child:after {
bottom: 0;
box-shadow: 0 0 11px 16px #263238;
content: "";
display: block;
position: absolute;
right: -5px;
top: 0;
transition: all .16s ease;
width: 5px;
}
.sub-header-path a:hover:after {
-ms-filter: brightness(50%);
-webkit-filter: brightness(50%);
filter: brightness(50%);
}
/*---- estilo do header de mensagem privada, etc.***/
li.header dd, li.header dt {
color: #212121;
margin-left: 7px;
font-size: 2rem!important;
font-weight: 0px!important;
}
/*---- Sem posts no tópico ----*/
.topiclist > .row > .icon { position: relative; }
.lastpost > span > a:empty { pointer-events: none; }
.lastpost > span > a:empty:before {
content: "Não existem tópicos disponiveis para visualizar!";
color: #999;
font-style: italic;
transform: translate(0, 90%);
position: absolute;
}
/**
* Usuários no fórum:
*/
.users-in-forum { margin-top: 2%; }
.users-in-forum br { display: none; }
/**
* Design dos tópicos:
*/
.online:before { display: none; }
.profile-icons { padding-top: 5px!important; }
.profile-icons a {
background-color: rgba(0,0,0,.7);
border-radius: 3px;
color: #fff;
cursor: pointer;
padding: 6px 12px;
font-size: 14px;
height: auto;
transition: .2s ease;
}
.profile-icons a:hover { background-color: #3793ff; }
.postprofile {
border: 1px solid #f0f0f0;
border-top: 0;
border-left-width: 7px;
border-radius: 3px 0 0 3px;
width: 250px;
}
.postprofile:before {
content: url(http://habboemotion.com/resources/images/icons/offline.gif);
left: 5px;
position: absolute;
top: 5px;
}
.online .postprofile:before { content: url(http://habboemotion.com/resources/images/icons/online.gif); }
.postprofile-name {
font-size: 16px;
margin-top: 5%;
}
.postprofile-avatar { margin: 10px 0; }
.postprofile-avatar img {
border-radius: 0;
height: auto;
width: 160px;
}
.postprofile-rank {
border: none;
margin-bottom: 0;
padding-bottom: 0;
}
.postprofile-info {
border-top: 1px solid #ddd;
padding-top: 5%;
}
.postbody {
margin-left: 250px;
position: relative;
}
.postbody .content { margin-top: 5%; }
.topic-date {
background-color: #f5f5f5;
border-radius: 0 3px 0 0;
overflow: hidden;
padding: 8px 25px!important;
opacity: 1!important;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.topic-date span {
color: rgba(0,0,0,.44);
display: block;
float: left;
font-size: 13px;
padding-top: 5px;
}
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Re: Como criar anúncios rotativos
por Rike100 06.01.22 12:49
Continuação da CSS...
- Código:
.topic-actions .right a img:hover { opacity: .8; }
.page-title a:hover,
.topic-actions a:hover,
.right-box a:hover {
color: #fff;
text-shadow: 0 2px 2px rgba(0,0,0,0.5);
transition: ease all .2s;
}
.quickreply .h3 { display: none; }
.avatartopiclux {
width: 128px;
height: 220px;
margin: 20px 0 0 -55px;
}
/*** ESTATÍSTICAS
======================================= ***/
.block { background-color: #fff; }
.block a:link,
.block a:visited {
color: #444;
}
.block .h3 {
font-size: 20px;
border: none;
}
.block .h3 i {
height: 28px;
line-height: 30px;
margin-right: 10px;
color: #4F793E;
}
.stats-tabs br { display: none; }
.stats-tabs section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #abc;
}
.stats-tabs input { display: none; }
.stats-tabs label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #abc;
border: 1px solid transparent;
}
.stats-tabs label:before {
font-family: "Font Awesome 5 Free";
margin-right: 10px;
}
.stats-tabs label[for*='1']:before { content: '\f0c0'; }
.stats-tabs label[for*='2']:before { content: '\f1fd'; }
.stats-tabs label[for*='3']:before { content: '\f187'; }
.stats-tabs label:hover {
color: #789;
cursor: pointer;
}
.stats-tabs input:checked + label {
color: #4F793E;
border: 1px solid #abc;
border-top: 2px solid #4F793E;
border-bottom: 1px solid #fff;
}
.stats-tabs #tab1:checked ~ #content1,
.stats-tabs #tab2:checked ~ #content2,
.stats-tabs #tab3:checked ~ #content3 { display: block; }
@media screen and (max-width: 800px) {
.stats-tabs label {
font-size: 0;
}
.stats-tabs label:before {
margin: 0;
font-size: 18px;
}
}
@media screen and (max-width: 500px) {
.stats-tabs label {
padding: 15px;
}
}
.block .legend { font-size: 0px; }
.block .legend b a {
font-size: 13px;
font-weight: 600;
}
.block .legend b a::after {
content: ", ";
font-weight: 400;
color: #000;
}
.block .legend b:last-child a::after { content: ""; }
/*** PERFIL DE USUÁRIO
======================================= ***/
#profile-advanced-layout #tabs {
bottom: 0;
position: absolute;
}
#tabs ul {
margin: 0;
padding: 0;
list-style-position: outside;
list-style-type: none;
padding: 0 1.8em;
white-space: nowrap;
}
#tabs ul li { display: inline-block; }
#tabs ul a {
background-color: #fff;
line-height: 2em;
}
#tabs ul .activetab a,
#tabs ul a:hover {
color: #444;
border-left: 1px solid #c5c5c5;
border-right: 1px solid #c5c5c5;
box-shadow: inset 0px -2px 1px green;
border-bottom-color: transparent;
}
#tabs ul a:hover span { color: #444; }
/*** FOOTER
======================================= ***/
#page-footer {
background-color: #141414;
box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
min-height: 60px;
width: 100%;
border: none;
}
.footerbar-system { padding: 20px 0 0; }
.footerbar-system .rightside { font-size: 0; }
.footerbar-system a, .footerbar-user a {
font-size: 14px;
color: #d8d8d8;
margin-right: 25px;
}
.footerbar-system a:hover, .footerbar-user a:hover { color: #fff; }
.linklist .rightside { text-align: right; }
.fa-footer,
.fa-footer * {
box-sizing: border-box;
}
.fa-footer {
background-color: #212529;
font-family: "Segoe UI", "Open Sans", "Helvetica Neue", "Ubuntu", "Helvetica", "Arial", "Trebuchet MS", sans-serif;
font-size: 14px;
color: #a0a8b0;
line-height: 1.5;
}
/** Tags Genéricas: */
.fa-footer a {
text-decoration: none;
color: #fff;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
transition: 0.3s all;
}
.fa-footer a:hover { color: #4F793E; }
/**
* Sistema de Grid e ajustes das colunas genéricas:
*/
.fa-footer .fa-footer-row {
display: flex;
flex-direction: row;
padding: 0 15px;
}
.fa-footer .fa-footer-row .fa-footer-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 30px;
padding: 15px 0;
}
.fa-footer .fa-footer-row .fa-footer-col:last-child {
margin-right: 10px;
}
.fa-footer .fa-footer-row .fa-footer-col .lead {
text-transform: uppercase;
font-size: 16px;
color: #4F793E;
margin-bottom: 10px;
}
.fa-footer .fa-footer-row .fa-footer-col p {
font-size: 14px;
line-height: 1.6;
text-align: center;
}
/**
* Ajustes para a a coluna primária:
*/
.fa-footer .fa-footer-row .fa-primary-footer-col {
border-right: solid 1px #2a2e32;
position: relative;
flex-grow: 1;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo {
display: flex;
justify-content: center;
align-items: center;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo img {
width: 205px;
margin: 0 30px;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-social {
margin: 18px 0 5px 0;
display: flex;
width: 100%;
justify-content: space-around;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-social a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 37px;
height: 37px;
border-bottom: none;
border-radius: 100px;
box-shadow: none;
border: solid 1px #4F793E;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-social a:hover {
color: #fff;
background-color: #4F793E;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top {
position: absolute;
right: -20px;
bottom: -20px;
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #212529;
border: solid 1px #2a2e32;
color: #4F793E;
font-size: 23px;
border-radius: 20px;
z-index: 3;
box-shadow: 1px 1px 2px rgba(11, 13, 15, 0.84);
cursor: pointer;
transition: all 100ms linear;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top .fa {
margin-top: -3px;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top:hover {
background-color: #4F793E;
color: #fff;
}
/**
* Atribuição final:
*/
.fa-footer .fa-footer-attr {
text-align: center;
padding: 20px;
font-size: 16px;
border-top: solid 1px #2a2e32;
background-color: #24282b;
}
/**
* Ajustes para o footer do FA:
*/
#page-footer {
background-color: #212529;
border-top: solid 1px #2a2e32;
border-bottom: solid 1px #2a2e32;
}
.statistics {
box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.37);
}
/**
* Responsive:
*/
@media screen and (max-width: 1000px) {
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo img {
margin: 0px;
}
}
@media screen and (max-width: 850px) {
.fa-footer .fa-footer-row {
flex-wrap: wrap;
}
.fa-footer .fa-footer-row .fa-primary-footer-col {
border-right: none;
}
}
.admin-link {
position: fixed;
bottom: 20px;
right: 10px;
z-index: 999;
}
.admin-link a {
padding: 10px;
background-color: #4F793E;
border-radius: 3px;
transition: .2s ease;
color: #fff;
font-size: 13px;
}
.admin-link a:hover { background-color: #38562c; }
.admin-link br { display: none; }
/*Mod Tools*/
.success a, .information a, .warn a, .alert a, .custom a, .dev a, .jrevo a, .admin a, .aud a{color: #ecf0f1!important;text-decoration: underline!important;}
.success {/*color: #270;*/background-color: #00a300;}
.success tr::before {content: '\F058 ';font-family: "FontAwesome";}
.alert {/*color: #9F6000;*/background-color: #ffc40d;}
.alert tr::before {content: '\F071 ';font-family: FontAwesome;}
.warn {/*color: #D8000C;*/background-color: #e54d42;}
.warn tr::before {content: '\F057 ';font-family: FontAwesome;}
.information {/*color: #059;*/background-color: #3a99d9;}
.information tr::before {content: '\F05a ';font-family: FontAwesome;}
.custom {background-color: #2C3E50;}
.custom tr::before {content: '\F069 ';font-family: FontAwesome;}
.dev {background-color: #3296FA;}
.dev tr:before {content: '\F121 ';font-family: FontAwesome;}
.admin {background-color: #00468c;}
.admin tr::before {content: '\f013 ';font-family: FontAwesome;}
.info-table.dev {background: linear-gradient(to right, #000000, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #c0c0c0, #FFFFFF);background-size: 1800% 1800%;animation: rainbow 10s ease infinite;}
.info-table.admin {background-image: radial-gradient(circle, #ff0000, #db0a10, #b71317, #941719, #711919);background-size: 1800% 1800%;animation: rainbow 6s ease infinite;}
.mod_groups {
line-height: 1.5;
font-size: 11px;
font-weight: 400;
}
.mod_editor_section {
background: #eceff1;
padding: 5px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.copyright_e {
font-size: 9px;
color: black;
}
.mod_editor_message {
padding: 2px 5px;
text-align: left;
}
.mod_groups {
height: 150px;
overflow-y: scroll;
}
.mod_groups li {
list-style-type: none;
}
/*SCEDITOR*/
.sceditor-button-staff { position: relative;}
.mod_box {
top: 73px;
-moz-background-clip: padding;
background: #fafafa;
background-clip: padding-box;
border: 1px solid #eee;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
color: #666;
width: 200px;
line-height: 1;
position: absolute;
}
#quick_reply .mod_box {
top: 35px;
}
.sceditor-button-staff.disabled div {
opacity: 1.0 !important;
filter: alpha(opacity=100) !important;
}
.sceditor-button, .sceditor-button div {
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
.sceditor-button {position: relative;}
a.sceditor-button {padding: .7em;}
.sceditor-button * {
text-indent: initial!important;
color: #333!important;
line-height: 15px!important;
}
.sceditor-button div {
font-size: 0px!important;
background-image: none!important;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sceditor-button div:before {
font-size: 15px!important;
font-family: FontAwesome;
text-indent: initial!important;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 500!important;
}
.sceditor-button-bold div:before {content: "\f032";}
.sceditor-button-italic div:before {content: "\f033";}
.sceditor-button-underline div:before {content: "\f0cd";}
.sceditor-button-strike div:before {content: "\f0cc";}
.sceditor-button-left div:before {content: "\f036";}
.sceditor-button-center div:before {content: "\f037";}
.sceditor-button-right div:before {content: "\f038";}
.sceditor-button-justify div:before {content: "\f039";}
.sceditor-button-bulletlist div:before {content: "\f0ca";}
.sceditor-button-orderedlist div:before {content: "\f0cb";}
.sceditor-button-horizontalrule div:before {content: "\f068";}
.sceditor-button-quote div:before {content: "\f10d";}
.sceditor-button-code div:before {content: "\f1c9";}
.sceditor-button-faspoiler div:before {content: "\f146";}
.sceditor-button-fahide div:before {content: "\f070";}
.sceditor-button-table div:before {content: "\f0ce";}
.sceditor-button-servimg div:before {content: "\f03e";}
.sceditor-button-image div:before {content: "\f1c5";}
.sceditor-button-link div:before {content: "\f0c1";}
.sceditor-button-youtube div:before {content: "\f166";}
.sceditor-button-dailymotion {display: none;}
.sceditor-button-flash div:before {content: "\f008";}
.sceditor-button-headers div:before {content: "\f1dc";}
.sceditor-button-size div:before {content: "\f034";}
.sceditor-button-color div:before {content: "\f1fc";}
.sceditor-button-font div:before {content: "\f031";}
.sceditor-button-removeformat div:before {content: "\f12d";}
.sceditor-button-more div:before {content: "\f067";}
.sceditor-button-subscript div:before {content: "\f12c";}
.sceditor-button-superscript div:before {content: "\f12b";}
.sceditor-button-fascroll div:before {content: "\f060";}
.sceditor-button-faupdown div:before {content: "\f062";}
.sceditor-button-farand div:before {content: "\f074";}
.sceditor-button-date div:before {content: "\f133";}
.sceditor-button-time div:before {content: "\f017";}
.sceditor-button-pastetext div:before {content: "\f0ea";}
.sceditor-button-source div:before {content: "\f016";}
.sceditor-button-dailymotion div:before {content: "\f03d";}
.sceditor-button-staff div:before {content: "\f132"; color: #C0392B;}
.success, .information, .warn, .alert, .custom, .dev, .jrevo, .admin, .audi {
width: 95%;
height: auto;
padding: 1.4em;
margin: 1em;
/*border: 2px solid;*/
text-align: left;
border-radius: 2px;
font-weight: 300;
color: white;
}
.stat-card {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
color: #444;
font-size: 0;
float: left;
height: 75px;
padding: 15px;
width: 23%;
margin-right: 34px;
text-align: right;
}
.stat-card:last-child { margin-right: 0; }
.stat-card title-stat {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-card strong {
font-size: 25px;
font-weight: 900;
letter-spacing: -1px;
color: #02730A
}
.stat-card i {
float: left;
font-size: 40px;
color: #02730A;
margin-top: -13px;
margin-bottom: -30px;
}
/* [!] DESTAQUES SEMANAIS [!] */
#ds-rank {
width: 100%;
position: relative;
z-index: 10;
background: #ddd0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
#ds-rank .base-ranking { margin: 50px 10px 30px 10px; width: 315px; }
#ds-rank .base-ranking .topo-ranking {
width: 100%;
height: 140px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
box-shadow: inset -2px -2px 0 rgba(255,255,255,.2),inset 2px 2px 0 rgba(255,255,255,.2);
display: flex;
flex-direction: column;
background-color: #668690;
}
#ds-rank .base-ranking .topo-ranking .icon-texto {
display: flex;
margin: 0 15px;
margin-top: -30px;
}
#ds-rank .base-ranking .topo-ranking .icon-texto .icon {
width: 64px;
height: 60px;
background-color: #f1f1f1;
background-position: center;
background-repeat: no-repeat;
border-radius: 6px;
display: flex;
margin-right: 12px;
position: relative;
box-shadow: 1px 0 0 rgba(0,0,0,.15),-1px 0 0 rgba(0,0,0,.15),0 -1px 0 rgba(0,0,0,.15),0 1px 0 rgba(0,0,0,.15),inset -2px -2px 0 #fff,inset 2px 2px 0 #fff;
}
#ds-rank .base-ranking.pres .topo-ranking .icon-texto .icon { background-image: url(https://imgur.com/ttRVOsE.gif); }
#ds-rank .base-ranking.curso .topo-ranking .icon-texto .icon { background-image: url(https://imgur.com/TRCDfHd.gif); }
#ds-rank .base-ranking.cmdt .topo-ranking .icon-texto .icon { background-image: url(https://imgur.com/8n7MwFM.gif); }
#ds-rank .base-ranking.equipe .topo-ranking .icon-texto .icon { background-image: url(https://i.imgur.com/hiAtcjr.png); }
#ds-rank .base-ranking .topo-ranking .icon-texto .icon::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent #fff;
right: -6px;
top: 26px;
z-index: 1;
}
#ds-rank .base-ranking .topo-ranking .icon-texto .icon::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent rgba(0,0,0,.15);
right: -7.75px;
top: 25px;
}
#ds-rank .base-ranking .topo-ranking .icon-texto .texto {
width: 243px;
height: 60px;
border-radius: 6px;
background: #f1f1f1;
flex: 1;
text-indent: 15px;
box-shadow: 1px 0 0 rgba(0,0,0,.15),-1px 0 0 rgba(0,0,0,.15),0 -1px 0 rgba(0,0,0,.15),0 1px 0 rgba(0,0,0,.15),inset -2px -2px 0 #fff,inset 2px 2px 0 #fff;
}
#ds-rank .base-ranking .topo-ranking .icon-texto .texto .titulo {
font-size: 14px;
font-weight: 700;
margin-top: 12px;
}
#ds-rank .base-ranking .topo-ranking .icon-texto .texto .desc {
font-size: 12px;
color: #8b8b8b;
}
#ds-rank .base-ranking .topo-ranking .based-palco {
display: flex;
flex: 1;
}
#ds-rank .base-ranking .topo-ranking .based-palco .palco {
background: url(https://i.imgur.com/3ZzpYYd.png);
width: 77px;
height: 44px;
float: left;
margin-left: 11px;
margin-top: 70px;
}
#ds-rank .base-ranking .topo-ranking .based-palco .palco .user {
position: absolute;
width: 64px;
height: 110px;
margin-left: 4px;
margin-top: -82px;
}
#ds-rank .base-ranking .topo-ranking .info {
flex: 1;
margin: 14px;
position: relative;
font-style: initial;
}
#ds-rank .base-ranking .topo-ranking .info .user {
width: 100%;
height: 40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: #f1f1f1;
float: left;
font-weight: 700;
display: flex;
align-items: center;
position: relative;
font-size: 14px;
box-shadow: 1px 0 0 rgba(0,0,0,.15),-1px 0 0 rgba(0,0,0,.15),0 -1px 0 rgba(0,0,0,.15),0 1px 0 rgba(0,0,0,.15),inset -2px -2px 0 #fff,inset 2px 2px 0 #fff;
}
#ds-rank .base-ranking .topo-ranking .info .user::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 5px 4px 0;
border-color: transparent #fff transparent transparent;
z-index: 1;
left: -5px;
}
#ds-rank .base-ranking .topo-ranking .info .user .ordem {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 6px;
border: 1px solid #c5a31a;
box-shadow: inset -2px -2px 0 rgba(255,255,255,.2),inset 2px 2px 0 rgba(255,255,255,.2);
background: #e8c01e;
font-size: 12px;
float: left;
margin: 0 7px;
}
#ds-rank .base-ranking .topo-ranking .info .qnt {
width: 100%;
height: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: flex;
align-items: center;
font-size: 13px;
color: #f5f5f5;
box-shadow: inset -2px -2px 0 rgba(255,255,255,.2),inset 2px 2px 0 rgba(255,255,255,.2);
background-color: #add8e6;
}
#ds-rank .base-ranking .topo-ranking .info .qnt img {
margin: 0 8px;
}
#ds-rank .base-ranking .topo-ranking .info .qnt b {
margin-right: 2px;
}
#ds-rank .base-ranking .base-usuarios {
width: 100%;
display: grid;
grid-template-rows: repeat(4,1fr);
position: relative;
z-index: -1;
overflow: hidden;
background: #f1f1f1;
}
#ds-rank .base-ranking .base-usuarios .usuario {
width: 100%;
height: 40px;
display: flex;
margin-top: -1px;
background: #f1f1f1;
box-shadow: 1px 0 0 rgba(0,0,0,.15),-1px 0 0 rgba(0,0,0,.15),0 -1px 0 rgba(0,0,0,.15),0 1px 0 rgba(0,0,0,.15),inset -2px -2px 0 #fff,inset 2px 2px 0 #fff;
}
#ds-rank .base-ranking .base-usuarios .usuario .ordem {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 14px;
box-shadow: inset -2px -2px 0 rgb(255,255,255,.2),inset 2px 2px 0 rgba(255,255,255,.2);
background: #404040;
border: 1px solid #000;
}
#ds-rank .base-ranking .base-usuarios .usuario:first-child .ordem {
background: #bebebe;
border: 1px solid #8c8a8a;
box-shadow: inset -2px -2px 0 rgba(255,255,255,.3),inset 2px 2px 0 rgba(255,255,255,.3);
}
#ds-rank .base-ranking .base-usuarios .usuario:nth-child(2) .ordem {
background: #8b7665;
border: 1px solid #4d4138;
box-shadow: inset -2px -2px 0 rgba(255,255,255,.2),inset 2px 2px 0 rgba(255,255,255,.3);
}
#ds-rank .base-ranking .base-usuarios .usuario .img-user {
width: 40px;
height: 42px;
background-color: #e9e6e6;
border: 1px solid #cbc9c9;
box-shadow: inset -2px -2px 0 rgba(255,255,255,.5),inset 2px 2px 0 rgba(255,255,255,.5);
background-position: center;
background-repeat: no-repeat;
margin-top: -1px;
}
#ds-rank .base-ranking .base-usuarios .usuario .nome {
font-size: 13px;
font-weight: 700;
height: 40px;
display: flex;
align-items: center;
padding-left: 10px;
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#ds-rank .base-ranking .base-usuarios .usuario .qnt {
width: 97px;
height: 40px;
box-shadow: inset -2px -2px 0 rgba(255,255,255,.3),inset 2px 2px 0 rgba(255,255,255,.3);
float: right;
display: flex;
align-items: center;
font-size: 13px;
color: #fff;
font-weight: 700;
justify-content: flex-start;
padding: 0 14px;
background: #034e9e;
border: 1px solid #003670;
}
#ds-rank .base-ranking .base-usuarios .usuario .qnt img {
margin-right: 8px;
}
#ds-rank .base-final {
width: 100%;
height: 20px;
background-color: #f1f1f1;
float: left;
background-position: center;
background-repeat: no-repeat;
box-shadow: 1px 0 0 rgba(0,0,0,.15),-1px 0 0 rgba(0,0,0,.15),0 -1px 0 rgba(0,0,0,.15),0 1px 0 rgba(0,0,0,.15),inset -2px -2px 0 #fff,inset 2px 2px 0 #fff;
border-radius: 0 0 6px 6px;
margin-top: -1px;
}
/*[!]MILITARES DESTAQUES - PALCO[!]*/
.user.one {
background: url("https://www.habbo.com.br/habbo-imaging/avatar/hr-3163-40.hd-190-10.ch-3077-73-1408.lg-285-73.sh-300-1408.wa-2007.cc-3186-1424%2Cs-0.g-1.d-2.h-2.a-0%2C7508bcd3b5d9917bc75becd4d1ca1ebc.png");
}
.user.two {
background: url("https://www.habbo.com.br/habbo-imaging/avatar/hr-3163-40.hd-190-10.ch-3077-73-1408.lg-285-73.sh-300-1408.wa-2007.cc-3186-1424%2Cs-0.g-1.d-2.h-2.a-0%2C7508bcd3b5d9917bc75becd4d1ca1ebc.png");
}
.user.three {
background: url("https://www.habbo.com.br/habbo-imaging/avatar/hr-3163-40.hd-190-10.ch-3077-73-1408.lg-285-73.sh-300-1408.wa-2007.cc-3186-1424%2Cs-0.g-1.d-2.h-2.a-0%2C7508bcd3b5d9917bc75becd4d1ca1ebc.png");
}
/*[!] EXPOSIÇÃO DOS EMBLEMAS [!]*/
/*---- Emblemas ----*/
#field_id2 br { display:none; }
#field_id2 div[alt], .postprofile-info div[alt] {
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
border-radius: 3px;
display: inline-block;
height: 45px;
margin-top: 5px;
margin-right: 6px;
position: relative;
width: 45px;
}
#field_id2 div[alt]:before, .postprofile-info div[alt]:before {
content: attr(alt);
position: absolute;
top: -60%;
left: 50%;
white-space: nowrap;
transform: translate(-50%);
background-color: rgba(0,0,0,0.9);
color: #fff;
padding: 0 10px;
border-radius: 3px;
user-select: none;
pointer-events: none;
opacity: 0;
line-height: 24px;
transition: 250ms opacity;
z-index:998!important;
}
#field_id2 div[alt]:after, .postprofile-info div[alt]: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-top: 8px solid rgba(0,0,0,0.9);
opacity: 0;
transition: 250ms opacity;
z-index:998!important;
}
#field_id2 div[alt]:hover:before,
.postprofile-info div[alt]:hover:before,
#field_id2 div[alt]:hover:after,
.postprofile-info div[alt]:hover:after { opacity: 1; }
.postprofile-info div[alt] + br { display: none; }
.postprofile-info .label { margin-bottom: 10px; }
.show-more-em {
padding: 9px 16px;
background-color: #263238;
border-radius: 3px;
font-size: 14px;
color: #fff!important;
font-weight: 600;
}
.show-more-em:hover { background-color: rgba(0,0,0,0.44); }
/** Anúncios **/
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
width: 100%;
position: relative;
margin: auto;
height: 205px;
overflow:hidden;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
color: #fff;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
background-color: rgba(0,0,0,.5);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Re: Como criar anúncios rotativos
por Musashi 06.01.22 12:54
Atenção!Você não pode postar mensagens consecutivas ou UP's antes de se completarem 24 horas desde a sua última mensagem em um tópico. Por este motivo, pedimos que leia as regras do Setor de Suporte e as regras do Fórum dos Fóruns para não cometer novos erros. |
Caso queira informar sua folha de estilo (CSS), tente anexar em um site que consiga analisar sua folha de estilo sem haver interferência na hora do acesso. Além de evitar fazer UP consecutivos, o que não é permitido de acordo com as regras do forumeiros.
Estarei vendo sobre isto para o mesmo da melhor forma possível.
Atenciosamente,
Wusthy.
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Re: Como criar anúncios rotativos
por Musashi 08.01.22 22:52
Boa noite @Rike100,
Modifique seu overall_header para o seguinte código:
Atenciosamente,
Wusthy.
Modifique seu overall_header para o seguinte código:
- 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" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" />
<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}
<div id="page-header">
<div class="headerbar"></div>
<nav id="main-menu">
<div class="wrap">
<div class="navbar-content">
<ul class="navbar-links">
<a href="/forum"><li><i class="fas fa-home"></i>Início</li></a>
<a href="/groups"><li><i class="fas fa-user-friends"></i>Grupos</li></a>
<a href="/memberlist"><li><i class="fas fa-users"></i>Membros</li></a>
</ul>
<div class="navbar-user">
<div class="is-normal">
<input type="checkbox" href="#" class="user-menu-open" name="user-menu-open" id="user-menu-open" />
<label class="user-menu-open-button" for="user-menu-open">
<div class="avatar">
<!-- BEGIN switch_user_logged_in -->
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbletapi.gq/avatar?user=" + _userdata.username + "&action=std&direction=2&head_direction=2&img_format=png&gesture=std&headonly=0&size=lU' title='Clique para mais opções'/>");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<img src="https://i.imgur.com/D2vHls4.png" />
<!-- END switch_user_logged_out -->
</div>
</label>
<!-- BEGIN switch_user_logged_in -->
<a href="/profile?mode=editprofile" title="Editar o meu perfil" class="user-item blue"><i class="fas fa-user"></i></a>
<a href="/privmsg?folder=inbox" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}" class="user-item green"><i class="fas fa-envelope"></i></a>
<a href="/login?logout=1" title="Fechar sessão" class="user-item red"><i class="fas fa-sign-out-alt"></i></a>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/login" title="Iniciar sessão" class="user-item blue"><i class="fas fa-sign-in-alt"></i></a>
<a href="/register" title="Registrar-se" class="user-item green"><i class="fas fa-user-plus"></i></a>
<a href="/profile?mode=sendpassword" title="Esqueci minha senha" class="user-item red"><i class="fas fa-question"></i></a>
<!-- END switch_user_logged_out -->
</div>
<div class="is-sticky">
<div class="dropdown">
<div class="user-nav">
<span class="username"><!-- BEGIN switch_user_logged_out -->Visitante<!-- END switch_user_logged_out --></span><i class="fas fa-caret-down"></i>
<div class="dropdown-submenu">
<!-- BEGIN switch_user_logged_in -->
<a href="/profile?mode=editprofile">Editar perfil</a>
<a href="/privmsg?folder=inbox" data-status="{PRIVATE_MESSAGE_INFO}">{PRIVATE_MESSAGE_INFO}</a>
<a href="/login?logout=1">Fechar sessão</a>
<script type="text/javascript">
//<![CDATA[
(function ($) {
'use strict';
$('.username').append(_userdata.username);
})(jQuery);
//]]>
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/login">Iniciar sessão</a>
<a href="/register">Registrar-se</a>
<a href="/profile?mode=sendpassword">Esqueci minha senha</a>
<!-- END switch_user_logged_out -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- 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">
<!--Anúncios!-->
<div class="slideshow-container">
<a href="">
<div class="mySlides fade" style="display:block">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 1</div>
</div>
</a>
<a href="">
<div class="mySlides fade" style="display:none">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 2</div>
</div>
</a>
<a href="">
<div class="mySlides fade" style="display:none">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 3</div>
</div>
</a>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center;margin-top:8px">
<span class="dot active" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
Atenciosamente,
Wusthy.
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
Re: Como criar anúncios rotativos
por Rike100 09.01.22 16:08
Quando eu clico ele redireciona ao fórum... Teria como tirar isso de clicar e redirecionar?
E teria como por para ele passar sozinho e não só clicando no botão?
E teria como por para ele passar sozinho e não só clicando no botão?
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Re: Como criar anúncios rotativos
por Mpezin 12.01.22 19:31
Olá @Rike100 , como vai?
Altere seu overall_header para:
Feito isso, para definir a url para qual as imagens irão redirecionar, basta você alterar esta parte (clique aqui para ver o tutorial) para a url que o senhor deseja. Ou deixá-la em branca: "", com isto, as imagens redirecionarão para a página inicial de seu fórum.
Aguardo retorno,
Mpezin
Altere seu overall_header para:
- 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" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" />
<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}
<div id="page-header">
<div class="headerbar"></div>
<nav id="main-menu">
<div class="wrap">
<div class="navbar-content">
<ul class="navbar-links">
<a href="/forum"><li><i class="fas fa-home"></i>Início</li></a>
<a href="/groups"><li><i class="fas fa-user-friends"></i>Grupos</li></a>
<a href="/memberlist"><li><i class="fas fa-users"></i>Membros</li></a>
</ul>
<div class="navbar-user">
<div class="is-normal">
<input type="checkbox" href="#" class="user-menu-open" name="user-menu-open" id="user-menu-open" />
<label class="user-menu-open-button" for="user-menu-open">
<div class="avatar">
<!-- BEGIN switch_user_logged_in -->
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbletapi.gq/avatar?user=" + _userdata.username + "&action=std&direction=2&head_direction=2&img_format=png&gesture=std&headonly=0&size=lU' title='Clique para mais opções'/>");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<img src="https://i.imgur.com/D2vHls4.png" />
<!-- END switch_user_logged_out -->
</div>
</label>
<!-- BEGIN switch_user_logged_in -->
<a href="/profile?mode=editprofile" title="Editar o meu perfil" class="user-item blue"><i class="fas fa-user"></i></a>
<a href="/privmsg?folder=inbox" data-status="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}" class="user-item green"><i class="fas fa-envelope"></i></a>
<a href="/login?logout=1" title="Fechar sessão" class="user-item red"><i class="fas fa-sign-out-alt"></i></a>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/login" title="Iniciar sessão" class="user-item blue"><i class="fas fa-sign-in-alt"></i></a>
<a href="/register" title="Registrar-se" class="user-item green"><i class="fas fa-user-plus"></i></a>
<a href="/profile?mode=sendpassword" title="Esqueci minha senha" class="user-item red"><i class="fas fa-question"></i></a>
<!-- END switch_user_logged_out -->
</div>
<div class="is-sticky">
<div class="dropdown">
<div class="user-nav">
<span class="username"><!-- BEGIN switch_user_logged_out -->Visitante<!-- END switch_user_logged_out --></span><i class="fas fa-caret-down"></i>
<div class="dropdown-submenu">
<!-- BEGIN switch_user_logged_in -->
<a href="/profile?mode=editprofile">Editar perfil</a>
<a href="/privmsg?folder=inbox" data-status="{PRIVATE_MESSAGE_INFO}">{PRIVATE_MESSAGE_INFO}</a>
<a href="/login?logout=1">Fechar sessão</a>
<script type="text/javascript">
//<![CDATA[
(function ($) {
'use strict';
$('.username').append(_userdata.username);
})(jQuery);
//]]>
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/login">Iniciar sessão</a>
<a href="/register">Registrar-se</a>
<a href="/profile?mode=sendpassword">Esqueci minha senha</a>
<!-- END switch_user_logged_out -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- 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">
<!--Anúncios!-->
<div class="slideshow-container">
<a href="">
<div class="mySlides fade" style="display:block">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 1</div>
</div>
</a>
<a href="">
<div class="mySlides fade" style="display:none">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 2</div>
</div>
</a>
<a href="">
<div class="mySlides fade" style="display:none">
<img src="https://images.habbo.com/habbo-web/america/pt/assets/images/app_summary_image-1200x628.85a9f5dc.png" style="width:100%">
<div class="text">Anúncio 3</div>
</div>
</a>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<script>
var sliderController = {
slides: null,
currentSlide: null,
sliderTimes: [],
nextSlide: function() {
if (this.currentSlide >= this.slides.length - 1) {
this.currentSlide = -1;
}
this.currentSlide++;
this.displaySlide();
},
previousSlide: function() {
if (this.currentSlide <= 0) {
this.currentSlide = this.slides.length;
}
this.currentSlide--;
this.displaySlide();
},
hideAllSlides: function() {
var len = this.slides.length;
for (var i = 0; i < len; i++) {
this.slides[i].style.display = "none";
}
},
displaySlide: function() {
var cv = this;
this.clearTimeOuts();
this.sliderTimes.push(setTimeout(function(){ cv.nextSlide(); }, 5000));
this.hideAllSlides();
this.slides[this.currentSlide].style.display = "block";
},
clearTimeOuts: function() {
for (var i = 0; i < this.sliderTimes.length; i++) {
clearTimeout(this.sliderTimes[i]);
}
},
init: function() {
this.slides = document.getElementsByClassName('mySlides');
if (this.slides === null || this.slides === undefined) {
return;
}
if (!(this.slides.length > 0)) {
return;
}
this.currentSlide = 0;
var cv = this;
setTimeout(function(){ cv.nextSlide(); }, 5000);
}
};
sliderController.init();
</script>
Feito isso, para definir a url para qual as imagens irão redirecionar, basta você alterar esta parte (clique aqui para ver o tutorial) para a url que o senhor deseja. Ou deixá-la em branca: "", com isto, as imagens redirecionarão para a página inicial de seu fórum.
Aguardo retorno,
Mpezin
Mpezin- ***
- Membro desde : 28/05/2020
Mensagens : 186
Pontos : 173 -
Rike100- *
- Membro desde : 20/06/2020
Mensagens : 47
Pontos : 84 -
Re: Como criar anúncios rotativos
por tikky 13.01.22 13:20
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Tópicos semelhantes» Como criar anúncios rotativos?
» Anúncios rotativos
» Anúncios rotativos
» Anúncios rotativos
» Anúncios rotativos
» Anúncios rotativos
» Anúncios rotativos
» Anúncios rotativos
» Anúncios rotativos
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