Widgets Fixos na lateral do fórum

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Widgets Fixos na lateral do fórum

Mensagem 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

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho 30.03.16 1:10

Up :c Help!
Karol Marinho

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho 31.03.16 21:16

Up?! :c
Karol Marinho

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Maori 31.03.16 21:40

Olá, @Karol Marinho

Seus widgets já estão fixos em seu fórum.
Maori

Maori
Membro

Membro desde : 08/06/2014
Mensagens : 521
Pontos : 702

http://baixacidade.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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. Piscada

*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

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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:
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

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny 01.04.16 2:00

Não tem de quê. Piscada

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. Mostrando a lingua

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 (Piscada 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

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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...

Widgets Fixos na lateral do fórum Erro110

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

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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á. Mostrando a lingua

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. Piscada

PS: Frisei tanto o uso do ponto e vírgula e acabei esquecendo dele. Que ironia. Mostrando a lingua
Key of Destiny

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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...
Widgets Fixos na lateral do fórum Erro110Widgets Fixos na lateral do fórum Scroll10

Sobre o menu de links, pode me ajudar a colocar esse efeito?
Widgets Fixos na lateral do fórum Link110Widgets Fixos na lateral do fórum Link210

Site onde vi
Spoiler:
Karol Marinho

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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.
Karol Marinho

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Maori 01.04.16 20:40

Karol veja este link e veja se o mesmo lhe ajuda

link
Maori

Maori
Membro

Membro desde : 08/06/2014
Mensagens : 521
Pontos : 702

http://baixacidade.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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. Mostrando a lingua

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. Piscada
Key of Destiny

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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
Karol Marinho

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny 01.04.16 22:19

Entendo.

Poderia passar o código já personalizado?
Key of Destiny

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho 01.04.16 22:30

Este é o dos widgets que vc fez...

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;
}

Feliz
Karol Marinho

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny 01.04.16 22:42

Desculpe, não fui específico. Queria o da barra de rolagem. Mostrando a lingua

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

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem 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?
Karol Marinho

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny 01.04.16 23:34

Erro meu novamente. Mostrando a lingua

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

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho 01.04.16 23:36

Funcionou perfeitamente!
Muito obrigada pela ajuda e pela paciência em responder todas as questões!!!
Karol Marinho

Karol Marinho
*****

Membro desde : 25/01/2011
Mensagens : 414
Pontos : 635

http://acripta.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos