Μετάβαση στο περιεχόμενο

IPB Το Προφιλ του χρηστη οπως το XenForo


sylvester73

Recommended Posts

Καλησπέρα σας

Πάμε να δούμε πως θα κάνετε τα προφίλ να φαίνονται όπως στα XenForo Forums

Ακολουθήστε της παρακάτω οδηγίες.

 

 


1)Συνδεθείτε στο ACP του forum σας
2)Κάντε κλικ στη καρτέλα Look&Feel-Επιλεξτε το σκιν που θέλετε και πατήστε στη καρτέλα CSS και από εκεί πέρα πατήστε στο ipb_styles.css
3)Όταν μπείτε στο ipb_styles.css αντιγράφετε το παρακάτω κωδικα και το βάζετε στο τέλος

 

.user_details {
background: rgb(13, 13, 13)) url('{style_images_url}/tab-selected-light.png') repeat-x bottom;
border: 0px solid rgb(13, 13, 13);
border-top-color: rgb(13, 13, 13);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 -1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
-khtml-box-shadow: inset 0 -1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);
background-image: -o-linear-gradient(bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);
background-image: linear-gradient(to top, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);
position: relative;
}
.avatar {
background-color: rgb(13, 13, 13);
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.75), 0 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px rgba(255,255,255,0.75), 0 1px rgba(0,0,0,0.075);
-khtml-box-shadow: inset 0 1px rgba(255,255,255,0.75), 0 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px rgba(255,255,255,0.75), 0 1px rgba(0,0,0,0.075);
background-image: -webkit-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
}
.arrow {
position: absolute;
top: 10px;
right: -10px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: rgb(199, 216, 233);
-moz-border-left-colors: rgb(199, 216, 233);
border-right: none;
_display: none;
}
.arrow span {
position: absolute;
top: -10px;
left: -11px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: rgb(238, 243, 248);
-moz-border-left-colors: rgb(238, 243, 248);
border-right: none;
}
.ribbon {
font-weight: bold;
font-size: 10px;
margin: -5px -4px -2px;
text-align: center;
}
.ribbon li {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
-khtml-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-khtml-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
-khtml-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
padding: 1px;
position: relative;
margin-bottom: 5px;
}
.ribbon li .Rleft {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-khtml-border-top-left-radius: 3px;
border-top-left-radius: 3px;
left: -1px;
}
.ribbon li div {
position: absolute;
top: -4px;
width: 4px;
height: 4px;
}
.ribbon li .Rright {
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-khtml-border-top-right-radius: 3px;
border-top-right-radius: 3px;
right: -1px;
}
.ribbon1 {
color: #ffffff;
background-color: rgb(13, 13, 13);
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid rgb(13, 13, 13);
}
.ribbon1 div {
background-color: rgb(13, 13, 13);
}
.ribbon2 {
background-color: rgb(13, 13, 13);
margin-top: 10px;
margin-bottom: 5px;
border: 1px solid #C4C7C7;
}
.ribbon2 div {
background-color: #C4C7C7;
}
.extraUserInfo {
font-size: 11px;
background-color: rgb(13, 13, 13);
padding: 0px 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
.pairsJustified {
margin: 2px 0 0;
font-size: 9px;
border-bottom: 1px dashed #222!important;
overflow: hidden;
line-height: 1.5;
}
.pairsJustified dt {
padding-right: 5px;
font-size: 11px!important;
float: left;
text-align: left;
max-width: 100%;
margin-right: 5px;
color: rgb(55, 134, 216);
}
.pairsJustified dd {
float: right;
font-size: 10px!important;
text-align: right;
max-width: 100%;
}


Μετά μπαίνετε στο userInfoPane και κάνετε αντικατάσταση αυτό που έχει, με το παρακάτω
 

<div itemscope itemtype="http://schema.org/Person" class='user_details'>
    <span class='hide' itemprop="name">{$author['members_display_name']}</span>
<span class="arrow"><span></span></span>
    <ul class='basic_info'>
        
        <if test="avatar:|:$author['member_id']">
            <li class='avatar'>
                <if test="canSeeProfiles:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
                <a itemprop="url" href="{parse url="showuser={$author['member_id']}" template="showuser" seotitle="{$author['members_seo_name']}" base="public"}" title="{$this->lang->words['view_profile']}: {$author['members_display_name']}" class='ipsUserPhotoLink'>
                </if>
                <if test="hasVariable:|:$this->settings['member_topic_avatar_max']">    
                    <img itemprop="image" src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_variable' />
                <else />
                    <img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
                </if>
                <if test="canSeeProfiles2:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
                </a>
                </if>
            </li>
        <else />
            <li class='avatar'>
                <img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
            </li>
        </if>

        
<if test="membertitle:|:$author['member_title']">
<ul class="ribbon">   
                <li class="ribbon1">
                    <div class="Rleft"></div>
                    <div class="Rright"></div>
                    {$author['member_title']}
                </li>

        
    </ul>
            
        </if>

<if test="rankimage:|:$author['member_rank_img']">
            <li class='group_icon'>
            <if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
                <img src='{$author['member_rank_img']}' alt='' />
            <else />
                {$author['member_rank_img']}
            </if>
            </li>
<ul class="ribbon">   
                <li class="ribbon2">
                    <div class="Rleft"></div>
                    <div class="Rright"></div>
                    {$author['_group_formatted']}
                </li>

        
    </ul>
        
<div class="extraUserInfo">
<if test="postCount:|:$author['member_id']">
<dl class="pairsJustified">

                        <dt>{$this->lang->words['m_posts']}:</dt>
                        <dd>{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}</dd>
                    </dl>
</if>
<dl class="pairsJustified">

                        <dt>Reputation:</dt>
                        <dd>{$author['pp_reputation_points']}</dd>
                    </dl>
<dl class="pairsJustified">

                        <dt>{$this->lang->words['m_joined']}</dt>
                        <dd>{parse date="$author['joined']" format="joined"}</dd>
                    </dl>
</div>    
        <if test="authorcfields:|:$author['custom_fields'] != """>
<div class="extraUserInfo">
        
            <foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
                <foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
                    <if test="$field != ''">
                        <li>
                            {$field}
                        </li>
                    </if>
                </foreach>
            </foreach>
        
</div>
    </if>
        <if test="authorwarn:|:$author['show_warn']">
            <li>
                <if test="hasWarningId:|:$options['wl_id']">
                    <img src='{$this->settings['img_url']}/warn.png' class='clickable' onclick='warningPopup( this, {$options['wl_id']} )' title='{$this->lang->words['warnings_issued']}' />
                </if>
                <a class='desc lighter blend_links' href='{parse url="app=members&amp;module=profile&amp;section=warnings&amp;member={$author['member_id']}&amp;from_app={$this->request['app']}&amp;from_id1={$contentid}&amp;from_id2={$options['id2']}" base="public"}' id='warn_link_{$contentid}_{$author['member_id']}' title='{$this->lang->words['warn_view_history']}'>{parse expression="sprintf( $this->lang->words['warn_status'], $author['warn_level'] )"}</a>
            </li>
        </if>

        </if>
    </ul>
    
    
</div>




Εαν σας βγαζει καποιο λαθος πειτε μου για να σας βοηθησω.
Φυσικα τα χρωματα δεν θα ταιριαζουν παντα με το σκιν σας, αλλα μπορω να σας βοηθησω στην αλλαγη τον χρωματον.



 

Link to comment
Share on other sites

  • 1 year later...

Αλλάζει το user info μέσα σε ένα θέμα όπως εδώ στα αριστερά (Username, Avatar, Group image etc etc) που εμφανίζονται οι πληροφορίες του χρήστη σε κάθε απάντηση που δημοσιεύει και αλλάζει με το στιλ του xenforo.

Link to comment
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. | Terms of Use