Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Outubro de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
39 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 39 Visitantes :: 1 Motor de busca

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Widgets Fixos na lateral do fórum

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

Resolvido Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Seg 28 Mar 2016 - 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:
http://scars.forumeiros.com/


Última edição por Karol Marinho em Sex 1 Abr 2016 - 23:37, editado 1 vez(es)

Karol Marinho
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Qua 30 Mar 2016 - 1:10

Up :c Help!

Karol Marinho
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Qui 31 Mar 2016 - 21:16

Up?! :c

Karol Marinho
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Maori em Qui 31 Mar 2016 - 21:40

Olá, @Karol Marinho

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

Maori
Usuário avançado

Masculino
Inscrito dia : 08/06/2014
Mensagens : 497
Pontos Ativos : 1582

http://baixacidade.forumeiros.com

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Qui 31 Mar 2016 - 21:42

Mas gostaria que ficasse fixo na tela, sem nem subir ou descer, como nesse fórum :/

Karol Marinho
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny em Qui 31 Mar 2016 - 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
Nível 9

Masculino
Inscrito dia : 15/12/2015
Mensagens : 180
Pontos Ativos : 661

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Qui 31 Mar 2016 - 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://illiweb.com/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
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny em Sex 1 Abr 2016 - 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
Nível 9

Masculino
Inscrito dia : 15/12/2015
Mensagens : 180
Pontos Ativos : 661

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Sex 1 Abr 2016 - 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:
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://illiweb.com/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
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny em Sex 1 Abr 2016 - 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
Nível 9

Masculino
Inscrito dia : 15/12/2015
Mensagens : 180
Pontos Ativos : 661

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Sex 1 Abr 2016 - 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
Spoiler:
http://theprettyodd.forumeiros.com/

Karol Marinho
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Sex 1 Abr 2016 - 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
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Maori em Sex 1 Abr 2016 - 20:40

Karol veja este link e veja se o mesmo lhe ajuda

link

Maori
Usuário avançado

Masculino
Inscrito dia : 08/06/2014
Mensagens : 497
Pontos Ativos : 1582

http://baixacidade.forumeiros.com

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny em Sex 1 Abr 2016 - 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
Nível 9

Masculino
Inscrito dia : 15/12/2015
Mensagens : 180
Pontos Ativos : 661

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Sex 1 Abr 2016 - 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
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny em Sex 1 Abr 2016 - 22:19

Entendo.

Poderia passar o código já personalizado?

Key of Destiny
Nível 9

Masculino
Inscrito dia : 15/12/2015
Mensagens : 180
Pontos Ativos : 661

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Sex 1 Abr 2016 - 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
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny em Sex 1 Abr 2016 - 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
Nível 9

Masculino
Inscrito dia : 15/12/2015
Mensagens : 180
Pontos Ativos : 661

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Sex 1 Abr 2016 - 22:50

Não surtiu nenhum efeito :c
Esse código vai no CSS junto com as outras partes do .fakewidget2, correto?

Karol Marinho
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Key of Destiny em Sex 1 Abr 2016 - 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
Nível 9

Masculino
Inscrito dia : 15/12/2015
Mensagens : 180
Pontos Ativos : 661

Resolvido Re: Widgets Fixos na lateral do fórum

Mensagem por Karol Marinho em Sex 1 Abr 2016 - 23:36

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

Karol Marinho
Usuário avançado

Feminino
Inscrito dia : 25/01/2011
Mensagens : 414
Pontos Ativos : 2774

http://acripta.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5