Post by Kerrieth on Jun 15, 2012 15:03:11 GMT -5
Here's a little "how-to" guide for editing your sniff. A lot of people do not know the basics of HTML coding in order to
change the layout and make it personal like a sniff should be.
Now first we'll cover font size
The easiest way to do this is for example:
<font size="5">Here is a size 5 font</font>
that will make it size 5px font, which is a tad smaller than the default font size on wolfhome's scroll bar. You can go anywhere from 1 to 72,
but I wouldn't recommend going much higher than 48 for the small windows.
Now the second way to do it is a little simpler. All you have to do is use this code:
<font size="7">this will be your sized 7 font</font>
this code goes form 1 to 7, 7 being of course the biggest.
That takes care of font sizes. those are the two easiest way to do it.
--------------------------------------------
You can also change the font face or the type of font used.
This is achieved like this:
<font size="7" face="Georgia, Arial">C</font><font face="Georgia">ustomize
your font to achieve a desired look.</font</p>
This coding will give you a large sized 7 "C" followed by smaller standard sized letters. It also gives it a new type of font named "Georgia" and if your computer doesn't allow you to see that font face then the font "Arial" is thrown in there as a back. Just remember to use the word "face=" and separate the names with a comma and it'll work fine.
--------------------------------------------
Now onto changing colors of the text in your sniff. There are two ways of going about it. The most simple way of doing it is like this:
<font color="red">this font will be red.</font>
However the only problem with that is it's not true red. it'll display the closest color it can, but it'll display a little differently to everyone, and Red is a bit bright anyway. For a list of all color names click here:
www.w3schools.com/html/html_colornames.asp
The other way of doing it is actually using the hex codes. The 6 digit number all colors are assigned that are allowed in the html universe. It will give you far more control over the color value of the lettering. An example is:
<font color="#FF0000">your font here will be red.</font>
You can find the hex codes under the same link as the color code names above.
Well this concludes the section on the font colors and sizes. I don't think much more can be used without the use of javascript.
--------------------------------------------
now for images.
Putting a basic image in a sniff is simple enough. There's only one way to do it so this section will be short.
The example code for an image is:
<img src="thelocationofyourimage"alt="put this text here in case the image doesn't work."></img>
I was taught to always close my tags no matter what so this is the way I learned how to properly do an image tag but as it was pointed out to me you no longer have to use any form of closing tag so your images just have to look like this:
<img src="thesourcelocationofyourimage" alt="text here incase your image doesn't work" />
Now to make an image clickable you just have to add a few short lines like so:
<a href="the web page URL you want to link it to goes here"><img src="the image URL you you want to show in your sniff goes here"
alt="The alt text is good here because if the image doesn't work for some reason you can still click this text to get there."></a>
and the </a> tag closes the <a href> tag which we'll get to in the next section.
This takes care of pretty much all you can do with images in a sniff except forcing a size which is also just a few lines like so:
<a href="URL of web address here."><img src="URL of image here."
alt="Alt text in case the image doesn't work."
width="72" height="46" border="0" /></a>
This will force the image to be 72px wide by 46px high. Pretty small, but you get the general idea.
Well this concludes the section on images.
--------------------------------------------
Now onto Links. Links are fairly quick and easy. The code is simple and there isn't much more you can do than this example:
<a href="LINKURL">this text will be in your sniff as clickable</a>
Now you can also change the font color of the clickable image to whatever color you like by simply adding the "<font>" tag like so:
<a href="LINKURL"><font color="#FF0000">This font will be red.</font></a>
Just remember the closing "</font>" tag. once again, you don't need it, but it's a good practice to always close tags.
--------------------------------------------
Now for spacing it's a little tricky because the sniff's do not always like to space things correctly.
</br> is how you make a single space in HTML but it always comes out as a double space in sniffs for some reason.
and <p>this text is a paragraph</p> creates a blocked paragraph, but again, all lines in sniffs are double spaced for some reason. so this section is just a reminder if you ever want to make a web page elsewhere.
--------------------------------------------
I think this is pretty much all you can do with a sniff as far as font, images, and links go. If anyone would like to know how to do something else feel free to ask below and I'll edit this post to add anything I've missed or people are struggling with.
change the layout and make it personal like a sniff should be.
Now first we'll cover font size
The easiest way to do this is for example:
<font size="5">Here is a size 5 font</font>
that will make it size 5px font, which is a tad smaller than the default font size on wolfhome's scroll bar. You can go anywhere from 1 to 72,
but I wouldn't recommend going much higher than 48 for the small windows.
Now the second way to do it is a little simpler. All you have to do is use this code:
<font size="7">this will be your sized 7 font</font>
this code goes form 1 to 7, 7 being of course the biggest.
That takes care of font sizes. those are the two easiest way to do it.
--------------------------------------------
You can also change the font face or the type of font used.
This is achieved like this:
<font size="7" face="Georgia, Arial">C</font><font face="Georgia">ustomize
your font to achieve a desired look.</font</p>
This coding will give you a large sized 7 "C" followed by smaller standard sized letters. It also gives it a new type of font named "Georgia" and if your computer doesn't allow you to see that font face then the font "Arial" is thrown in there as a back. Just remember to use the word "face=" and separate the names with a comma and it'll work fine.
--------------------------------------------
Now onto changing colors of the text in your sniff. There are two ways of going about it. The most simple way of doing it is like this:
<font color="red">this font will be red.</font>
However the only problem with that is it's not true red. it'll display the closest color it can, but it'll display a little differently to everyone, and Red is a bit bright anyway. For a list of all color names click here:
www.w3schools.com/html/html_colornames.asp
The other way of doing it is actually using the hex codes. The 6 digit number all colors are assigned that are allowed in the html universe. It will give you far more control over the color value of the lettering. An example is:
<font color="#FF0000">your font here will be red.</font>
You can find the hex codes under the same link as the color code names above.
Well this concludes the section on the font colors and sizes. I don't think much more can be used without the use of javascript.
--------------------------------------------
now for images.
Putting a basic image in a sniff is simple enough. There's only one way to do it so this section will be short.
The example code for an image is:
<img src="thelocationofyourimage"alt="put this text here in case the image doesn't work."></img>
I was taught to always close my tags no matter what so this is the way I learned how to properly do an image tag but as it was pointed out to me you no longer have to use any form of closing tag so your images just have to look like this:
<img src="thesourcelocationofyourimage" alt="text here incase your image doesn't work" />
Now to make an image clickable you just have to add a few short lines like so:
<a href="the web page URL you want to link it to goes here"><img src="the image URL you you want to show in your sniff goes here"
alt="The alt text is good here because if the image doesn't work for some reason you can still click this text to get there."></a>
and the </a> tag closes the <a href> tag which we'll get to in the next section.
This takes care of pretty much all you can do with images in a sniff except forcing a size which is also just a few lines like so:
<a href="URL of web address here."><img src="URL of image here."
alt="Alt text in case the image doesn't work."
width="72" height="46" border="0" /></a>
This will force the image to be 72px wide by 46px high. Pretty small, but you get the general idea.
Well this concludes the section on images.
--------------------------------------------
Now onto Links. Links are fairly quick and easy. The code is simple and there isn't much more you can do than this example:
<a href="LINKURL">this text will be in your sniff as clickable</a>
Now you can also change the font color of the clickable image to whatever color you like by simply adding the "<font>" tag like so:
<a href="LINKURL"><font color="#FF0000">This font will be red.</font></a>
Just remember the closing "</font>" tag. once again, you don't need it, but it's a good practice to always close tags.
--------------------------------------------
Now for spacing it's a little tricky because the sniff's do not always like to space things correctly.
</br> is how you make a single space in HTML but it always comes out as a double space in sniffs for some reason.
and <p>this text is a paragraph</p> creates a blocked paragraph, but again, all lines in sniffs are double spaced for some reason. so this section is just a reminder if you ever want to make a web page elsewhere.
--------------------------------------------
I think this is pretty much all you can do with a sniff as far as font, images, and links go. If anyone would like to know how to do something else feel free to ask below and I'll edit this post to add anything I've missed or people are struggling with.
