This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
The default Thesis comments submit input button can be left default, or it can be modified extensively with CSS edits.
By default, the comment submit looks like this, where the right-side image demonstrates the “hover” state seen when your mouse is positioned over the input:
One common request of Thesis members is a general desire to brand their site with certain fonts or graphical additions.
Replacing the default comment submit button with a custom image is one method to achieve a unique look and feel.
Better still is an image that provides — much like the default submit button — visual feedback to the user that it can be clicked. Changing images on the hover state accomplishes this.
The below represents an image sprite that will appear (left image) until an input device is hovered over it — at which point (right image) a “similar but different” image will be shown.
These are not, in fact, two separate images, but are a single image called a sprite. One side or the other is shown, where which side appears is based on the input position of the visitor.
Put simply, the right-side image appears when hovered over by the cursor.
Here’s how to go from the default Thesis comment submit button to an image sprite like the one shown above.
The key lies in css image replacement of an existing target. Don’t worry, it’s easier to do than it is to say!
First, you need an image. A sprite, if you want to follow this example closely. The image above can be used for testing purposes — just right-click on the image shown, select “save as” to your desktop, and it’s now yours to modify or use as-is.
Rename the saved image sprite file “comment-submit.png” and, finally, upload the image sprite to your /custom/images/ directory via FTP or cPanel.
Aside from the basic concept of creating an accessible image, the steps to this point are optional.
If followed precisely, the benefit of following the steps outlined above is that, when combined with the following CSS entry, the result will be an immediate display of the sprite image in place of the default Thesis comment submit input.
To display your image, add this to your custom.css file contents:
.custom form#commentform input#submit.form_submit {
background:transparent url('images/comment-submit.png') 0 0 no-repeat;
width:190px !important; height:42px;
display:block; border:0px; padding:0px;
text-indent:-9999px; line-height:0px;
}
.custom form#commentform input#submit.form_submit:hover {
background-position: -198px 0;
}
To use your own image sprite, you can create an image that is replicated either “top and bottom” or — as in the example here — “left and right” and modify the text or colors or icons on the clone to provide visitor feedback on the hover action.
You may want to make certain changes to the CSS above to suit your own comment submission button.
For example, you might want to change the width of the image, 190px in the snippet above. Note that this is the width of the visible portion of the image in each “state” — normal or mouse hovering — and the width definition is thus about half the actual image sprite’s “real” width.
Additionally, your comment submit image may be a height other than 42px, where again this represents the height of “one” of the two images included in the sprite.
Finally, the way an image sprite works is to change the background position of the image on the hover state.
This is the second CSS entry, and in the example “-198px” is where the background moves horizontally (198 pixels to the left) and the “0” controls vertical positioning — usually, one of the two values will be zero. In basic terms, your image sprite is likely to only move either up and down or left and right — not both.
That’s all there is to it!
Whether you would like to include graphical branding elements in your comment submit input, or a special icon — or to use a “one-time” font without concern that the visitor will not have the font used available in non-graphical form, now your default Thesis comment submit button can be as unique as the rest of your site.