Você não está conectado. Conecte-se ou registre-se

Widget Como no Exemplo

Ir em baixo  Mensagem [Página 1 de 1]

1 Widget Como no Exemplo em Ter Jan 27, 2015 12:19 pm

Júnior Duarte

avatar
Membro elite

E ai moçada, estava navegando em um Fórum e vi um widget interessante.

[Somente administradores podem ver esta imagem]

Gostaria de usa-lo no Fórum, não gostaria do sistema sei que é complicado, gostaria apenas de usar o código e ficasse no mesmo estilo. Copiei o código porem não fica igual ao da imagem. Podem me passar o código eu mesmo altero links, imagens enfim. Gostaria apenas que o widget ficasse no mesmo estilo do mostrado na imagem, alguem pode adaptar pra mim?

Segue o Fórum onde vi.

[Somente administradores podem ver este link]

Meu Fórum: Invites Express

Ver perfil do usuário

2 Re: Widget Como no Exemplo em Ter Jan 27, 2015 6:19 pm

Daemon

avatar
Admin

Se desejas apenas a estrutura, aqui está:
Código:
<ul class="ipsList_withminiphoto">
  <li class="clearfix">
    <a href="http://bestskins.net" class="url fn ipsUserPhotoLink left">
    <img src="http://r17.imgfast.net/users/1717/45/34/10/avatars/1-46.png" class="ipsUserPhoto ipsUserPhoto_mini">
    </a>
    <div class="list_content">
    <a class="url fn" href="/u1" title="Ver Perfil">Daemon</a>
    <p>
      <span class="ipsBadge ipsBadge_cyan">
   <img class="icon" src="http://forum.imasters.com.br/public/style_images/imasters-2014/icon_check_white_8px.png">
   0
      </span>
    </p>
  </div>
  </li>
