Widget com contorno personalizado

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

Resolvido Widget com contorno personalizado

Mensagem por coenzi em 27/02/14, 06:08 am

Qual é minha questão:
Bom pessoal, esse fórum: http://narutorpgfuture.forumeiros.com/
usa um contorno nos widget, que me agradou bastante, porem eu gostaria de saber se tem como alguém me passar esse código ou sei la oque for, se for possivel, ficarei grato.

Endereço do meu fórum:
http://narutoonline-rpg.forumeiros.com

Versão do fórum:
PHPBB2


Última edição por coenzi em 28/02/14, 10:39 pm, editado 1 vez(es)
avatar

coenzi
Usuário avançado

Masculino
Inscrito dia : 27/11/2013
Mensagens : 384
Pontos Ativos : 632

Ver perfil do usuário http://hero-rpg.web-rpg.com/

Resolvido Re: Widget com contorno personalizado

Mensagem por Shek em 27/02/14, 06:26 am

Bom dia!

Use este código HTML em um widget, e desmarque a função "Utilizar um table type e cole o código:
Código:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-moz-border-radius: 0px;"><tbody><tr class="zebraDois"><td width="21" height="30" background="http://i26.servimg.com/u/f26/14/56/85/28/cxggff10.png" style="-moz-border-radius: 0px; background-repeat: no-repeat;"> </td><td height="30" background="http://i26.servimg.com/u/f26/14/56/85/28/menumc10.png" style="-moz-border-radius: 0px; background-repeat: repeat-x;"> </td><td width="22" height="30" background="http://i26.servimg.com/u/f26/14/56/85/28/rgrg10.png" style="-moz-border-radius: 0px; background-repeat: no-repeat;"> </td></tr><tr class="zebraUm"><td width="21" background="http://i26.servimg.com/u/f26/14/56/85/28/menu_013.png" style="-moz-border-radius: 0px; background-repeat: repeat-y;"> </td><td name="conteudo Multimidia" style="background-color: #ffffff"><!--
Inicio do conteudo--><div class="tudo dl2" style="width:150px;"><div class="efeito4"></div><div class="efeito3"></div><div class="efeito2"></div><div class="efeito1"></div><div class="texto"></div></div><div class="tudo nrf"><div class="efeito4">Naruto <br>Rpg Future</div><div class="efeito3">Naruto <br>Rpg Future</div> <div class="efeito2">Naruto <br>Rpg Future</div> <div class="efeito1">Naruto <br>Rpg Future</div> <div class="texto">Naruto <br>Rpg Future</div>
</div>
 
 <div class="tudo" style="margin-top: -106px !important;z-index: 99;"> <img src="http://i55.servimg.com/u/f55/14/56/85/28/2417_r10.png">
</div>
 <span id="linkperfil" style="display:none;"><a href="http://narutorpgfuture.forumeiros.com/profile.forum?mode=viewprofile&amp;u=-1">Convidado</a></span>

