How to change "Post Buttons" from image to text Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    How to change "Post Buttons" from image to text

    Mati
    Mati
    Active Poster


    Posts : 1932
    Reputation : 333
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    In progress How to change "Post Buttons" from image to text

    Post by Mati August 3rd 2015, 7:17 pm

    I would like to know how to change "Post Buttons" from image to text also give a class for them...
    levy
    levy
    Hyperactive


    Male Posts : 2631
    Reputation : 350
    Language : English, Romanian
    Location : Romania

    In progress Re: How to change "Post Buttons" from image to text

    Post by levy August 4th 2015, 3:49 am

    You mean Replay, New Topic, Locked, Quote and all others or what? I don't understand it at all.
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    In progress Re: How to change "Post Buttons" from image to text

    Post by Ange Tuteur August 4th 2015, 11:08 am

    @Mati could you provide the version of your forum ?

    Thanks
    Mati
    Mati
    Active Poster


    Posts : 1932
    Reputation : 333
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    In progress Re: How to change "Post Buttons" from image to text

    Post by Mati August 4th 2015, 6:11 pm

    levy wrote:You mean Replay, New Topic, Locked, Quote and all others or what? I don't understand it at all.

    Yes, levy

    Ange Tuteur wrote:@Mati could you provide the version of your forum ?

    Thanks

    I'm using PunBB
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    In progress Re: How to change "Post Buttons" from image to text

    Post by Ange Tuteur August 4th 2015, 6:43 pm

    Well for the reply / new topic buttons you can just edit the templates. An example with the viewtopic_body template :
    Code:
          <p class="posting">
             <!-- BEGIN switch_user_authpost -->
             <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;
             <!-- END switch_user_authpost -->

             <!-- BEGIN switch_user_authreply -->
             <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
             <!-- END switch_user_authreply -->
          </p>

    Find the above and just replace the image element ( for example <img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /> ) with text and add a class to the link.

    I'm not entirely sure about the post options, but you could just do something like this for example :

    Modules > JS codes management > new script

    Placement : In the topics
    Code:
    $(function() {
      for (var opts = $('.post-options'), i = 0, j = opts.length, k, l, c; i < j; i++) {
        for (c = opts[i].childNodes, k = 0, l = c.length; k < l; k++) {
         
          c[k].className += ' post-button'; // add class
          c[k].tagName == 'A' ? c[k].innerHTML = c[k].firstChild.alt : c[k].src = ''; // change content depending on tag type
         
        }
      }
    });
    ( The script just goes over the post options and applies the ALT attribute content as the innerHTML content, instead of the image )

    Then some CSS to style the class added via JavaScript :
    Code:
    .post-button {
      background:#EEE;
      border:1px solid #CCC;
      padding:3px;
    }
    Mati
    Mati
    Active Poster


    Posts : 1932
    Reputation : 333
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    In progress Re: How to change "Post Buttons" from image to text

    Post by Mati August 6th 2015, 9:23 pm

    Sorry @Ange Tuteur I'm using PhpBB3

    And I want to change from Post new topic : to View IP address of poster : in text
    Mati
    Mati
    Active Poster


    Posts : 1932
    Reputation : 333
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    In progress Re: How to change "Post Buttons" from image to text

    Post by Mati August 9th 2015, 2:08 pm

    Any chance to change them...
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    In progress Re: How to change "Post Buttons" from image to text

    Post by Ange Tuteur August 9th 2015, 2:15 pm

    Same methods I posted should apply. However, for the script, it just needs a few changes to the selected elements.
    Code:
    $(function() {
      for (var opts = $('.profile-icons'), i = 0, j = opts.length, k, l, c; i < j; i++) {
        for (c = opts[i].getElementsByTagName('A'), k = 0, l = c.length; k < l; k++) {
       
          c[k].className += ' post-button'; // add class
          c[k].innerHTML = c[k].firstChild.alt; // change content depending on tag type
       
        }
      }
    });