Reputation System [ +/- ] with FLAT DESIGN

[Strimblaster]

Hi this is my first tutorial how you can do that:

 

Step 1.

Admin CP -> Look & Feel -> Select Template -> Other Global Templates -> Other Global Templates -> repButtons

REPLACE ALL CODE

 

<php>
// Apps can set the key empty to disable, but this will allow all apps to use the popup to show who repped
if( !isset($data['jsCallback']) )
{
$data['jsCallback'] = "ipb.global.repPopUp( this, {$data['primaryId']}, '{$data['app']}', '{$data['type']}' );";
}
$repClickable = ( $this->memberData['gbw_view_reps'] AND $data['jsCallback'] ) ? 'onclick="' . $data['jsCallback'] . '"' : '';
</php>
<if test="reputationBox:|:$this->settings['reputation_enabled']">
<if test="canRep:|:!( $this->settings['reputation_protected_groups'] && in_array( $member['member_group_id'], explode( ',', $this->settings['reputation_protected_groups'] ) ) )">
<if test="isLike:|:$this->settings['reputation_point_types'] == 'like'">
<div class='ipsLikeBar right clearfix' id='{$data['domCountId']}'>
<ul class='ipsList_inline'>
<if test="(!isset($data['hide_text']) OR !$data['hide_text'] )">
<li id="{$data['domLikeStripId']}" class='ipsLikeBar_info' <if test="hasNoLikes:|:!$data['likeFormatted']"></if>>
{$data['likeFormatted']}
</li>
</if>
<if test="canGiveRep:|:IPSMember::canGiveRep( $data, $member ) !== false && $this->memberData['member_id']">
<li <if test="giveRepUp:|:IPSMember::canRepUp( $data, $member ) === false"></if>>
<a class='ipsLikeButton ipsLikeButton_enabled rep_up' href='{$this->settings['base_url']}app=core&amp;module=global&amp;section=reputation&amp;do=add_rating&amp;app_rate={$data['app']}&amp;type={$data['type']}&amp;type_id={$data['primaryId']}&amp;rating=1&amp;secure_key={$this->member->form_hash}&amp;post_return={$data['primaryId']}' title='{$this->lang->words['do_like_up']}'>{$this->lang->words['like_this']}</a>
</li>
<li <if test="giveRepDown:|:IPSMember::canRepDown( $data, $member ) === false"></if>>
<a class='ipsLikeButton ipsLikeButton_disabled rep_down' href='{$this->settings['base_url']}app=core&amp;module=global&amp;section=reputation&amp;do=add_rating&amp;app_rate={$data['app']}&amp;type={$data['type']}&amp;type_id={$data['primaryId']}&amp;rating=-1&amp;secure_key={$this->member->form_hash}&amp;post_return={$data['primaryId']}' title='{$this->lang->words['do_like_down']}'>{$this->lang->words['unlike_this']}</a>
</li>
</if>
</ul>
</div>
<else />
<div class='rep_bar clearfix <if test="pos:|:!$data['position'] || $data['position'] == 'right'">right</if>' id='{$data['domCountId']}'>
{parse variable="repClickable" default="" oncondition="$this->memberData['gbw_view_reps']" value=" clickable"}

<if test="canGiveRep:|:IPSMember::canGiveRep( $data, $member ) !== false && $this->memberData['member_id']">
<div class="orate-btns">
<span> <if test="giveRepUp:|:IPSMember::canRepUp( $data, $member ) === false"></if>
<a href='{$this->settings['base_url']}app=core&amp;module=global&amp;section=reputation&amp;do=add_rating&amp;app_rate={$data['app']}&amp;type={$data['type']}&amp;type_id={$data['primaryId']}&amp;rating=1&amp;secure_key={$this->member->form_hash}&amp;post_return={$data['primaryId']}' class='rep_up' title='{$this->lang->words['reputation_up']}'>{parse replacement="rep_up"}</a>

<if test="giveRepDown:|:IPSMember::canRepDown( $data, $member ) === false"></if>
<a href='{$this->settings['base_url']}app=core&amp;module=global&amp;section=reputation&amp;do=add_rating&amp;app_rate={$data['app']}&amp;type={$data['type']}&amp;type_id={$data['primaryId']}&amp;rating=-1&amp;secure_key={$this->member->form_hash}&amp;post_return={$data['primaryId']}' class='rep_down' title='{$this->lang->words['reputation_down']}'>{parse replacement="rep_down"}</a>
</span>
</div>
</if>

<if test="isNotLike:|:$this->settings['reputation_point_types'] != 'like'">
<if test="hasNoRep:|:$data['rep_points'] == 0">
<span class='reputation2 zero2 rep_show{parse variable="repClickable"}' title='{$this->lang->words['reputation']}' {$repClickable}>
</if>
<if test="hasPosRep:|:$data['rep_points'] > 0">
<span class='reputation2 positive2 rep_show{parse variable="repClickable"}' title='{$this->lang->words['reputation']}' {$repClickable}>
</if>
<if test="hasNegRep:|:$data['rep_points'] < 0">
<span class='reputation2 negative2 rep_show{parse variable="repClickable"}' title='{$this->lang->words['reputation']}' {$repClickable}>
</if>
{parse expression="intval($data['rep_points'])"}
</span>

</if>
</div>
</if>
</if>
</if>
<script type='text/javascript'>
ipb.global.registerReputation( '{$data['domCountId']}', { domLikeStripId: '{$data['domLikeStripId']}', app: '{$data['app']}', type: '{$data['type']}', typeid: '{$data['primaryId']}' }, parseInt('{$data['rep_points']}') );
</script>

 

Step 2.

Admin CP -> Look & Feel -> Select Template -> Other Global Templates -> Other Global Templates -> repMoreDialogue

<h3>{$this->lang->words['liked_by_title']}</h3>
<div class='likepop fixed_inner'>
<ul class='ipsList_withminiphoto'>
<foreach loop="$data as $mid => $data">
<li class='clearfix ipsPad_half <if test="$data['like_is_anon']">faded</if>'>
<a href='{parse url="showuser={$data['member_id']}" seotitle="{$data['members_seo_name']}" template="showuser" base="public"}' title='{$this->lang->words['view_profile']}' class='ipsUserPhotoLink left'>
<img src='{$data['pp_small_photo']}' class='ipsUserPhoto ipsUserPhoto_mini' />
</a>
<div class='list_content'>
<a href='{parse url="showuser={$data['member_id']}" seotitle="{$data['members_seo_name']}" template="showuser" base="public"}' title='{$this->lang->words['view_profile']}'><strong>{$data['members_display_name']}</strong></a>
<em class='desc'>{$this->lang->words['likeadded']} {parse date="$data['rep_date']" format="short"}</em>
<p class='desc'>
{parse expression="IPSMember::makeNameFormatted( $data['g_title'], $data['g_id'] )"}
</p>
</div>
</li>
</foreach>
</ul>
</div> 

 

Step 3.

Admin CP -> Look & Feel -> Select Template -> Other Global Templates -> Other Global Templates -> reputationPopup

<div>
    <h3>{$this->lang->words['rep_given']}</h3>
    <div class='ipsPad' style='min-height: 60px'>
        <if test="empty($reps)">
            <em>{$this->lang->words['no_rep']}</em>
        <else />
            <foreach loop="$reps as $r">
                <if test="$r['rep_rating'] > 0">
                    {parse replacement="rep_up"}
                <else />
                    {parse replacement="rep_down"}
                </if>
                 <a href='{parse url="showuser={$r['member']['member_id']}" base="public" template="showuser" seotitle="{$r['member']['members_seo_name']}"}'>{$r['member']['members_display_name']}</a><br />
            </foreach>
        </if>
    </div>
</div>

 

Step 4.

Admin CP -> Look & Feel -> Select Template ->CSS -> ipb_styles