<!--              Inicio do menu NRF              --> <div>
   
   <ul class="ulmenu" id="nav">
      
      <li id="suave" class="limenu">


          <a href="/portal.htm" id="botao" class="efeito_fade"> 
         <span><p>
             Portal
         </p></span><img class="hover" style="opacity: 0;"></a>
      </li>

      <li id="suave" class="limenu">


          <a href="/forum" id="botao" class="efeito_fade"> 
         <span><p>
             Fórum
         </p></span><img class="hover" style="opacity: 0;"></a>
      </li>

      <li id="suave" class="limenu">
          <a href="/c2-animes-e-mangas" id="botao" class="efeito_fade"> 
         <span><p>
             Animes e Mangás
         </p></span><img class="hover" style="opacity: 0;"></a>
         <ul class="ulmenu" id="nav">
            
            <li id="suave" class="limenu">
                <a href="/f36-naruto" id="botao" class="efeito_fade"> 
               <span><p>
                   Naruto
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>

            <li id="suave" class="limenu">
                <a href="/f41-bleach" id="botao" class="efeito_fade"> 
               <span><p>
                   Bleach
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>

            <li id="suave" class="limenu">
                <a href="/f42-fairy-tail" id="botao" class="efeito_fade"> 
               <span><p>
                   Fairy Tail
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>

            <li id="suave" class="limenu">
                <a href="/f43-one-piece" id="botao" class="efeito_fade"> 
               <span><p>
                   One Piece
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>

            <li id="suave" class="limenu">
                <a href="/f44-ouros-animes" id="botao" class="efeito_fade"> 
               <span><p>
                   Ouros animes
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
         </ul>
         
      </li>



      
      <li id="suave" class="limenu">
          <a href="/f30-area-rpg" id="botao" class="efeito_fade"> 
         <span><p>
             RPG
         </p></span><img class="hover" style="opacity: 0;"></a>
         <ul class="ulmenu" id="nav">
            
            <li id="suave" class="limenu">
                <a href="/vila-oculta-da-folha-f9/" id="botao" class="efeito_fade"> 
               <span><p>
                   Konoha
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/vila-oculta-da-nevoa-f18/" id="botao" class="efeito_fade"> 
               <span><p>
                   Kiri
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/vila-oculta-da-areia-f19/" id="botao" class="efeito_fade"> 
               <span><p>
                   Suna
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/vila-oculta-da-nuvem-f20/" id="botao" class="efeito_fade"> 
               <span><p>
                   Kumo
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/vila-oculta-da-pedra-f21/" id="botao" class="efeito_fade"> 
               <span><p>
                   Iwa
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/f95-organizacoes" id="botao" class="efeito_fade"> 
               <span><p>
                   Organizações
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>

            <li id="suave" class="limenu">
                <a href="/tutoriais-f7/" id="botao" class="efeito_fade"> 
                <span><p>
                Tutoriais
                </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
                        
         </ul>
         
      </li>
      
      
      
      
      
      <li id="suave" class="limenu">
          <a href="/t18-regrais-gerais" id="botao" class="efeito_fade"> 
         <span><p>
             Regras
         </p></span><img class="hover" style="opacity: 0;"></a>
         <ul class="ulmenu" id="nav">

            <li id="suave" class="limenu">
                <a href="/t18-regrais-gerais" id="botao" class="efeito_fade"> 
               <span><p>
                   Gerais
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/f336-regras-rpg" id="botao" class="efeito_fade"> 
               <span><p>
                   RPG
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
                     
         </ul>
         
      </li>
      
      <li id="suave" class="limenu">
          <a href="/apresentacoes-f1/" id="botao" class="efeito_fade"> 
         <span><p>
             Apresentações
         </p></span><img class="hover" style="opacity: 0;"></a>
         <ul class="ulmenu" id="nav">
            
            <li id="suave" class="limenu">
                <a href="/teste-moderador-f146/" id="botao" class="efeito_fade"> 
               <span><p>
                   Teste GM/Mod
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
         </ul>
         
      </li>
      

      
      <li id="suave" class="limenu">
          <a href="/profile?mode=editprofile" id="botao" class="efeito_fade"> 
         <span><p>
             Perfil
         </p></span><img class="hover" style="opacity: 0;"></a>
         <ul class="ulmenu" id="nav">
            
            <li id="suave" class="limenu">
                <a href="/profile?mode=editprofile#" id="botao" class="efeito_fade"> 
               <span><p>
                   Informações
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/profile?mode=editprofile&amp;page_profil=preferences" id="botao" class="efeito_fade"> 
               <span><p>
                   Preferencias
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/profile?mode=editprofile&amp;page_profil=signature" id="botao" class="efeito_fade"> 
               <span><p>
                   Assinatura
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/profile?mode=editprofile&amp;page_profil=avatars" id="botao" class="efeito_fade"> 
               <span><p>
                   Avatar
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/profile?mode=editprofile&amp;page_profil=attachments" id="botao" class="efeito_fade"> 
               <span><p>
                   Anexos
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/profile?mode=editprofile&amp;page_profil=friendsfoes" id="botao" class="efeito_fade"> 
               <span><p>
                   Amigos
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/search?search_id=watchsearch" id="botao" class="efeito_fade"> 
               <span><p>
                   Topicos Super
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/search?search_id=draftsearch" id="botao" class="efeito_fade"> 
               <span><p>
                   Rascunhos
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/rpg_sheet_edit.forum?u=2" id="botao" class="efeito_fade"> 
               <span><p>
                   Personagem
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
         </ul>
         
      </li>
      
      <li id="suave" class="limenu">
          <a href="/parcerias-f4/como-funciona-o-sistema-de-parcerias-t133.htm" id="botao" class="efeito_fade"> 
         <span><p>
             Parceria
         </p></span><img class="hover" style="opacity: 0;"></a>
      </li>
          
      
      
      <li id="suave" class="limenu">
          <a href="/area-livre-f118/" id="botao" class="efeito_fade"> 
         <span><p>
             Area Livre
         </p></span><img class="hover" style="opacity: 0;"></a>
         <ul class="ulmenu" id="nav">
            
            <li id="suave" class="limenu">
                <a href="/historia-de-naruto-rpg-future-f243/ajude-na-criacao-de-nossa-historia-t111.htm" id="botao" class="efeito_fade"> 
               <span><p>
                   Historia do RPG
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/dicas-e-reclamacoes-dos-players-f119/" id="botao" class="efeito_fade"> 
               <span><p>
                   Dicas e Recla...
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
            <li id="suave" class="limenu">
                <a href="/t5757p325-sala-de-reuniao-dos-gm-s-e-moderadores" id="botao" class="efeito_fade"> 
               <span><p>
                   Reuniões Staff
               </p></span><img class="hover" style="opacity: 0;"></a>
            </li>
            
         </ul>
         
      </li>
      
      <li id="suave" class="limenu">
          <a href="http://www.top30.com.br/cgi/votar.cgi?ID=106481" target="_area" id="botao" class="efeito_fade"> 
         <span><p>
             Vota Top 30
         </p></span><img class="hover" style="opacity: 0;"></a>
      </li>
      
   </ul>
   
