Username:
Password:

Hello Guest


If you want to join in our community , please register or login , you have in header a login form , or if you want to register ,press me .
  • Forum
  • Forum
  • Forum
  • Forum
  • Forum
  • fmSoftware is for sale , if you want to buy the forum and/or the old themes , jaques.gfx skype or roby_cs_reax@yahoo.com for EMAIL.

    You are not connected. Please login or register

    View previous topic View next topic Go down  Message [Page 1 of 1]

    Sasori

    Posts : 311
    Points : 1891
    Thanks : 5
    Administrator

    With this tutorial we gonna change the icons for thanks system , not only to have the + and -

    For phpBB3 and Invision


    Step 1 - CSS

    Go in Administration Panel -> Display -> Colors -> CSS Stylesheet
    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;
    }
    Step 2 - Javascript
    Administration Panel -> Modules -> HTML & Javascript -> Javascript Management
    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
    Administration Panel -> Display -> Templates -> Viewtopic_body
    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 -->
    And replace with this :

    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 -->
    Find that fragment ( it's for - button )
    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 -->
    And replace with this
    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 -->
    Save the template , and public the template ()

    Step 2 - CSS

    Go in Administration Panel -> Display -> Colors > CSS Stylesheet
    And add that code :

    Code:
    .vote {
    float:right;
    margin-left:4px;
    width: 30px;
    }
    .vote .vote-no-bar {
    text-align: center;
    }
    And that's all , good luck everyone , if you have problems use the support sections.

    Zyon

    Posts : 272
    Points : 1860
    Thanks : 2
    manager

    Good tutorial :)

    unleashed

    Posts : 11
    Points : 1547
    Thanks : 0
    User

    thanks fot his tut candy_fear ;)

    Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]

    Permissions in this forum:
    You cannot reply to topics in this forum