</ul>
O css aqui:
Código:
.ipsList_withminiphoto>li {
margin-bottom: 14px;
}
.left {
float: left;
}
.ipsUserPhoto_mini {
width: 30px;
height: 30px;
}
.ipsUserPhoto {
padding: 1px;
border: 1px solid #d5d5d5;
background: #fff;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
.ipsList_withminiphoto > li .list_content {
margin-left: 40px;
}
.list_content {
word-wrap: break-word;
}
.ipsBadge {
display: inline-block;
height: 15px;
line-height: 15px;
padding: 2px 8px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
vertical-align: middle;
}
.ipsBadge_cyan {
background: #3291d0;
}
Até mais! Wink

Ver perfil do usuário http://zz1856.com

3 Re: Widget Como no Exemplo em Qua Jan 28, 2015 4:27 pm

Júnior Duarte

avatar
Membro elite

E ai Daemon ficou bom cara, só queria que tu melhorasse um pouco mais pode ser?

Olha como ficou:

[Somente administradores podem ver esta imagem]

Gostaria que ficasse um pouco mais pra esquerda tem uma palavra que ficou fora do quadrado azul e abaixo, diminuísse um pouco os espaços entre um e o outro e que adicionasse as imagens abaixo do lado do nome na ordem seguinte:

1- [Somente administradores podem ver esta imagem]
2- [Somente administradores podem ver esta imagem]
3- [Somente administradores podem ver esta imagem]

Agradeco a ajuda.

Segue o Code que ja modifiquei com avatar e links.

Código:
<ul class="ipsList_withminiphoto">
            
   <li class="clearfix">
                          <a class="url fn ipsUserPhotoLink left" href="http://invitesexpress.forumotion.com/">    <img class="ipsUserPhoto ipsUserPhoto_mini" src="http://r18.imgfast.net/users/1816/34/13/96/avatars/10-5.jpg" />    </a>                   
      <div class="list_content">
                             <a title="Ver Perfil" href="/u10" class="url fn">Santista</a>                   
         <p>
                                  <span class="ipsBadge ipsBadge_cyan">  <img src="http://forum.imasters.com.br/public/style_images/imasters-2014/icon_check_white_8px.png" class="icon" />    9 Convites Doados      </span>                   
         </p>
                                          
      </div>
                                       
   </li>
   
   <li class="clearfix">
                          <a class="url fn ipsUserPhotoLink left" href="http://invitesexpress.forumotion.com/">    <img class="ipsUserPhoto ipsUserPhoto_mini" src="https://cdn3.iconfinder.com/data/icons/rcons-user-action/32/boy-64.png" />    </a>                   
      <div class="list_content">
                             <a title="Ver Perfil" href="/u335" class="url fn">mariopeixer</a>                   
         <p>
                                  <span class="ipsBadge ipsBadge_cyan">  <img src="http://forum.imasters.com.br/public/style_images/imasters-2014/icon_check_white_8px.png" class="icon" />    8 Convites Doados      </span>                   
         </p>
                                          
      </div>
                                       
   </li>
   
   <li class="clearfix">
                          <a class="url fn ipsUserPhotoLink left" href="http://invitesexpress.forumotion.com/">    <img class="ipsUserPhoto ipsUserPhoto_mini" src="http://r18.imgfast.net/users/1816/34/13/96/avatars/290-39.png" />    </a>                   
      <div class="list_content">
                             <a title="Ver Perfil" href="/u290" class="url fn">neuRoo</a>                   
         <p>
                                  <span class="ipsBadge ipsBadge_cyan">  <img src="http://forum.imasters.com.br/public/style_images/imasters-2014/icon_check_white_8px.png" class="icon" />    8 Convites Doados      </span>                   
         </p>
                                          
      </div>
                                       
   </li>
</ul>

Ver perfil do usuário

4 Re: Widget Como no Exemplo em Qua Jan 28, 2015 5:55 pm

Cepheus

avatar
Membro elite

No css que o Daemon passou procure a seguinte linha:
Código:
.ipsList_withminiphoto > li .list_content {
margin-left: 40px;
}
Apague toda essa linha.


Agora adicione a seguinte linha no seu css:
Código:

.trofeu-1{background: url(http://img814.imageshack.us/img814/8639/71227532.gif) no-repeat;padding-left:33px;}
.trofeu-2{background: url(http://img205.imageshack.us/img205/4735/52668131.gif) no-repeat;padding-left:33px;}
.trofeu-3{background: url(http://img5.imageshack.us/img5/5093/27663520.gif) no-repeat;padding-left:33px;}

e Troque seu código por:
Código:
<ul class="ipsList_withminiphoto">
              
   <li class="clearfix">
                          <a class="url fn ipsUserPhotoLink left" href="http://invitesexpress.forumotion.com/">     <img class="ipsUserPhoto ipsUserPhoto_mini" src="http://r18.imgfast.net/users/1816/34/13/96/avatars/10-5.jpg" />    </a>                    
      <div class="list_content">
                              <a title="Ver Perfil" href="/u10" class="url fn"><span class="trofeu-1">Santista</span></a>                    
         <p>
                                  <span class="ipsBadge ipsBadge_cyan">   <img src="http://forum.imasters.com.br/public/style_images/imasters-2014/icon_check_white_8px.png" class="icon" />    9 Convites Doados       </span>                    
         </p>
                                            
      </div>
                                        
   </li>
    
   <li class="clearfix">
                          <a class="url fn ipsUserPhotoLink left" href="http://invitesexpress.forumotion.com/">     <img class="ipsUserPhoto ipsUserPhoto_mini" src="https://cdn3.iconfinder.com/data/icons/rcons-user-action/32/boy-64.png" />    </a>                    
      <div class="list_content">
                              <a title="Ver Perfil" href="/u335" class="url fn"><span class="trofeu-2">mariopeixer</span></a>                    
         <p>
                                  <span class="ipsBadge ipsBadge_cyan">   <img src="http://forum.imasters.com.br/public/style_images/imasters-2014/icon_check_white_8px.png" class="icon" />    8 Convites Doados       </span>                    
         </p>
                                            
      </div>
                                        
   </li>
    
   <li class="clearfix">
                          <a class="url fn ipsUserPhotoLink left" href="http://invitesexpress.forumotion.com/">     <img class="ipsUserPhoto ipsUserPhoto_mini" src="http://r18.imgfast.net/users/1816/34/13/96/avatars/290-39.png" />    </a>                    
      <div class="list_content">
                              <a title="Ver Perfil" href="/u290" class="url fn"><span class="trofeu-3">neuRoo</span></a>                    
         <p>
                                  <span class="ipsBadge ipsBadge_cyan">   <img src="http://forum.imasters.com.br/public/style_images/imasters-2014/icon_check_white_8px.png" class="icon" />    8 Convites Doados       </span>                    
         </p>
                                            
      </div>
                                        
   </li>
</ul>



Gostou? não esqueça de Reputar! Suporte Forumeiros Aqui!
Ver perfil do usuário

5 Re: Widget Como no Exemplo em Qua Jan 28, 2015 6:04 pm

Cepheus

avatar
Membro elite

Só  corrigindo adicione também::
Código:
.pun .main-content ol, .pun .main-content ul {
padding-left: 0px!important;
}



Gostou? não esqueça de Reputar! Suporte Forumeiros Aqui!
Ver perfil do usuário

6 Re: Widget Como no Exemplo em Qua Jan 28, 2015 6:08 pm

Júnior Duarte

avatar
Membro elite

Opa amigo, assim olha como ficou:

[Somente administradores podem ver esta imagem]

Ainda continua centralizado e há espaço grande ainda entre um e o outro user no Widget.

Opa.

Já vi amigo a atualização, apenas agora tem como diminuir um pouco mais os espaços entre um e outro²

Ver perfil do usuário

7 Re: Widget Como no Exemplo em Qua Jan 28, 2015 6:18 pm

Cepheus

avatar
Membro elite

tem sim só adicionar a seguinte linha no seu css:
Código:
.ipsList_withminiphoto li { margin-bottom: 5px!important; padding: 0px!important;}




Gostou? não esqueça de Reputar! Suporte Forumeiros Aqui!
Ver perfil do usuário

8 Re: Widget Como no Exemplo em Qua Jan 28, 2015 6:21 pm

Júnior Duarte

avatar
Membro elite

Agora sim amigo, tá perfeito. Obrigado pela ajuda. Pode fechar o tópico.

Ver perfil do usuário

9 Re: Widget Como no Exemplo em Qua Jan 28, 2015 6:24 pm

Cepheus

avatar
Membro elite

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]



Gostou? não esqueça de Reputar! Suporte Forumeiros Aqui!
Ver perfil do usuário

Conteúdo patrocinado


Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum