I would like to know how to change "Post Buttons" from image to text also give a class for them...
3 posters
How to change "Post Buttons" from image to text
Mati- Active Poster
- Posts : 1928
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services
levy- Hyperactive
- Posts : 2631
Reputation : 350
Language : English, Romanian
Location : Romania
You mean Replay, New Topic, Locked, Quote and all others or what? I don't understand it at all.
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania
Mati- Active Poster
- Posts : 1928
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services
levy wrote:You mean Replay, New Topic, Locked, Quote and all others or what? I don't understand it at all.
Yes, levy
I'm using PunBB
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania
Well for the reply / new topic buttons you can just edit the templates. An example with the viewtopic_body template :
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
Then some CSS to style the class added via JavaScript :
- 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>
<!-- 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
}
}
});
Then some CSS to style the class added via JavaScript :
- Code:
.post-button {
background:#EEE;
border:1px solid #CCC;
padding:3px;
}
Mati- Active Poster
- Posts : 1928
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services
Sorry @Ange Tuteur I'm using PhpBB3
And I want to change from Post new topic : to View IP address of poster : in text
And I want to change from Post new topic : to View IP address of poster : in text
Mati- Active Poster
- Posts : 1928
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services
Any chance to change them...
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania
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
}
}
});