HTML how-to guide for customization of your sniff.

[Mif]

I'm going to make a little "how-to" guide for editing your sniff. A lot of people on wolfhome 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:

http://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.

--------------------------------------------
Music in sniff: Original post: http://forum.wolfhome.com/viewtopic.php?f=32&t=85962&p=1282293&hilit=music+sniff#p1282293
If you want an inviso player that auto plays, this is all you need to do:

Get the old embed code from youtube. Click share > embed > check the "Use old embed code." For whatever reason youtube doesnt let you just grab that part from their embed code from the site itself. just copy it all and paste to notepad or something. then grab the specific code in bold/italic/underline. Example:

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/UhjG47gtMCo?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UhjG47gtMCo?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>


replace the bold/italic/underlined text in the next example with the link from previous one. Example:

<embed src="http://www.youtube.com/v/UhjG47gtMCo?&autoplay=1" type="application/x-shockwave-flash" width="0" height="0"></embed>

copy paste this into your sniff anywhere and BOOM, you has music.


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.

Thanks for reading,
Mif

[Firekeeper]

Oh awesome! I've always wondered how to do more than just adding pictures. Thanks for making this Mif, I'm sure many will find it useful.

[Takatia]

http://www.computerhope.com/learnhtm.htm" onclick="window.open(this.href);return false;

It has every HTML code you could dream of, and a how to for HTML coding. Hope this helps you guys as much as it helped me :]

[nire]

Thanks for posting this Takatia, It helps me and will surely help others. (:

[Chenneoue]

oooooooo Some things in there I didn't know. :o Thanks for sharing! :D

[Ciel]

Wow, this helps me a lot. Thanks for posting it. :)

[Xina]

Love this guide, Ive linked many people who asked how do I do such-and-such in my sniff to this.

May we request this be sticky possibly? This is a great hand written guide for something MANY people need help with, and I would prefer not having to dig through the topics to find this each time.

We have stickys for art help, !go commands, etc, why not help with sniffs?

[lawliet]

Posting on an old topic, I know. But the font sizing wont work?

[Unholy Confessions]

Posting on an old topic, I know. But the font sizing wont work?

They are working on fixing itttt.
Check: Here.

[Siberiia]

Thanks!

[SpontaneousBeauty]

centering everything in your sniff?

[Takatia]

centering everything in your sniff?

<center> text </center>

see here: http://www.web-source.net/html_codes_ch ... WLsFoqQzEY" onclick="window.open(this.href);return false;

[SpontaneousBeauty]

centering everything in your sniff?

<center> text </center>

thanks taka

[Takachi]

Thank you. This helps a lot.

[vil]

Do you know the code for a all black background?