How To Make Buttons
Buttons are transparent looking bits of text, which you can use on your page like a hyper link. The most common functions for buttons are, Friend Me, PM Me, My Site, My Forum, and My Guestbook. Here I'll teach you how to make them!
I ALSO HAVE A VIDEO TUTORIAL FOR THIS PROCESS IF YOU'D RATHER LISTEN AND WATCH THAN READ- CLICK HERE!
I ALSO HAVE A VIDEO TUTORIAL FOR THIS PROCESS IF YOU'D RATHER LISTEN AND WATCH THAN READ- CLICK HERE!
Step One: The Graphic
The trick to making the button look transparent is to use the same color background as your Howrse page.
All you have to do is take a screenshot of the color on the page to use as the background! (head here for my screenshot tutorial).
All you have to do is take a screenshot of the color on the page to use as the background! (head here for my screenshot tutorial).
Once you have your screenshot of the Howrse color saved somewhere on your computer where you'll be able to find it, we're ready to make the graphic with our new background.
Head to ribbet.com, the best online image editor in my book, or any alternative you prefer, and upload your screenshot.
Under the Basic Edits tab, resize your screenshot to fit- the best size to start with is 200 X 100 pixels. Make sure to uncheck the "keep proportions" button.
Head to ribbet.com, the best online image editor in my book, or any alternative you prefer, and upload your screenshot.
Under the Basic Edits tab, resize your screenshot to fit- the best size to start with is 200 X 100 pixels. Make sure to uncheck the "keep proportions" button.
Now then. A button is essentially just a small rectangle of background with a few words on it. The words are your only real consideration- what font will you use?
Just like when you make a layout or a banner or an avatar, and you have to use an image with no copyright or credit properly, the same goes for fonts. Fonts are created by artists who have far more talent, skill, and patience than I, and they work very hard on them. You do not want to steal one without permission.
Any fonts you find in any online editors are fine, because they have to be free use for the editor to "distribute" them by offering them to their customers. You're fine there.
If you can't find the font you want in your online editor, or if you're using GIMP/Photoshop/whatever, you can download fonts for free (it's safe, trust me, I do it often) from fontspace.com. You can only use the fonts that say "commercial use friendly" on them! The "personal use only" fonts don't allow you to display them publicly, so make sure you respect the artist's wishes. If you do download fonts, you'll have to close and reopen ribbet, and sometimes you have to wait a while or test the font in a word document or something, and then go to the text option in ribbet and click "load my fonts" at the bottom left. Your new font will be in the alphabetized list.
Okay, so add your text. Let's do the Friend Me button first, shall we? Make sure it's as big as it can be and not be cut off on your rectangle. You can resize your rectangle if you want smaller text on your button, but your rectangle and text need to be nearly the same size. Otherwise, things around the button on your page will be very far away and it'll look funny.
Make sure you use the exact same font size for each button too!
Just like when you make a layout or a banner or an avatar, and you have to use an image with no copyright or credit properly, the same goes for fonts. Fonts are created by artists who have far more talent, skill, and patience than I, and they work very hard on them. You do not want to steal one without permission.
Any fonts you find in any online editors are fine, because they have to be free use for the editor to "distribute" them by offering them to their customers. You're fine there.
If you can't find the font you want in your online editor, or if you're using GIMP/Photoshop/whatever, you can download fonts for free (it's safe, trust me, I do it often) from fontspace.com. You can only use the fonts that say "commercial use friendly" on them! The "personal use only" fonts don't allow you to display them publicly, so make sure you respect the artist's wishes. If you do download fonts, you'll have to close and reopen ribbet, and sometimes you have to wait a while or test the font in a word document or something, and then go to the text option in ribbet and click "load my fonts" at the bottom left. Your new font will be in the alphabetized list.
Okay, so add your text. Let's do the Friend Me button first, shall we? Make sure it's as big as it can be and not be cut off on your rectangle. You can resize your rectangle if you want smaller text on your button, but your rectangle and text need to be nearly the same size. Otherwise, things around the button on your page will be very far away and it'll look funny.
Make sure you use the exact same font size for each button too!
After you add your text, go back to the Basic Edits tab, and use the Crop option to fix the height of your button.
And that's it for the graphics! I'll go ahead and move on to the other buttons, and then I'll show you how to code them. :)
Okay, so now I've got the entire set of buttons done. Now, there's two kinds of codes- the Friend Me and PM Me buttons use one kind of code, and the My Site, My Forum, and My Guestbook buttons use another kind of code. Let's start with the code for the Friend Me/PM Me buttons.
STep Two: The Code
Alright. For the Friend Me button, you'll take this piece of code:
<a href="http://www.howrse.com/member/social/friendCreate?login=YOURUSERNAMEHERE"><IMG src="YOUR BUTTONURLHERE"></a>
And fill in the green bits.
the YOURUSERNAMEHERE space is where your username would go. Now, if your username is just a normal one, with only letters and numbers, you just type it into that space and you're done. But, if you don't have a normal username.... (i.e. it has spaces, punctuation, or symbols in it)...
<a href="http://www.howrse.com/member/social/friendCreate?login=YOURUSERNAMEHERE"><IMG src="YOUR BUTTONURLHERE"></a>
And fill in the green bits.
the YOURUSERNAMEHERE space is where your username would go. Now, if your username is just a normal one, with only letters and numbers, you just type it into that space and you're done. But, if you don't have a normal username.... (i.e. it has spaces, punctuation, or symbols in it)...
Then, you'll have to go to your page, and click "PM [username]" at the top. There, in your address bar on your browser, you'll see your username in "computer speak" after the part of the URL that says /?to= and use that as your username. That's your computer version of your user.
The YOURBUTTONURLHERE is where you paste the direct link of your image. Someplace like imgur.com or tinypic.com will work fine for that. ;)
And there's the code for the Friend Me button!
The PM me button is exactly the same, but you just use this code instead of that code:
<a href="http://www.howrse.com/member/privateMessage/?to=YOURUSERNAMEHERE"><IMG src="YOURBUTTONURLHERE"></a>
For the buttons that are My Site, My Guestbook, and My Forum, use this code:
<a href="YOURWEBSITESURLHERE"><IMG src="YOURBUTTONURLHERE"></a>
As usual, the YOURBUTTONURLHERE is the direct link to your button image, but the YOURWEBSITEURLHERE is for the URL of your website, your forum, or you guestbook, depending on which button it is.
When you have your codes filled in, just paste them into your Howrse page and enjoy! :)
If you have any troubles or questions, or need me to look over a code, feel free to post a comment or contact me! You can also PM me on the INT/US servers as thewarrenranch. ;)
And there's the code for the Friend Me button!
The PM me button is exactly the same, but you just use this code instead of that code:
<a href="http://www.howrse.com/member/privateMessage/?to=YOURUSERNAMEHERE"><IMG src="YOURBUTTONURLHERE"></a>
For the buttons that are My Site, My Guestbook, and My Forum, use this code:
<a href="YOURWEBSITESURLHERE"><IMG src="YOURBUTTONURLHERE"></a>
As usual, the YOURBUTTONURLHERE is the direct link to your button image, but the YOURWEBSITEURLHERE is for the URL of your website, your forum, or you guestbook, depending on which button it is.
When you have your codes filled in, just paste them into your Howrse page and enjoy! :)
If you have any troubles or questions, or need me to look over a code, feel free to post a comment or contact me! You can also PM me on the INT/US servers as thewarrenranch. ;)
HTML Comment Box is loading comments...