.rep_bar {
white-space: nowrap;
margin: 6px 4px;
}
.rep_bar
.reputation {
font-size: 10px;
padding: 2px
10px !important;
}
.rep_up {
position: absolute;
top: 0;
right: 0;
padding: 2px
3px;
border-bottom: 1px solid #18A275;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
border-radius: 0 6px 0 0;
}

.rep_up:hover {
background: #2ECC71;
border-radius: 0 6px 0 0;
}

.rep_down:hover {
background: #E74C3C;
border-radius: 0 0 6px 0;
}

.rep_down {
border-radius: 0 0 6px 0;
position: absolute;
bottom: 1px;
background: #D35400;
right: 0px;
padding: 0px
6px;
padding-bottom: 6px;
margin-bottom: -1px;
border-radius: 0 0 6px 0;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}

.orate-btns {
position: relative;
height: 40px;
float: right;
background-color: #1abc9c;
width: 22px;
border-color: #1abc9c;
text-align: center;
border-radius: 0 6px 6px 0;
}
.reputation.negative, .members
li.negative {
background: #E74C3C;
border: 1px
solid #C0392B;
}

.reputation.negative:hover, .members li.negative:hover {
background: #C0392B;
}

.reputation.positive,.reputation.negative {
color: #fff;
}

.reputation.zero {
background: #95A5A6;
color: #fff;
border: 1px
solid #929292;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}

.reputation.zero:hover {
background: #929292;
}
.reputation2.positive2 {
border-radius: 6px;
background-color: #34495e;
color: #1abc9c;
border-left: 1px solid transparent;
}

.reputation2.negative2 {
border-radius: 6px;
background-color: #34495e;
color: #FF7B47;
border-left: 1px solid transparent;
}

.reputation2 {
width: 60px;
text-align: center;
height: 32px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
font-size: 18px;
font-family: "Trebuchet MS",tahoma;
color: white;
font-weight: normal;
display: block;
text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
cursor: pointer;
height: 40px;
line-height: 40px;
}

.reputation2:hover {
background-color: #53718F !important;
}

.reputation2.zero2 {
border-radius: 6px;
background-color: #34495e;
color: #fff;
border-left: 1px solid transparent;
} 

And upload images to your skin:

http://gamewar.eu/public/style_images/carbon/rep_up.png
http://gamewar.eu/public/style_images/carbon/rep_down.png

Edited December 30, 2014 by Davlin
Please wrap enormous blocks of code in spoiler tags, in the future.

[Söel]

good tutorial 

 

could level up the image in another location? Type the imgur because this link is not opening here.

[Slow_Brothers]

This is realy nice. I think it's all better than default,but there is bug's with other type of reputation when you use this code. I think you need to re-edit it and make it better.

[trewq34]

That's a pretty unique and cool design. Thanks for the tutorial

[Slow_Brothers]

I found a bug. When you hit +rep button you need to reload a page to dissapear the + and - buttons,but when you hit -rep the + and - buttons dont dissapear.

[Derosier]

Thanks although I believe this will need to be re-written. Seems as if their are bugs.

[Pamokele]

Could someone help?? Links of images not forking :S

[Paulius`]

Nothing cool, looks terible, but like for sharing

[Lightning]

Nothing cool, looks terible, but like for sharing

Why? Idk why, but liked.

 

i need the image too =X

[HeiC]

Its really nice , but i got few bugs.

[Puzzle]

Can anyone Please Upload The Attachment Images

[Bogdan.]

Very nice , thanks very much.

[sylvester73]

Links of images not forking 

[BlindfoldedNinja]

http://gamewar.eu/public/style_images/carbon/rep_up.png
http://gamewar.eu/public/style_images/carbon/rep_down.png

 

These have all GONE.

[Tony]

http://gamewar.eu/public/style_images/carbon/rep_up.png

http://gamewar.eu/public/style_images/carbon/rep_down.png

 

These have all GONE.

 

The website itself is offline.

 

Given the circumstances, I'm locking this thread to avoid any further "missing images" complaints (which we have had plenty of). If at any point the site and the images become available again, contact me or another Staff member and request that this topic be reopened.