Change Button Text?

[Lauren]

I searched on this support forum & in my forum's admin panel, but I can seem to find out how to change the text of the buttons... I one in particular that I'm trying to change is when you're replying to a thread, the button to post your message says "Create Post", I want to change it to say "Post Reply". Someone mentioned to me that it confused him sometimes as it almost seemed to him like he was created a new thread instead of replying to one. If there's already a thread on this, I'm sorry. Thanks for your help!

[Stinky666]

May 1, 2013 17:45:54 GMT -8 Lauren said:

I searched on this support forum & in my forum's admin panel, but I can seem to find out how to change the text of the buttons... I one in particular that I'm trying to change is when you're replying to a thread, the button to post your message says "Create Post", I want to change it to say "Post Reply". Someone mentioned to me that it confused him sometimes as it almost seemed to him like he was created a new thread instead of replying to one. If there's already a thread on this, I'm sorry. Thanks for your help!

Admin > Themes > Layout Templates > Posting Page
On line 62 you should see:

<span class="float-right">$[form.post.button]</span>

Change it for the following:

<span class="float-right"><a href="$[form.post.button.href]">Post Reply</a></span>

Doing the above, you have added the parts in red. If you ever need to undo it, just remove those parts

[Lauren]

Thanks Stinky666, that worked... but it just changed the button to a text link... I thought you could actually change the text on the button... I was thinking that the button was just a styleized span or div or something the way the "new" icon is, so that users could change the colors & look of it, I just wanted to change what the button said. Is there a way to do that, keep it a button, but change the text? Or, if not, how would I styleize the text to look like the button? Thanks!

[Stinky666]

May 2, 2013 15:29:58 GMT -8 Lauren said:

Thanks Stinky666, that worked... but it just changed the button to a text link... I thought you could actually change the text on the button... I was thinking that the button was just a styleized span or div or something the way the "new" icon is, so that users could change the colors & look of it, I just wanted to change what the button said. Is there a way to do that, keep it a button, but change the text? Or, if not, how would I styleize the text to look like the button? Thanks!

I'm not too sure. Hmmm.. It used to always change it to keep/stylize like the button.
Hopefully someone else can help with this because I have no idea. Last time I did it, it did keep the styled.

[Shrike]

The buttons aren't plain anchor links, they're input buttons, so the code needs to be suitably different. In the same place as before, change this line as shown. You change the text on the button by changing the value property of the button, shown with underline here.

Before: <span class="float-right">$[form.post.button]</span>
After:   <span class="float-right"><input id="$[form.post.button.id]" name="post" tabindex="4" value="Post Reply" type="submit"></span>

Edit: If you were linked to this thread from elsewhere, make sure to also check the later posts (specifically page 2).

[Stinky666]

May 3, 2013 6:20:29 GMT -8 Shrike said:

The buttons aren't plain anchor links, they're input buttons, so the code needs to be suitably different. In the same place as before, change this line as shown. You change the text on the button by changing the value property of the button, shown with underline here.

Before: <span class="float-right">$[form.post.button]</span>
After:   <span class="float-right"><input id="$[form.post.button.id]" name="post" tabindex="4" value="Post Reply" type="submit"></span>

Does this apply for all those types of buttons, so quick reply too for instance?

[Shrike]

May 3, 2013 6:25:56 GMT -8 Stinky666 said:

May 3, 2013 6:20:29 GMT -8 Shrike said:

The buttons aren't plain anchor links, they're input buttons, so the code needs to be suitably different. In the same place as before, change this line as shown. You change the text on the button by changing the value property of the button, shown with underline here.

Before: <span class="float-right">$[form.post.button]</span>
After:   <span class="float-right"><input id="$[form.post.button.id]" name="post" tabindex="4" value="Post Reply" type="submit"></span>

Does this apply for all those types of buttons, so quick reply too for instance?

As far as I can tell, yes, it does. If in doubt, use right-click > Inspect Element and check to see what the code for it is.

[Stinky666]

May 3, 2013 7:06:40 GMT -8 Shrike said:

May 3, 2013 6:25:56 GMT -8 Stinky666 said:

Does this apply for all those types of buttons, so quick reply too for instance?

As far as I can tell, yes, it does. If in doubt, use right-click > Inspect Element and check to see what the code for it is.

Alright
I'm also gonna bookmark this cos it's a very useful "how to".

[Oneeb Malik]

Instead of making it an input, you could alternatively add "class = "button" to the anchor and it will inherit the default forum button styles. For example:

<span class="float-right"><a href="$[form.post.button.href]" class = "button">Post Reply</a></span>

It applies to the Create Post button as well.

Edit: Sorry my mistake. That just adds the stylings to it, not the function.

[Shrike]

May 3, 2013 7:30:10 GMT -8 Oneeb Malik said:

Instead of making it an input, you could alternatively add "class = "button" to the anchor and it will inherit the default forum button styles. For example:

<span class="float-right"><a href="$[form.post.button.href]" class = "button">Post Reply</a></span>

It applies to the Create Post button as well.

While that's technically correct (the best kind of correct), changing it to an anchor link makes the button stop working mainly because $[form.post.button.href] doesn't exist. Styling it so it looks like a button doesn't mean it will work as one. Look at the attributes the input one has and you'll see what is different.

[Oneeb Malik]

May 3, 2013 7:35:54 GMT -8 Shrike said:

May 3, 2013 7:30:10 GMT -8 Oneeb Malik said:

Instead of making it an input, you could alternatively add "class = "button" to the anchor and it will inherit the default forum button styles. For example:

<span class="float-right"><a href="$[form.post.button.href]" class = "button">Post Reply</a></span>

It applies to the Create Post button as well.

While that's technically correct (the best kind of correct), changing it to an anchor link makes the button stop working mainly because $[form.post.button.href] doesn't exist. Styling it so it looks like a button doesn't mean it will work as one. Look at the attributes the input one has and you'll see what is different.

Ah yeah I just checked again. Your right. I can't believe I overlooked that.

[Lauren]

Thanks so much Shrike! That worked great.

[Lauren]

May 6, 2013 13:53:53 GMT -8 Lauren said:

Thanks so much Shrike! That worked great.

Uh oh, help! I just decided to check to see what the button said when creating a new thread, to see if I wanted to change it too, but it now says "Post Reply" also... so, is there a way to make the button when creating a new thread say something different than when posting a reply to an existing thread? Thanks!

[Shrike]

May 6, 2013 14:00:10 GMT -8 Lauren said:

May 6, 2013 13:53:53 GMT -8 Lauren said:

Thanks so much Shrike! That worked great.

Uh oh, help! I just decided to check to see what the button said when creating a new thread, to see if I wanted to change it too, but it now says "Post Reply" also... so, is there a way to make the button when creating a new thread say something different than when posting a reply to an existing thread? Thanks!

Sure thing, we'll do this by checking if there is a Thread Summary when posting (it always shows when replying to an existing thread).

In the line we replaced earlier, find this part: value="Post Reply"
And then replace it with this:
{if $[summary]}value="Post Reply"{else if $[form.updated_reason.input]}value="Save Changes"{else}value="Create Post"{/if}

You can see the value attributes separated by the {else} tags. The first is for replying to an existing thread; the second for editing a post; and the third for creating a new one. Change them to what you want. The code editor may highlight things in red like there is an error, but there isn't one, it's just getting confused by the {if} codes.

Edit: I just realised this will change the button when editing a post. If you copied the code before seeing this edit, re-copy it from this post as I've added a case for editing the post.

[Lauren]

That's so awesome, thanks Shrike!!