ArtigosWidgets Fixos na lateral do fórum
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Widgets Fixos na lateral do fórum
por Karol Marinho 28.03.16 7:52
Detalhes da questão
Endereço do fórum: http://portalhf.forumeiros.com/
Versão do fórum: PhpBB3
Descrição
Olá, Boa noite!
Gostaria de saber se há maneira de deixar alguns dos meus widgets fixos, tais como estes, na imagem abaixo.
- Spoiler:
Fórum em que vi o efeito:
Última edição por Karol Marinho em 01.04.16 23:37, editado 1 vez(es)
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Maori- Membro
- Membro desde : 08/06/2014
Mensagens : 521
Pontos : 702 -
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 31.03.16 21:42
Mas gostaria que ficasse fixo na tela, sem nem subir ou descer, como nesse fórum :/
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Re: Widgets Fixos na lateral do fórum
por Key of Destiny 31.03.16 22:18
E aí, menina? Tudo joia?
Na verdade eles são e não são widgets, pois foram criados a partir de um código inserido no template. Há sim como colocar essa função, mas primeiro você precisa me dizer se quer continuar mesmo depois dessa informação. Caso a resposta seja afirmativa, vou precisar de algumas informações particulares sobre a estética. Quais "widgets" queres*, qual vai ser a personalização geral deles, etc... E, além disso, vou precisar do seu template overall_header.
Aguardo sua resposta.
*Obs: acredito que, pra não precisar de uma barra de rolagem/scrolling, você deve escolher no máximo 4 (sendo um deles suficientemente pequeno). Lembrando que mesmo se tiver a barra, posso personalizá-la também.
Na verdade eles são e não são widgets, pois foram criados a partir de um código inserido no template. Há sim como colocar essa função, mas primeiro você precisa me dizer se quer continuar mesmo depois dessa informação. Caso a resposta seja afirmativa, vou precisar de algumas informações particulares sobre a estética. Quais "widgets" queres*, qual vai ser a personalização geral deles, etc... E, além disso, vou precisar do seu template overall_header.
Aguardo sua resposta.
*Obs: acredito que, pra não precisar de uma barra de rolagem/scrolling, você deve escolher no máximo 4 (sendo um deles suficientemente pequeno). Lembrando que mesmo se tiver a barra, posso personalizá-la também.
Key of Destiny- ****
- Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 31.03.16 22:34
Olá, @Key of Destiny xD obrigado por me ajudar.
1- Eu gostaria daquele primeiro campo com um espaço para texto, pode até ser menor que o original.
2- O segundo eu gostaria que fosse uma caixinha de like para a página do facebook [ essa página ], daquelas simples, pode até ser menor que esse exemplo, tendo apenas o nome da página e o botão de curtir/compartilhar:
3- Pode também ser um menu com links, se possível cinco.
Eis aqui o meu template Overrall_Header:
Quanto à personalização como título dos widgets, links e etc, poderia apenas me apontar onde eu posso alterá-los, pois te poupo dao menos desse trabalho T..T
E muito, muito, muiito obrigado por me ajudar !! xD
1- Eu gostaria daquele primeiro campo com um espaço para texto, pode até ser menor que o original.
2- O segundo eu gostaria que fosse uma caixinha de like para a página do facebook [ essa página ], daquelas simples, pode até ser menor que esse exemplo, tendo apenas o nome da página e o botão de curtir/compartilhar:
- Spoiler:
3- Pode também ser um menu com links, se possível cinco.
Eis aqui o meu template Overrall_Header:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="http://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="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/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;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(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[
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
_gaq.push(["_trackPageview"]);
_gaq.push(['_trackPageLoadTime']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body id="phpbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/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="http://{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>
{LOGIN_POPUP_MSG}
<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 -->
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<div id="logo-desc">
<a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
<!-- BEGIN switch_h1 -->
<div id="site-title">{switch_h1.MAIN_SITENAME}</div>
<!-- END switch_h1 -->
<!-- BEGIN switch_desc -->
<p>{switch_desc.SITE_DESCRIPTION}</p>
<!-- END switch_desc -->
</div>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
<!-- BEGIN switch_search_box -->
<div id="search-box">
<form method="get" action="{ACTION_SEARCH}" id="search">
<p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
{JS_SESSION_ID_INPUT}
<input class="button2" type="submit" value="{L_SEARCH}" /></p>
</form>
</div>
<!-- END switch_search_box -->
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<span class="corners-top"><span></span></span>
<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>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<span class="corners-top"><span></span></span>
<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>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</div>
<!-- END switch_ticker -->
</div>
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<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="main">
<div id="main-content">
Quanto à personalização como título dos widgets, links e etc, poderia apenas me apontar onde eu posso alterá-los, pois te poupo dao menos desse trabalho T..T
E muito, muito, muiito obrigado por me ajudar !! xD
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Re: Widgets Fixos na lateral do fórum
por Key of Destiny 01.04.16 2:00
Não tem de quê.
Vou me esforçar pra deixar um texto bem explicado pra que você possa editar a seu gosto sem ter muitos empecilhos. Então vamos começar do princípio.
Essa função vai acarretar em duas mudanças na estrutura do seu fórum: retirar os widgets e puxar o seu fórum um pouco para o lado direito. A primeira já era prevista, portanto vou explicar somente a última. Se eu deixasse a função ativa sem fazer esse novo posicionamento, a barra dos widgets ficariam em cima do conteúdo do seu fórum. Pra que nada disso aconteça, coloquei um código a mais no CSS que resolverá essa pedra no meio do caminho.
Agora vamos pro template. Eu fiz o código base, o resto é com você. O código está estruturado com a barra principal (fakewidget) mais as secundárias (fakewidgetX). Não se preocupe em entender os nomes, pois vou deixar ao lado o que cada um modifica no seu fórum. Acredito que você não tenha passado o template completo, então vou ter de especificar onde você vai adicionar. Abaixo de <title>{SITENAME_TITLE}{PAGE_TITLE}</title>, coloque o seguinte código:
Veja que os espaços em caps lock dizem o que cada uma das classes faz. Nos espaços de TABELA e FACEBOOK, você vai colocar os códigos dos widgets que já estão no seu fórum: a box do facebook e a tabela com links para acesso rápido.
Agora vamos pra parte do CSS. Você vai precisar adicionar 6 códigos no total e de preferência no topo de sua folha de estilo.
Eu recomendo que você altere apenas os que eu coloquei em letra maiúscula, para evitar alguns problemas. E é importante ressaltar que você deve manter os ponto e vírgula ( mesmo com alteração.
Acho que era isso. Se tiver alguma dúvida ou problema sobre o assunto, não hesite em questionar.
Vou me esforçar pra deixar um texto bem explicado pra que você possa editar a seu gosto sem ter muitos empecilhos. Então vamos começar do princípio.
Essa função vai acarretar em duas mudanças na estrutura do seu fórum: retirar os widgets e puxar o seu fórum um pouco para o lado direito. A primeira já era prevista, portanto vou explicar somente a última. Se eu deixasse a função ativa sem fazer esse novo posicionamento, a barra dos widgets ficariam em cima do conteúdo do seu fórum. Pra que nada disso aconteça, coloquei um código a mais no CSS que resolverá essa pedra no meio do caminho.
Agora vamos pro template. Eu fiz o código base, o resto é com você. O código está estruturado com a barra principal (fakewidget) mais as secundárias (fakewidgetX). Não se preocupe em entender os nomes, pois vou deixar ao lado o que cada um modifica no seu fórum. Acredito que você não tenha passado o template completo, então vou ter de especificar onde você vai adicionar. Abaixo de <title>{SITENAME_TITLE}{PAGE_TITLE}</title>, coloque o seguinte código:
- Código:
<div class="fakewidget"><div class="fakewidget1">TÍTULO</div><div class="fakewidget2">TEXTO</div><div class="fakewidget3">TABELA</div><div class="fakewidget 4">FACEBOOK</div></div>
Veja que os espaços em caps lock dizem o que cada uma das classes faz. Nos espaços de TABELA e FACEBOOK, você vai colocar os códigos dos widgets que já estão no seu fórum: a box do facebook e a tabela com links para acesso rápido.
Agora vamos pra parte do CSS. Você vai precisar adicionar 6 códigos no total e de preferência no topo de sua folha de estilo.
- Código:
div.conteneur_minwidth_IE {
width: 84%;
margin-left: 200px;
overflow: hidden;
}
.fakewidget {
width: 210px;
height: 100%
background-image: url(http://i.imgur.com/LWctYXj.png);
border-right: 3px solid gold;
margin-top: -10px;
padding: 15px;
position: fixed;
}
.fakewidget1 {
width: 200px;
height: 40px;
font-family: FONTE QUE QUISER;
font-size: TAMANHO DO TEXTO;
color: COR DO TEXTO;
text-shadow: 0 0 5px black;
text-align: center;
margin-top: 8px;
margin-bottom: 40px;
}
.fakewidget2 {
width: 200px;
height: 120px;
background-color: COR DE FUNDO;
border: LARGURA solid COR;
font-family: FONTE QUE QUISER;
font-size: TAMANHO DO TEXTO;
color: COR DO TEXTO;
text-align: justify;
margin: 3px;
overflow: auto;
}
.fakewidget3 {
width: 200px;
}
.fakewidget4 {
width: 200px;
}
Eu recomendo que você altere apenas os que eu coloquei em letra maiúscula, para evitar alguns problemas. E é importante ressaltar que você deve manter os ponto e vírgula (
mesmo com alteração.Acho que era isso. Se tiver alguma dúvida ou problema sobre o assunto, não hesite em questionar.
Key of Destiny- ****
- Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 01.04.16 3:16
Uuuf, me desculpe a demora, eu estava ali tomando uma surra desses códigos >-< kkkkkkk
Bem, eu coloquei todo mundo no lugar, e tentei improvisar um menu de links rápidos, além da caixa de facebook, but... não deu muito certo :c
Veja na imagem...
A borda dourada está... desalinhada(?). Tentei consertar, e só piorei a coisa, então voltei pro seu código.
A imagem de background não está funcionando... veja, está transparente :c
E tem como dar um espaçamento maior entre esses "widgets"? Estão todos muito juntinhos.
Esse é o template com os seus códigos:
Esse é o seu código para colocar no template com as minhas modificações:
Essa é a minha CSS:
Bem, eu coloquei todo mundo no lugar, e tentei improvisar um menu de links rápidos, além da caixa de facebook, but... não deu muito certo :c
Veja na imagem...
A borda dourada está... desalinhada(?). Tentei consertar, e só piorei a coisa, então voltei pro seu código.
A imagem de background não está funcionando... veja, está transparente :c
E tem como dar um espaçamento maior entre esses "widgets"? Estão todos muito juntinhos.
Esse é o template com os seus códigos:
- 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>
<div class="fakewidget"><div class="fakewidget1">Portal HF</div><div class="fakewidget2">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO </div><div class="fakewidget3"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Vertical</title>
<style type="text/css">
<!--
ul#menu {
width:200px;
border:1px solid #003399;
background:#FADE8B;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #A4A0F5;
}
ul#menu li a:link, ul#menu li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
color:#5E0F50;
border-left:10px solid #EEC591;
padding-left:5px;
}
ul#menu li a:hover {
background-color: #FFE4B5;
color:#DAA520;
border-left:10px solid #FFD39B;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Início</a></li>
<li><a href="#">História</a></li>
<li><a href="#">Filosofia</a></li>
<li><a href="#">Literatura</a></li>
<li><a href="#">Mitologia</a></li>
</ul>
</body>
</html></div><div class="fakewidget 4"><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/sdk.js#xfbml=1&version=v2.4&appId=155593491120034";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/Hist%C3%B3ria-Filosofia-112321165504758/" data-width="150" data-height="70" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/História-Filosofia-112321165504758/"><a href="https://www.facebook.com/História-Filosofia-112321165504758/">Portal HF.com</a></blockquote></div></div></div></div>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="http://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="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/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;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(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[
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
_gaq.push(["_trackPageview"]);
_gaq.push(['_trackPageLoadTime']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body id="phpbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/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="http://{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>
{LOGIN_POPUP_MSG}
<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 -->
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<div id="logo-desc">
<a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
<!-- BEGIN switch_h1 -->
<div id="site-title">{switch_h1.MAIN_SITENAME}</div>
<!-- END switch_h1 -->
<!-- BEGIN switch_desc -->
<p>{switch_desc.SITE_DESCRIPTION}</p>
<!-- END switch_desc -->
</div>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
<!-- BEGIN switch_search_box -->
<div id="search-box">
<form method="get" action="{ACTION_SEARCH}" id="search">
<p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
{JS_SESSION_ID_INPUT}
<input class="button2" type="submit" value="{L_SEARCH}" /></p>
</form>
</div>
<!-- END switch_search_box -->
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<span class="corners-top"><span></span></span>
<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>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<span class="corners-top"><span></span></span>
<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>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</div>
<!-- END switch_ticker -->
</div>
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<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="main">
<div id="main-content">
Esse é o seu código para colocar no template com as minhas modificações:
- Código:
<div class="fakewidget"><div class="fakewidget1">Portal HF</div><div class="fakewidget2">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO </div><div class="fakewidget3"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Vertical</title>
<style type="text/css">
<!--
ul#menu {
width:200px;
border:1px solid #003399;
background:#FADE8B;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #A4A0F5;
}
ul#menu li a:link, ul#menu li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
color:#5E0F50;
border-left:10px solid #EEC591;
padding-left:5px;
}
ul#menu li a:hover {
background-color: #FFE4B5;
color:#DAA520;
border-left:10px solid #FFD39B;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Início</a></li>
<li><a href="#">História</a></li>
<li><a href="#">Filosofia</a></li>
<li><a href="#">Literatura</a></li>
<li><a href="#">Mitologia</a></li>
</ul>
</body>
</html></div><div class="fakewidget 4"><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/sdk.js#xfbml=1&version=v2.4&appId=155593491120034";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/Hist%C3%B3ria-Filosofia-112321165504758/" data-width="150" data-height="70" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/História-Filosofia-112321165504758/"><a href="https://www.facebook.com/História-Filosofia-112321165504758/">Portal HF.com</a></blockquote></div></div></div></div>
Essa é a minha CSS:
- Código:
/************FONTES****************/
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url('http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
@font-face {
font-family: 'Wire One';
font-style: normal;
font-weight: 400;
src: local('Wire One'), local('WireOne'), url(http://themes.googleusercontent.com/static/fonts/wireone/v3/fas9dl2wmMkt5rCu-aBez_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face { font-family: "sueellen"; src: url('http://themes.googleusercontent.com/static/fonts/sueellenfrancisco/v2/TwHX4vSxMUnJUdEz1JIgrrtXaZAN_aGv07JTA91X2HI.woff'); }
@font-face { font-family: "caviardreams"; src: url('http://static.tumblr.com/4yxykdm/xXTlrecqr/caviardreams.ttf'); }
/************FIM DAS FONTES****************/
/***widgets fixos***/
div.conteneur_minwidth_IE {
width: 84%;
margin-left: 200px;
overflow: hidden;
}
.fakewidget {
width: 210px;
height: 100%
background-image: url(http://i.imgur.com/LWctYXj.png);
border-right: 3px solid gold;
margin-top: -10px;
padding: 15px;
position: fixed;
}
.fakewidget1 {
width: 200px;
height: 40px;
font-family: Wire One;
font-size: 50px;
color: #18404f;
text-shadow: 0 0 5px black;
text-align: center;
margin-top: 8px;
margin-bottom: 40px;
}
.fakewidget2 {
width: 200px;
height: 120px;
background-color: #080303;
border: 2px solid #120707;
font-family: Wire One;
font-size: 12px;
color: #628c9c;
text-align: justify;
margin: 3px;
overflow: auto;
}
.fakewidget3 {
width: 200px;
}
.fakewidget4 {
width: 200px;
}
/***fim***/
/*** menu widget***/
ul#menu {
width:200px;
background:#363636;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #9C9C9C;
border-right:5px solid #828282;
}
ul#menu li a:link, ul#menu1 li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
color:#FFA500;
border-left:8px solid #696969;
padding-left:5px;
}
ul#menu li a:hover {
background-color:#696969;
color:#DAA520;
border-left:8px solid #828282;
}
/***FIM MENU WIDGET***/
a.mainmenu {
background-color:
transparent;
padding: 7px;
margin-top: 30px!important;
margin-right: -8px !important;
font-weight: 400!important;
font-family: helvetica,Serif !important;
font-size: 11px;
color:
#A1A1A1;
width: 880px;
text-transform: uppercase;
border-bottom: 3px solid
#628B9B;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
a.mainmenu:hover {
background-color:
transparent;
padding: 7px;
margin-top: 30px!important;
margin-right: -8px !important;
font-weight: 400!important;
font-family: helvetica,Serif !important;
font-size: 11px;
color:transparent;
text-shadow: 0px 0px 1px #A1A1A1;
width: 880px;
text-transform: uppercase;
border-bottom: 3px solid
#628B9B;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#wrap {
border: 4px solid #;
box-shadow: 0 0 10px 2px #000000;
}
p {
overflow: auto;
max-height: 300px;
display: block;
margin: auto;
text-transform: uppercase;
font-size: 9px;
}
.table-title h2 {
color: #BDBDBD;
text-shadow: 1px 1px 1px #000000;
font-family: amatic sc;
font-size: 32px;
letter-spacing: 4px;
font-style: normal;
text-transform: uppercase;
}
ul.forums {
background: #030303;
margin-top:-0px;
background-repeat: repeat-yes;
border-radius: 0px 0px 0px 0px;
border-bottom: 8px solid #628B9B;
box-shadow:0px 2px 8px #000000;
}
.desc9 {
border-bottom:10px solid #070303;
border-right: 10px solid #070303;
border-radius: 100px 0px 0px 100px;
background-color:#120707;
background-repeat: repeat;
text-transform:uppercase;
color: #565656;
font-family:arial;
display: block;
font-size: 9.5px;
line-height: 100%;
margin-left: 70px;
margin-top: 5px;
padding: 10px;
text-align: justify;
text-shadow: 0px 0px 2px #000000;
width: auto;
letter-spacing: 0px;
}
.desc8 {
border-bottom:10px solid #070303;
border-right: 10px solid #070303;
border-left: 10px solid #070303;
background-color:#120707;
background-repeat: repeat;
text-transform:uppercase;
color: #565656;
font-family:arial;
display: block;
font-size: 9.5px;
line-height: 100%;
margin-left: 70px;
margin-top: 5px;
padding: 0px;
text-align: justify;
text-shadow: 0px 0px 2px #000000;
width: auto;
letter-spacing: 0px;
}
a.forumtitle {
border-bottom: 1px dotted #202020;
color: #FAF0E6;
display: block;
font-family: Wire One;
font-size: 25px;
font-style: normal;
font-weight: 400;
letter-spacing: 2px;
line-height: 12px;
margin: 0;
opacity: 0.7;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a.forumtitle:hover {
color: #50b9d9;
opacity: 1;
text-decoration: none;
}
a.mainmenu[href="/faq"] { display : none; }
a.mainmenu[href="/gallery/index.htm"] { display : none; }
a.mainmenu[href="/calendar"] { display : none; }
a.mainmenu[href="/search"] { display : none; }
a.mainmenu[href="/groups"] { display : none; }
dd.lastpost {
position: absolute!important;
left: 1000px;
}
.h3{background: rgba(255,255,255,0.6);
color: black;
padding: 9px;
border-radius: 5px;
border: 1px solid black;
text-align: center;}.module{border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 16px;}
.postbody ul.profile-icons img:hover, .post-options img:hover, .posting-icons img:hover, .borderwrap div div a img:hover, .options a img:hover, .right a img:hover, .noprint a img:hover {
bottom: -2px;
opacity: 0.7;
padding: 0px;
position: relative;
}
/***perfil***/
div.postprofile dl dt img{
margin-left: 3px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
div.postprofile dl dt img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
/********* Barra *********/
.forabg li.row dd.topics {
background: #2e222b;
color: white;
float: right;
font-family: Wire One;
font-size: 20px;
text-align: center;
text-transform: uppercase;
display: block;
position: relative;
top: 4px;
width: 100px;
height: 25px;
margin-right: 47px;
}
/***/
.forabg li.row dd.posts {
background: #120c10;
color: #fff;
float: right;
font-family: Wire One;
font-size: 20px;
position: relative;
top: 4px;
text-align: center;
text-transform: uppercase;
width: 100px;
height: 15px;
margin-right: -1px;
}
/***/
.forabg li.row dd.lastpost {
background: #2e222b;
color: #fff;
display: block;
float: right;
font-family: Wire One;
font-size: 20px;
margin-top: 13px;
position: relative;
right: 20px;
text-align: center;
text-transform: uppercase;
width: 170px;
height: 60px;
margin-right: 42px;
}
/***/
a.forumtitle {
background: #2E222B;
color: white
display: block;
font-family: Wire One;
font-size: 25px;
letter-spacing: 2px;
margin-left: 115px;
padding: 3px;
text-align: center;
text-shadow: 0 0 1px #000000;
text-transform: uppercase;
transition: all .5s ease-in-out;
width: 392px;
position: relative;
}
/***/
a.forumtitle:hover {
background: #120c10!important;
transition: all .5s ease-in-out!important;
color: white
display: block;
font-family: Wire One;
font-size: 15px;
letter-spacing: 2px;
margin-left: 115px;
padding: 3px;
text-align: center;
text-shadow: 0 0 1px #000000;
text-transform: uppercase;
width: 392px;
position: relative;
}
.topiclist .row dl dd img { margin-left: 55px !important; }
/*Quitar el Buscar*/
#search-box {visibility:hidden}
/*Título de Categorias*/
li.header {
text-transform: none;
font-size:0px;
padding: 10px;
background: #120c10;
text-align: center;
}
.table-title, .table-title h2 {
color: #bfbcbb;
font: 30px Wire One;
text-align: right;
text-transform: uppercase;
text-shadow: 1px 0px 1px #000;
position: relative;
right: -220px;
}
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Re: Widgets Fixos na lateral do fórum
por Key of Destiny 01.04.16 3:26
Entendo os problemas que aconteceram no seu fórum. Na verdade, alguns erros meus resultaram nesse empecilho, peço perdão. Eu esqueci de um ; depois do CSS e separei uma classe sem querer. Vamos ajeitar isso já já.
Começando com o problema com o código principal. Acabei separando o número 4 da classe fakewidget, aí o fórum acabou adotando as propriedades da barra no geral. Substitua o código que eu passei por esse:
Para separar as categorias e fazer o background funcionar, vamos apenas adicionar duas coisinhas simples: um margin-bottom e um ; que eu esqueci. Substitua o código a partir do ".fakewidget".
Se quiser mudar mais alguma coisa, só falar.
PS: Frisei tanto o uso do ponto e vírgula e acabei esquecendo dele. Que ironia.
Começando com o problema com o código principal. Acabei separando o número 4 da classe fakewidget, aí o fórum acabou adotando as propriedades da barra no geral. Substitua o código que eu passei por esse:
- Código:
<div class="fakewidget"><div class="fakewidget1">Portal HF</div><div class="fakewidget2">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO </div><div class="fakewidget3"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Vertical</title>
<style type="text/css">
<!--
ul#menu {
width:200px;
border:1px solid #003399;
background:#FADE8B;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #A4A0F5;
}
ul#menu li a:link, ul#menu li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
color:#5E0F50;
border-left:10px solid #EEC591;
padding-left:5px;
}
ul#menu li a:hover {
background-color: #FFE4B5;
color:#DAA520;
border-left:10px solid #FFD39B;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Início</a></li>
<li><a href="#">História</a></li>
<li><a href="#">Filosofia</a></li>
<li><a href="#">Literatura</a></li>
<li><a href="#">Mitologia</a></li>
</ul>
</body>
</html></div><div class="fakewidget4"><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/sdk.js#xfbml=1&version=v2.4&appId=155593491120034";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/Hist%C3%B3ria-Filosofia-112321165504758/" data-width="150" data-height="70" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/História-Filosofia-112321165504758/"><a href="https://www.facebook.com/História-Filosofia-112321165504758/">Portal HF.com</a></blockquote></div></div></div></div>
Para separar as categorias e fazer o background funcionar, vamos apenas adicionar duas coisinhas simples: um margin-bottom e um ; que eu esqueci. Substitua o código a partir do ".fakewidget".
- Código:
.fakewidget {
width: 210px;
height: 100%;
background-image: url(http://i.imgur.com/LWctYXj.png);
border-right: 3px solid gold;
margin-top: -10px;
padding: 15px;
position: fixed;
}
.fakewidget1 {
width: 200px;
height: 40px;
font-family: Wire One;
font-size: 50px;
color: #18404f;
text-shadow: 0 0 5px black;
text-align: center;
margin-top: 8px;
margin-bottom: 40px;
}
.fakewidget2 {
width: 200px;
height: 120px;
background-color: #080303;
border: 2px solid #120707;
font-family: Wire One;
font-size: 12px;
color: #628c9c;
text-align: justify;
margin: 3px;
overflow: auto;
margin-bottom: 40px;
}
.fakewidget3 {
width: 200px;
margin-bottom: 40px;
}
.fakewidget4 {
width: 200px;
Se quiser mudar mais alguma coisa, só falar.
PS: Frisei tanto o uso do ponto e vírgula e acabei esquecendo dele. Que ironia.
Key of Destiny- ****
- Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 01.04.16 4:22
Funcionou perfeitamente!! *-*
Mas ainda tenho umas dúvidas...
Sobre a caixa de texto, tem mesmo uma forma de personalizar a barra de rolagem? xD Pode ser uma dessa cor [#2E222B] e como no exemplo abaixo...
Sobre o menu de links, pode me ajudar a colocar esse efeito?
Site onde vi
Mas ainda tenho umas dúvidas...
Sobre a caixa de texto, tem mesmo uma forma de personalizar a barra de rolagem? xD Pode ser uma dessa cor [#2E222B] e como no exemplo abaixo...
Sobre o menu de links, pode me ajudar a colocar esse efeito?
Site onde vi
- Spoiler:
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 01.04.16 18:36
Oi de novo xD
Eu consegui dar uma editada razoável no menu de links, apenas queria que me dissesse qual código adicionar para esse efeito das letras se separando quando o mouse está por cima.
Sobre a barra de rolagem, a dúvida continua.
Eu consegui dar uma editada razoável no menu de links, apenas queria que me dissesse qual código adicionar para esse efeito das letras se separando quando o mouse está por cima.
Sobre a barra de rolagem, a dúvida continua.
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Maori- Membro
- Membro desde : 08/06/2014
Mensagens : 521
Pontos : 702 -
Re: Widgets Fixos na lateral do fórum
por Key of Destiny 01.04.16 21:57
Primeiramente, peço desculpas pela demora. Eu geralmente deixo a conta logada tanto no computador como no celular, aí parece que eu estou online no momento.
Como você conseguiu editar o menu de links, peço que vá onde colocou o código CSS para personalizá-los e procure por ul#menu li a:hover. Adicione mais uma linha no código com essa propriedade (no lugar do Y, você coloca o valor que deseja):
O tópico do @PaladinoS resolve o problema da barra de rolagem, mas provavelmente a do seu fórum (canto direito) também vai mudar. Se não quiser esse efeito, me avise que acredito que dê pra solucionar esse problema.
Como você conseguiu editar o menu de links, peço que vá onde colocou o código CSS para personalizá-los e procure por ul#menu li a:hover. Adicione mais uma linha no código com essa propriedade (no lugar do Y, você coloca o valor que deseja):
- Código:
letter-spacing: Ypx
O tópico do @PaladinoS resolve o problema da barra de rolagem, mas provavelmente a do seu fórum (canto direito) também vai mudar. Se não quiser esse efeito, me avise que acredito que dê pra solucionar esse problema.
Key of Destiny- ****
- Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 01.04.16 22:04
Obrigado pelo código *-* Funcionou perfeitamente!
E sobre a barra de rolagem, eu coloquei o código que o PaladinoS enviou, e assim como disse, mudou o do fórum todo. Queria esse efeito apenas naquela caixinha do widget. Haveria como?! xD
E sobre a barra de rolagem, eu coloquei o código que o PaladinoS enviou, e assim como disse, mudou o do fórum todo. Queria esse efeito apenas naquela caixinha do widget. Haveria como?! xD
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Re: Widgets Fixos na lateral do fórum
por Key of Destiny 01.04.16 22:19
Entendo.
Poderia passar o código já personalizado?
Poderia passar o código já personalizado?
Key of Destiny- ****
- Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 01.04.16 22:30
Este é o dos widgets que vc fez...
E essa é a parte do menu de links
- Código:
/***widgets fixos***/
div.conteneur_minwidth_IE {
width: 84%;
margin-left: 210px;
overflow: hidden;
}
.fakewidget {
width: 195px;
height: 100%;
background-image: url(http://i.imgur.com/LWctYXj.png);
border-right: 3px solid #2E222B;
margin-top: -10px;
padding: 15px;
position: fixed;
}
.fakewidget1 {
width: 195px;
height: 40px;
font-family: Lobster;
font-size: 50px;
color: #2E222B;
text-shadow: 0 0 5px black;
text-align: center;
margin-top: 8px;
margin-bottom: 22px;
}
.fakewidget2 {
width: 195px;
height: 120px;
background-color: #120707;
border: 2px solid #2E222B;
font-family: Poiret One;
font-size: 12px;
color: #9a8fa8;
text-align: justify;
margin: 3px;
overflow: auto;
margin-bottom: 22px;
}
.fakewidget3 {
width: 195px;
height: 40px;
font-family: Lobster;
font-size: 25px;
color: #2E222B;
text-shadow: 0 0 5px black;
text-align: center;
margin-top: 8px;
margin-bottom: 3px;
}
.fakewidget4 {
width: 195px;
margin-bottom: 22px;
}
.fakewidget5 {
width: 195px;
height: 40px;
font-family: Lobster;
font-size: 25px;
color: #2E222B;
text-shadow: 0 0 5px black;
text-align: center;
margin-top: 8px;
margin-bottom: 3px;
}
.fakewidget6 {
width: 195px;
}
/***fim***/
E essa é a parte do menu de links
- Código:
ul#menu {
width:200px;
background:#120C10;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #20171E;
border-right:5px solid #2E222B;
}
ul#menu li a:link, ul#menu1 li a:visited {
display:block;
height:1%;
text-decoration:none;
text-align: center;
font-family: Lobster, Helvetica, sans-serif;
font-size:15px;
color:#9a8fa8;
letter-spacing: 1px;
border-left:8px solid #2E222B;
padding-left:5px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
ul#menu li a:hover {
background-color: #33252F;
letter-spacing: 5px;
color:#628B9B;
border-left:8px solid #9a8fa8;
}
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Re: Widgets Fixos na lateral do fórum
por Key of Destiny 01.04.16 22:42
Desculpe, não fui específico. Queria o da barra de rolagem.
De qualquer modo, cá está o código.
De qualquer modo, cá está o código.
- Código:
.fakewidget2 ::-webkit-scrollbar {
width: 14px;
height: 14px;
}
.fakewidget2 ::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
.fakewidget2 ::-webkit-scrollbar-thumb {
background: #363636;
border: 0px none #ffffff;
border-radius: 0px;
}
.fakewidget2 ::-webkit-scrollbar-thumb:hover {
background: #696969;
}
.fakewidget2 ::-webkit-scrollbar-thumb:active {
background: #000000;
}
.fakewidget2 ::-webkit-scrollbar-track {
background: #000000;
border: 0px none #ffffff;
border-radius: 0px;
}
.fakewidget2 ::-webkit-scrollbar-track:hover {
background: #000000;
}
.fakewidget2 ::-webkit-scrollbar-track:active {
background: #333333;
}
.fakewidget2 ::-webkit-scrollbar-corner {
background: transparent;
}
Key of Destiny- ****
- Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 01.04.16 22:50
Não surtiu nenhum efeito :c
Esse código vai no CSS junto com as outras partes do .fakewidget2, correto?
Esse código vai no CSS junto com as outras partes do .fakewidget2, correto?
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Re: Widgets Fixos na lateral do fórum
por Key of Destiny 01.04.16 23:34
Erro meu novamente.
Substitua o código por esse:
E não, não precisa ser necessariamente depois do "fakewidget2". Podes criar uma parte separada pra ele.
Substitua o código por esse:
- Código:
.fakewidget2::-webkit-scrollbar {
width: 14px;
height: 14px;
}
.fakewidget2::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
.fakewidget2::-webkit-scrollbar-thumb {
background: #363636;
border: 0px none #ffffff;
border-radius: 0px;
}
.fakewidget2::-webkit-scrollbar-thumb:hover {
background: #696969;
}
.fakewidget2::-webkit-scrollbar-thumb:active {
background: #000000;
}
.fakewidget2::-webkit-scrollbar-track {
background: #000000;
border: 0px none #ffffff;
border-radius: 0px;
}
.fakewidget2::-webkit-scrollbar-track:hover {
background: #000000;
}
.fakewidget2::-webkit-scrollbar-track:active {
background: #333333;
}
.fakewidget2::-webkit-scrollbar-corner {
background: transparent;
}
E não, não precisa ser necessariamente depois do "fakewidget2". Podes criar uma parte separada pra ele.
Key of Destiny- ****
- Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442
Re: Widgets Fixos na lateral do fórum
por Karol Marinho 01.04.16 23:36
Funcionou perfeitamente!
Muito obrigada pela ajuda e pela paciência em responder todas as questões!!!
Muito obrigada pela ajuda e pela paciência em responder todas as questões!!!
Karol Marinho- *****
- Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635 -
Tópicos semelhantes» Widgets na lateral do fórum
» [Dúvida]Como colocar widgets na lateral do meu fórum?
» Widgets lateral
» Barra lateral de widgets
» Lateral do fórum
» [Dúvida]Como colocar widgets na lateral do meu fórum?
» Widgets lateral
» Barra lateral de widgets
» Lateral do fórum
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