How to Replace the Default Comment Submit Button in the Thesis Theme for WordPress with a Custom Image

by Token Health on November 12, 2011 in Thesis

If you are using the Thesis theme for WordPress you have probably noticed how the default comment button is somewhat ugly and bland. There is a tutorial located over here http://diythemes.com/thesis/rtfm/replace-comment-submit-button-image/ describing how to replace the default comment button with an image sprite. I want to expand on this a bit and show you how to make your own personal image button using Adobe Photoshop.

The default comment button in the Thesis theme looks like the following.

When you hover over Submit the text changes to a green color. In fact this button is what is known as an image sprite.

In fact the button is one image that has the normal black text for the button on the right and the green text on the left. Again the button is actually a single image called a sprite that appears to have two images in it one for the normal default button state and then another for the hover over the button state. What happens is is that you see the left side of the image as the default state and when you hover over the image then you will see the right side of the image. This makes it appear that the button changes when you hover over it.

In order to make your own button you will need to make your own image sprite that has the default button on the right and the hover state for the button on the left. You can open up Adobe Photoshop or another similar type of program.

Load up Adobe Photoshop and create a new image that has a width of 330 and height of 38 with a white background.

Then you should create another new image that has a width of 163 and a height of 38 with a white background.

Now you can use the paint bucket tool (it is in the sidebar on the left) to fill the background with a color you want to choose. I will choose a blue color.

Now you will have this.

Next you will want to add in some text that likely will say Submit.

After you add the submit text you can change the font type, color, and size. I have selected Eras BOLD ITC with size of 24 pt and a color of white. Then you can move the Submit text to the right a bit in the center like I have.

Then you can draw in a rounded rectangle or other shape next to the Submit text and make the color of the shape a color of your choice. I will choose white.

Now you should have something that looks like this.

Now you will need to go to Layer > Merge Visible.

Then use the Rectangle Marquee Tool and select around the button and then hold Ctrl + C on your keyboard in order to copy the  button.

Now go back to the 330 by 38 image you had created originally and paste this image into it. You can paste using Ctrl + V on your keyboard. Then move this image all the way to the left. Then use Ctrl + V again to paste again. Then move this second image all the way to the right. You should now have something that looks like this.

Next select the custom shape tool and select the checkmark.

Now draw the checkmark in the white rectangular box you drew for the right submit button.

Then go to Layer > Arrange > Bring to Front.

Now you can change the color of the arrow under the Shape in the layers panel on the bottom right side of your screen in Adobe Photoshop. I have made the color black.

Now you should produce your new image sprite.

Upload this image sprite to your server. Now you will want to add the following lines of code to your custom.css file.

/*add custom submit button for comments */
.custom form#commentform input#submit.form_submit {
background:transparent url('http://www.mydomain.com/images/my_sprite_image.jpg') 0 0 no-repeat;
width:160px !important; height:36px;
display:block; border:0px; padding:0px;
text-indent:-9999px; line-height:0px;
}

.custom form#commentform input#submit.form_submit:hover {
background-position: -167px 0;

Now you will have to change the URL in the code above to reflect where you uploaded the image sprite and the name and type you decided to call it. You may also need to play around with the background-position pixel number a bit. In addition, you may need to play around with recreating these steps or trying slightly different pixel sizes to get the image sprite to work properly for your new comment button.

If everything goes smoothly you should your new comment button you created replace the default comment button in the Thesis theme and when you hover over the comment button you should see the check box appear.

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:

  • Alternative Media
  • Blogging
  • Companies
  • Finance
  • Health
  • Other Bloggers
  • SEO
  • Thesis
  • Viral Videos