With this tutorial we gonna change the icons for thanks system , not only to have the + and -
Step 1 - CSS
Go in Administration Panel -> Display -> Colors -> CSS Stylesheet
And add that code
Administration Panel -> Modules -> HTML & Javascript -> Javascript Management
Create a new javascript :
Tick in topics and add that Source code
Step 1 - Template
Administration Panel -> Display -> Templates -> Viewtopic_body
Click on icon to modify ( ) and find that fragment , it's for +
Step 2 - CSS
Go in Administration Panel -> Display -> Colors > CSS Stylesheet
And add that code :
For phpBB3 and Invision
Step 1 - CSS
And add that code
- Code:
.vote .vote-no-bar{
display: none;
}
.vote{
width: auto;
}
.vote-button{
width: auto;
}
.vote-button a{
font-size: 0px !important;
color: transparent !important;
}
Create a new javascript :
Tick in topics and add that Source code
- Code:
jQuery(document).ready(function(){
jQuery("div.vote-button a:contains('+')").append(jQuery('<img src="http://i.imgur.com/VT55P.png" alt="Message Necessary" Title="Message Necessary" />'));
jQuery("div.vote-button a:contains('-')").append(jQuery('<img src="http://i.imgur.com/BE86Y.png" alt="Message Unnecessary" Title="Message Unnecessary" />'));
});
For phpBB2 and punBB
Step 1 - Template
Click on icon to modify ( ) and find that fragment , it's for +
- Code:
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->
- Code:
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="http://i.imgur.com/VT55P.png" alt="Message Necessary" Title="Message Necessary" /></a></div>
<!-- END switch_vote -->
- Code:
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
- Code:
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"><img src="http://i.imgur.com/BE86Y.png" alt="Message Unnecessary" border="0" /></a></div>
<!-- END switch_vote -->
Step 2 - CSS
And add that code :
- Code:
.vote {
float:right;
margin-left:4px;
width: 30px;
}
.vote .vote-no-bar {
text-align: center;
}