</div>  <!--
Fim do conteudo--></td><td width="21" background="http://i26.servimg.com/u/f26/14/56/85/28/menu_014.png" style="-moz-border-radius: 0px; background-repeat: repeat-y;"> </td></tr><tr class="zebraDois"><td width="21" height="23" background="http://i26.servimg.com/u/f26/14/56/85/28/menu_015.png" style="-moz-border-radius: 0px; background-repeat: no-repeat;"> </td><td height="23" background="http://i26.servimg.com/u/f26/14/56/85/28/menu_016.png" style="-moz-border-radius: 0px; background-repeat: repeat-x;"> </td><td width="22" height="23" background="http://i26.servimg.com/u/f26/14/56/85/28/menu_017.png" style="-moz-border-radius: 0px; background-repeat: no-repeat;"> </td></tr></tbody></table>

Até mais!


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17141
Pontos Ativos : 21403

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Widget com contorno personalizado

Mensagem por coenzi em 27/02/14, 01:56 pm

como eu vou usar este HTML em 1 widget? '-'
sendo que meu foco é usar esta personalização para o widget " ultimos assuntos "...
avatar

coenzi
Usuário avançado

Masculino
Inscrito dia : 27/11/2013
Mensagens : 384
Pontos Ativos : 632

Ver perfil do usuário http://hero-rpg.web-rpg.com/

Resolvido Re: Widget com contorno personalizado

Mensagem por Troubleshoot em 27/02/14, 02:13 pm

Olá!
Adicione o código postado pelo Shek em um widget com as seguinte opções:

http://i.imgur.com/nglQuVj.png

Após, adicione este código em: Visualização -> Imagens e Cores ->
Cores --> Folha de estilo CSS.

