HTML how-to guide for customization of your sniff.

Old announcement of past promotion rounds and updates to Wolfhome.
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
User avatar
Firekeeper
Spirit Guide - Wise Healer
Spirit Guide - Wise Healer
Posts: 3620
Joined: Mon Jun 02, 2008 12:07 am
Species: Fire Wolf
Location: Idaho

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.
Image

Image

User avatar
Takatia
I VOLUNTEER AS TRIBUTE
I VOLUNTEER AS TRIBUTE
Posts: 57539
Joined: Fri Jul 17, 2009 4:36 pm
Species: Fox
Contact:

Pride

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 :]

Not active here.

Feel free to reach out on Discord: Takatia#8483
Or on Twitter: @thejesterfox
User avatar
nire
Ethereal Ancestor
Ethereal Ancestor
Posts: 11256
Joined: Sat Jan 16, 2010 9:05 am
Gender: nonbinary
Pronouns: they/them
Preferred Name: rae
Species: vertebrate

Thanks for posting this Takatia, It helps me and will surely help others. (:
art topic comms TH TOS 07.05.13 / 08.18.21
User avatar
Chenneoue
Spellweaver and Wordsmith
Spellweaver and Wordsmith
Posts: 5814
Joined: Mon Nov 06, 2006 5:49 pm
Location: MI, USA
Contact:

oooooooo Some things in there I didn't know. :o Thanks for sharing! :D
User avatar
Ciel
Spirit Guide - Wise Healer
Spirit Guide - Wise Healer
Posts: 4074
Joined: Tue Nov 09, 2010 7:10 pm
Location: Texas
Contact:

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

Click for characters.
User avatar
Xina
Spirit Guide - Wise Healer
Spirit Guide - Wise Healer
Posts: 4675
Joined: Wed Apr 07, 2010 9:26 am
Gender: Female
Pronouns: She/Her
Preferred Name: Taylor
Location: Georgia

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?
Life's a bitch, so if it's easy, you're doing it wrong.
Image
User avatar
lawliet
Gourd Vibes Only
Gourd Vibes Only
Posts: 13393
Joined: Thu Jan 07, 2010 7:19 pm
Gender: non-binary
Pronouns: they / them

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

PreCursor wrote:Posting on an old topic, I know. But the font sizing wont work?
They are working on fixing itttt.
Check: Here.
User avatar
Siberiia
Studying Apprentice
Studying Apprentice
Posts: 93
Joined: Mon May 31, 2010 6:26 am

Thanks!
Image

Signature and Avatar (c) Wyla

,:Earth on chat:,

(\_/)
(O.o)
(^ ^) This is Bunny. Copy Bunny in your signature to help him achieve world domination!
User avatar
SpontaneousBeauty
Ethereal Ancestor
Ethereal Ancestor
Posts: 10448
Joined: Fri Nov 11, 2011 12:13 pm
Gender: Female
Preferred Name: Skaii
Species: Wiccan Fox

centering everything in your sniff?
Happiness can be found even in the darkest of times, when one only remembers to turn on the light.
Just Visiting ♡

Image
User avatar
Takatia
I VOLUNTEER AS TRIBUTE
I VOLUNTEER AS TRIBUTE
Posts: 57539
Joined: Fri Jul 17, 2009 4:36 pm
Species: Fox
Contact:

Pride

SpontaneousBeauty wrote: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;

Not active here.

Feel free to reach out on Discord: Takatia#8483
Or on Twitter: @thejesterfox
User avatar
SpontaneousBeauty
Ethereal Ancestor
Ethereal Ancestor
Posts: 10448
Joined: Fri Nov 11, 2011 12:13 pm
Gender: Female
Preferred Name: Skaii
Species: Wiccan Fox

Takatia wrote:
SpontaneousBeauty wrote:centering everything in your sniff?
<center> text </center>
thanks taka
Happiness can be found even in the darkest of times, when one only remembers to turn on the light.
Just Visiting ♡

Image
User avatar
Takachi
Pack Initiate
Pack Initiate
Posts: 203
Joined: Mon Aug 22, 2011 12:37 pm

Thank you. This helps a lot.
User avatar
vil
Omega - Newcomer
Omega - Newcomer
Posts: 46
Joined: Sun Mar 03, 2013 1:08 am

Do you know the code for a all black background?
Locked Previous topicNext topic