[Solved] avatar-title of topic-date etc of author upside of the topic

i want something like this:




thanks in advance!!

Okay here we go:

In the viewtopic_body search for <div class="main paged"> above and paste it:

Code:

[panda=html]
    <div class="titlebox">
    <dd> <dava><div class="avatarredet"><a class="teste2" href="#">
    <img class="teste" alt="" src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" /></a></div></dava>
    <div itemscope="" itemtype="http://schema.org/Article" class="ipsBox_withphoto">
    <h1 itemprop="name" class="ipsType_pagetitle">{TOPIC_TITLE}</h1>
    <div class="desc lighter blend_links">
    <dts>Started by </dts><span itemprop="creator"></span>, <span itemprop="data_post"></span></div></div>
    <!-- BEGIN switch_user_logged_in -->
    <!-- BEGIN watchtopic -->
    <div class="seguir">
    <li>{S_WATCH_TOPIC}</li>
    </div>
    <!-- END watchtopic -->
    <!-- END switch_user_logged_in -->
    </dd></div>


Still search in viewtopic_body {postrow.displayed.POST_DATE_NEW} and replace with:

Code:

[panda=html]<span class="data-post">{postrow.displayed.POST_DATE_NEW}</span>

Save and Publish.

Now in javascript add the placement: in the topics

Code:

[panda=js]
    jQuery(document).ready(function() {
      var url=$('.post:first .postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
      $('.teste').attr('src',url);
      var url2=jQuery('.post:first .postmain .postbody .user .user-ident .user-basic-info a').attr('href');
      jQuery('.teste2').attr('href',url2);
      var url3=jQuery('.post:first .postmain .postbody .user .user-ident .username').html();
      jQuery('span[itemprop="creator"]').html(url3);
      var url5=jQuery('span.data-post').html();
      jQuery('span[itemprop="data_post"]').html(url5);
    });


Save it!

Now in CSS add following code:

Code:

[panda=css] .titlebox{
        -moz-border-radius:3px;
        -moz-box-shadow:inset rgba(0,0,0,0.1) 0 1px 4px;
        -webkit-border-radius:3px;
        -webkit-box-shadow:inset rgba(0,0,0,0.1) 0 1px 4px;
        background:#EFEFEF;
        border:1px solid #D6D6D6;
        border-radius:3px;
        box-shadow:inset rgba(0,0,0,0.1) 0 1px 4px;
        overflow:hidden;
        padding:10px;
        text-shadow:#fff 0 1px 0
    }
    .titlebox dd{display:block}
    .titlebox dava{float:left}
    .titlebox dava a img{
        -moz-box-shadow:0 2px 2px rgba(0,0,0,0.1);
        -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.1);
        background:#fff;
        border:1px solid #D5D5D5;
        box-shadow:0 2px 2px rgba(0,0,0,0.1);
        float:left;
        height:50px!important;
        padding:1px;
        width:50px!important
    }
    .titlebox dava a img:hover{
        -moz-box-shadow:0 2px 2px rgba(0,0,0,0.2);
        -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);
        border-color:#A1A1A1;
        box-shadow:0 2px 2px rgba(0,0,0,0.2)
    }
    .ipsType_pagetitle a{font-size:23px;z-index:999}
    .desc.lighter.blend_links{color:#a4a4a4;float:left;font-size:11px}
    .desc.lighter,.desc.lighter.blend_links a{color:#A4A4A4}
    .desc,.desc.blend_links a,p.posted_info{color:#777;font-size:12px}
    .conect{display:inline-block;padding-left:5px}

    .seguir{float:right;position:relative}
    .seguir a{
        -moz-border-radius:2px;
        -moz-box-shadow:0 1px 2px rgba(0,0,0,0.1), inset rgba(255,255,255,0.7) 0 1px 0;
        -webkit-border-radius:2px;
        -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1), inset rgba(255,255,255,0.7) 0 1px 0;
        background:#ececec url(http://i45.tinypic.com/2hrd3tg.png) repeat-x 0 0;
        border:1px solid #d0d0d0;
        border-radius:2px;
        box-shadow:0 1px 2px rgba(0,0,0,0.1), inset rgba(255,255,255,0.7) 0 1px 0;
        color:#616161!important;
        cursor:pointer;
        display:inline-block;
        font-size:11px;
        height:24px;
        line-height:24px;
        padding:0 10px;
        text-shadow:#fff 0 1px 0;
        white-space:nowrap
    }
    .seguir a:hover{background-color:#f8f8f8;color:#4c4c4c}


these codes haves copyrights?

Nope. I belive it's created by Dion but re-writed by some other user who didn't write copyrights.

This is illegal? Nep ?

No. That is normall codes. And without copyrights, just copy them. It isn't ilegal. Ilegal is if you are writte that code on your forum like tutorial, and it not your's, etc. No if you are use them and paste for your forum.

Just copy that

Is it solved now?

solved my friend, thanks.

Solved ~> Locked