Código:
.main-content{-moz-border-radius:0 0 7px 7px;-webkit-border-radius:0 0 7px 7px;border-bottom:solid 3px #d7d7d7!important;border-radius:0 0 7px 7px}.main .main-head{-moz-border-radius:7px 7px 0 0;-moz-box-shadow:0 0 8px 0 #353535;-webkit-border-radius:7px 7px 0 0;-webkit-box-shadow:0 0 8px 0 #353535;border:1px solid #c4c4c4;border-radius:7px 7px 0 0;box-shadow:0 0 8px 0 #353535;color:#000!important}.subtitle{color:#353535}.module{-moz-border-radius:7px;-webkit-border-radius:7px;background:url(http://i42.servimg.com/u/f42/17/32/13/00/transp10.png);border:0;border-radius:7px}div.tudo{font-family:"Monotype Corsiva";font-size:30px;font-style:italic!important;font-weight:100!important;letter-spacing:0;margin-top:-25px;position:absolute!important;text-align:left!important;z-index:100}div.dl2{font-size:21px!important;margin-top:-32px!important}div.el2{font-size:20px!important;margin-top:-30px!important}div.nrf{font-size:19px!important;margin-top:-37px!important;width:100px}div.bd{font-size:30px!important;margin-top:-20px!important;max-width:1000px!important}div.texto{color:#fff;margin-left:0;margin-top:0;position:absolute!important;text-shadow:0 0 0}div.efeito1{color:#000;margin-left:1px;margin-top:-1px;position:absolute!important;text-shadow:0 -3px 5px #fb7b22}div.efeito2{color:#000;margin-left:-1px;margin-top:1px;position:absolute!important;text-shadow:0 3px 5px #fb7b22}div.efeito3{color:#000;margin-left:-1px;margin-top:-1px;position:absolute!important;text-shadow:-3px 0 5px #fb7b22}div.efeito4{color:#000;margin-left:1px;margin-top:1px;position:absolute!important;text-shadow:3px 0 5px #fb7b22}.portal .module{text-shadow:#ccc 1px 1px 0}.portal .module .h3{font-weight:700!important;text-align:center;text-shadow:1px 1px 0 #fff}

Resulta?
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Widget com contorno personalizado

Mensagem por coenzi em 27/02/14, 02:19 pm

bom se eu colocar em 1 widget, vai surtir efeito em todos ? '-'

edit:
http://i56.servimg.com/u/f56/18/75/58/97/erro10.jpg

se for esse o resultado que vocês esperavam, n me agradou, sendo que quero 1 bem parecido com o contorno daquele '-'
avatar

coenzi
Usuário avançado

Masculino
Inscrito dia : 27/11/2013
Mensagens : 384
Pontos Ativos : 632

Ver perfil do usuário http://hero-rpg.web-rpg.com/

Resolvido Re: Widget com contorno personalizado

Mensagem por BrunoH. em 27/02/14, 03:59 pm

Olá,

Adicione este código em sua Folha de Estilo CSS:
Código:
#left .forumline {
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/transp10.png);
border: 6px solid rgb(251, 123, 34);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
padding: 5px;
border-radius: 10px;
}
#left .catHead {
font-family: 'Monotype Corsiva';
color: #fff!important;
background: transparent;
border: none;
}
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de Estilo CSS

Atenciosamente.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Widget com contorno personalizado

Mensagem por coenzi em 27/02/14, 04:16 pm

gostei, mas tem 1 problema, apenas o primeiro widget que é o " ultimos assuntos " ficou perfeito, ele não tem o fundo verde, e o widget parceiros, já tem, poderia modificar isso ?

@edit: lembrando que o primeiro widget ficou com 1 fonte legal, e o widget parceiros já n teve essa fonte aplicada.
avatar

coenzi
Usuário avançado

Masculino
Inscrito dia : 27/11/2013
Mensagens : 384
Pontos Ativos : 632

Ver perfil do usuário http://hero-rpg.web-rpg.com/

Resolvido Re: Widget com contorno personalizado

Mensagem por BrunoH. em 28/02/14, 07:43 pm

Olá,

Adicione este código juntamente com o código que havia lhe fornecido:
Código:
#left > table:nth-child(3) > tbody > tr:nth-child(1) > td {
font-family: 'Monotype Corsiva';
color: #fff!important;
background: transparent;
border: none;
}
Muito feliz

Atenciosamente.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

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