How to change "Post Buttons" from image to text

Go down

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

Post by Mati on 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...
avatar
Mati
Active Poster

Posts : 1906
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

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

Post by levy on 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.
avatar
levy
Hyperactive

Male Posts : 2587
Reputation : 346
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

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

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

@Mati could you provide the version of your forum ?

Thanks
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

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

Post by Mati on 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
avatar
Mati
Active Poster

Posts : 1906
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

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

Post by Ange Tuteur on 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;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

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

Post by Mati on 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
avatar
Mati
Active Poster

Posts : 1906
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

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

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

Any chance to change them...
avatar
Mati
Active Poster

Posts : 1906
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

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

Post by Ange Tuteur on 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
   
    }
  }
});
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


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