Aparencia dos widgets

4 participantes

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

Tópico resolvido Aparencia dos widgets

Mensagem por Matrix12 27.04.13 7:12

Qual é minha questão:
Gostaria de saber como coloco a foto dos usuario em destaque ali no canto como a imagem abaixo



Aparencia dos widgets Boa10


Tambem queria saber como coloca as fotos dos usuarios ali ond tem os topicos do dia


Aparencia dos widgets Assim10

Ajdua ae

Endereço do meu fórum:
http://thudexcheatsbrasil.forumeiros.com

Versão do fórum:
PHPBB2
Matrix12

Matrix12
***

Membro desde : 22/04/2013
Mensagens : 108
Pontos : 180

http://thudexcheatsbrasil.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Aparencia dos widgets

Mensagem por GustavoF. 27.04.13 13:08

Olá,

Aceda:
Painel de controle Seta Módulos Seta HTML & JavaScript Seta JavaScript
Clique em Aparencia dos widgets BZ84HLB

Título: Seu critério
Investimento: Indece, Portal e Galeria
Código JavaScript: Código a seguir:

Código:
$(function(){

    if(!window.localStorage) return;
 
    // Avatar par défaut
    var default_avatar= 'http://i42.servimg.com/u/f42/17/62/49/09/pp-bla10.png';
 
    // Temps de cache, ici 24 h * 60 m * 60 s * 1000 ms donc un jour
    var caching_time= 24*60*60*1000;
 
    // Temps de cache d'une erreur, ici 60 s * 1000 ms donc une minute
    var caching_error= 60*1000;
 
    var set_avatar= function(id) {
        $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
    };
 
    var get_avatar= function(id) {
        if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
        {
            localStorage.setItem('d_ava'+id, default_avatar);
            $.get('/u'+id, function (d){
                localStorage.setItem('t_ava'+id,+new Date);
                localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                set_avatar(id);
            });
        }
        return localStorage.getItem('d_ava'+id);
    };
 
    var to_replace= {};
 
    $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
        to_replace[$(this).attr('href').substr(2)]= 1;
        $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
    });


    for(i in to_replace)
    {
        set_avatar(i);
    };

});

Depois salve.

Agora aceda:
Painel de controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS
No local onde colocamos o código CSS adicione este:

Código:
.mini_ava img {

width: 40px;
height: 40px;
border:1px solid gray;
}
.mini_ava {
  float: left;
}

Valide!

Agora visualize seu fórum, resulta?
GustavoF.

GustavoF.
Novo Membro

Membro desde : 27/04/2013
Mensagens : 9
Pontos : 15

http://swdesign.ativoforum.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Aparencia dos widgets

Mensagem por Quakeeline 27.04.13 13:50

Olá,

Siga os passos do tutorial abaixo

- Trocando o template
Vá até: Painel de controle Seta Visualização Seta Templates Seta Portal Seta mod_recent_topics.
Abra o template e troque todo o conteudo por este:
Código:
<!-- BEGIN scrolling_row -->
<div class="module main">
   <div class="main-head"><div class="h3">{L_RECENT_TOPICS}</div></div>
   <div class="main-content" id="comments_scroll_div">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
      » <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a><br />
          <img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY} 

      <!-- BEGIN switch_poster -->
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}<br /><br />
      <!-- END switch_poster_guest -->

      <!--
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
      -->
            </div>
          </div>
      <!-- END recent_topic_row -->
   </div>
</div>

<script type="text/javascript">
//<![CDATA[
$(function(){
   div_marquee('comments_scroll_div', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}');
});
//]]>
</script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
<div class="module main">
   <div class="main-head"><h3>{L_RECENT_TOPICS}</h3></div>
   <div class="main-content">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
            » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br /> {BY} 
                <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
            </div>
          </div>
      <!-- END recent_topic_row -->
   </div>
</div>
<!-- END classical_row -->
Salve!


- Aplicando o JavaScript
Vá até: Painel de controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos códigos JavaScript Seta Criar um novo JavaScript.
Título* : A sua escolha, de preferência use um título que você lembre-se de qual código de trata.
Investimento : Em todas as páginas.
Código Javascript* :
Código:
jQuery(document).on('ready', function() {
jQuery('.avt_recent').prepend('<div class="avt-r"><div>');
jQuery('.avt_recent .avt-r').each(function () {
var profileUserURL = jQuery(this).parent().children('.recent_space').children('a:last').attr('href');
jQuery(this).html('<a href="' + profileUserURL + '" class="avt-r-enlace"><img src="http://r14.imgfast.net/users/1417/27/86/76/avatars/1-19.png" alt="No Avatar" /></a>');
jQuery(this).children('a').load(profileUserURL + ' .module:eq(0) img:eq(0)')
});
});
Salve!



- Código css:
Painel de controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo css.
Código:
.recent_space {
  padding: 3px;
  border-bottom: 1px solid #F3F3F3;
}
.avt-r {
float: left;
}
.avt-r img {
width: 36px;
height: 36px;
margin: 3px;
padding: 1px;
border: 1px solid #D5D5D5;
background: white;
-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);
}
.avt-r img:hover {
border-color: #a1a1a1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
Valide!




© Best Skins


Até
Quakeeline

Quakeeline
***

Membro desde : 26/04/2013
Mensagens : 190
Pontos : 290

http://lfdesign.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Aparencia dos widgets

Mensagem por Matrix12 27.04.13 17:18

tem como deixar todo Widget do memo tamanho, gostaria de saber
Matrix12

Matrix12
***

Membro desde : 22/04/2013
Mensagens : 108
Pontos : 180

http://thudexcheatsbrasil.forumeiros.com/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Aparencia dos widgets

Mensagem por seender 30.04.13 3:33

Olá!

Apenas uma dúvida por tópico, por favor, a dúvida principal deste tópico foi solucionada?

Até mais!
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

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