HTML how-to guide for customization of your sniff.

This section is filled to the brim with helpful resources for Wolfhome, including the Rules of the Wolfhome Forums. This is the first place you should visit on our board!
Post Reply
Mif

Sat Apr 30, 2011 9:42 am

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&amp;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&amp;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
Last edited by Mif on Sun May 01, 2011 11:17 am, edited 1 time in total.
0 x

User avatar
Firekeeper
Spirit Guide - Wise Healer
Spirit Guide - Wise Healer
Posts: 3665
Joined: Mon Jun 02, 2008 12:07 am
Gender: Female
Species: Fire Wolf
Location: Idaho

Sat Apr 30, 2011 9:51 pm

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

Image


User avatar
Takatia
Event Committee
Event Committee
Posts: 57551
Joined: Fri Jul 17, 2009 4:36 pm
Gender: XX ♀
Species: Fox
Contact:

Fri Jul 22, 2011 9:26 pm

http://www.computerhope.com/learnhtm.htm

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 :]
0 x
ImageImage
It might be a little while, but maybe we'll realign soon. Made to reassign, but find me a little time too.
Half euphoric, fixing the ratios. Teleport me, I've been pushing the envelope.
All ironic, given the way she slowed. You're iconic, given the way you froze.
Call me out, stay platonic; I'll find a chaperone. Wait around, forget mnemonics, I'll regret it years ago.
Spare me all the ceremony, dialing in all your pheromones. To cite a life in histrionics; the way you left was apropos.

User avatar
nire
Ethereal Ancestor
Ethereal Ancestor
Posts: 10776
Joined: Sat Jan 16, 2010 9:05 am
Gender: nonbinary
Pronouns: they/them
Preferred Name: rae

Fri Jul 22, 2011 10:49 pm

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

User avatar
Chenneoue
Spellweaver and Wordsmith
Spellweaver and Wordsmith
Posts: 6414
Joined: Mon Nov 06, 2006 5:49 pm
Location: MI, USA
Contact:

Sat Jul 23, 2011 9:48 am

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

User avatar
Ciel
Spirit Guide - Wise Healer
Spirit Guide - Wise Healer
Posts: 4074
Joined: Tue Nov 09, 2010 7:10 pm
Location: Texas
Contact:

Wed Jul 27, 2011 12:37 am

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

Click for characters.

User avatar
Xina
Event Committee
Event Committee
Posts: 4853
Joined: Wed Apr 07, 2010 9:26 am
Gender: Female
Pronouns: She/Her
Preferred Name: Taylor
Location: North Carolina / Georgia

Tue Aug 16, 2011 2:18 pm

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?
0 x
Life's a bitch, so if it's easy, you're doing it wrong.
Image

User avatar
Dorian
Ethereal Ancestor
Ethereal Ancestor
Posts: 12949
Joined: Thu Jan 07, 2010 7:19 pm
Gender:
Pronouns: he / him
Species: gay space boy
Location: tatooine

Wed Oct 26, 2011 1:25 am

Posting on an old topic, I know. But the font sizing wont work?
0 x
Image
this is hell yes,
literal hell

february 1st 2013 - forever
|| links ||

Unholy Confessions

Wed Oct 26, 2011 1:47 am

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


They are working on fixing itttt.
Check: Here.
0 x

User avatar
Siberiia
Studying Apprentice
Studying Apprentice
Posts: 93
Joined: Mon May 31, 2010 6:26 am

Sat Nov 05, 2011 11:42 am

Thanks!
0 x
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: 10124
Joined: Fri Nov 11, 2011 12:13 pm
Gender: Female
Species: Wiccan Fox

Thu Jul 26, 2012 2:44 am

centering everything in your sniff?
0 x
Image
^Click for Characters^
"The greatest happiness of life
is the conviction that we are loved;
loved for ourselves, or rather,
loved in spite of ourselves."

❀°•SpontaneousBeauty on chats•°❀

User avatar
Takatia
Event Committee
Event Committee
Posts: 57551
Joined: Fri Jul 17, 2009 4:36 pm
Gender: XX ♀
Species: Fox
Contact:

Thu Jul 26, 2012 10:38 am

SpontaneousBeauty wrote:centering everything in your sniff?


<center> text </center>

see here: http://www.web-source.net/html_codes_chart.htm#.WWLsFoqQzEY
0 x
ImageImage
It might be a little while, but maybe we'll realign soon. Made to reassign, but find me a little time too.
Half euphoric, fixing the ratios. Teleport me, I've been pushing the envelope.
All ironic, given the way she slowed. You're iconic, given the way you froze.
Call me out, stay platonic; I'll find a chaperone. Wait around, forget mnemonics, I'll regret it years ago.
Spare me all the ceremony, dialing in all your pheromones. To cite a life in histrionics; the way you left was apropos.

User avatar
SpontaneousBeauty
Ethereal Ancestor
Ethereal Ancestor
Posts: 10124
Joined: Fri Nov 11, 2011 12:13 pm
Gender: Female
Species: Wiccan Fox

Thu Jul 26, 2012 2:48 pm

Takatia wrote:
SpontaneousBeauty wrote:centering everything in your sniff?


<center> text </center>

thanks taka
0 x
Image
^Click for Characters^
"The greatest happiness of life
is the conviction that we are loved;
loved for ourselves, or rather,
loved in spite of ourselves."

❀°•SpontaneousBeauty on chats•°❀

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

Fri Sep 07, 2012 3:36 pm

Thank you. This helps a lot.
0 x

User avatar
Kiyah
Omega - Newcomer
Omega - Newcomer
Posts: 16
Joined: Sun Mar 03, 2013 1:08 am

Wed Jul 31, 2013 5:39 am

Do you know the code for a all black background?
0 x

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest