Wolfhome Graphical 2D Avatar Comic Chat

Wolfhome.com

Wolfhome Graphical 2D Avatar Comic Chat
It is currently Sat Jan 21, 2017 9:47 pm

All times are UTC - 6 hours




Post new topic Reply to topic  [ 48 posts ]  Go to page 1, 2, 3, 4  Next
Author Message
 Post subject: HTML how-to guide for customization of your sniff.
PostPosted: 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.




    Top     Share post on Facebook     Tweet this post
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Sat Apr 30, 2011 9:51 pm 
Offline
Spirit Guide - Wise Healer
Spirit Guide - Wise Healer
User avatar

Joined: Mon Jun 02, 2008 12:07 am
Posts: 3665
Location: Idaho
Avatar ©: LockworkOrange
Signature ©: Leviticus
Gender: Female
Species: Fire Wolf
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






    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Need help with HTML coding?
PostPosted: Fri Jul 22, 2011 9:26 pm 
Offline
Alpha - Art Review Team
Alpha - Art Review Team
User avatar

Joined: Fri Jul 17, 2009 4:36 pm
Posts: 53513
Avatar ©: mxprieto
Signature ©: Gunmetal
Gender: XX ♀
Species: Fox
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 :]

_________________
Image

Addicted to love and you're my supplier
But you and I we burn like a fire
And your words they cut like barbed wire
But that's how it feels when you love a liar





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: Need help with HTML coding?
PostPosted: Fri Jul 22, 2011 10:49 pm 
Offline
Ethereal Ancestor
Ethereal Ancestor
User avatar

Joined: Sat Jan 16, 2010 9:05 am
Posts: 10708
Avatar ©: xutaes
Pronouns: she/they
Thanks for posting this Takatia, It helps me and will surely help others. (:

_________________
sirisolasuggestionoxmore links
and like a candle makes a brighter place
this mark you’ve made on me can’t be erased

--- 07 05 13 ---





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: Need help with HTML coding?
PostPosted: Sat Jul 23, 2011 9:48 am 
Offline
Spellweaver and Wordsmith
Spellweaver and Wordsmith
User avatar

Joined: Mon Nov 06, 2006 5:49 pm
Posts: 6412
Location: MI, USA
oooooooo Some things in there I didn't know. :o Thanks for sharing! :D

_________________

Chenneoue.com | Nabyn | Premades | Rooms | TOS Image






    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: Need help with HTML coding?
PostPosted: Wed Jul 27, 2011 12:37 am 
Offline
Spirit Guide - Wise Healer
Spirit Guide - Wise Healer
User avatar

Joined: Tue Nov 09, 2010 7:10 pm
Posts: 4074
Location: Texas
Avatar ©: Sugar/Fayleh
Signature ©: Colossith
Wow, this helps me a lot. Thanks for posting it. :)

_________________
Image

Click for characters.





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Tue Aug 16, 2011 2:18 pm 
Offline
Event Committee
Event Committee
User avatar

Joined: Wed Apr 07, 2010 9:26 am
Posts: 3822
Location: North Carolina / Georgia
Avatar ©: Arcaine
Signature ©: thelunacy-fringe@DA
Blaze colored
Gender: Female
Pronouns: She/Her
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





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Wed Oct 26, 2011 1:25 am 
Offline
Ethereal Ancestor
Ethereal Ancestor
User avatar

Joined: Thu Jan 07, 2010 7:19 pm
Posts: 12664
Location: tatooine
Avatar ©: dannikins
Signature ©: akaikaze
Gender:
Species: gaylien
Pronouns: he / him
Posting on an old topic, I know. But the font sizing wont work?

_________________
Image
you are a shooting star
and i'm a demon

february 1st 2013 - forever
|| links ||





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: 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.





    Top     Share post on Facebook     Tweet this post
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Sat Nov 05, 2011 11:42 am 
Offline
Studying Apprentice
Studying Apprentice
User avatar

Joined: Mon May 31, 2010 6:26 am
Posts: 93
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!





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Thu Jul 26, 2012 2:44 am 
Offline
Ethereal Ancestor
Ethereal Ancestor

Joined: Fri Nov 11, 2011 12:13 pm
Posts: 10019
Avatar ©: Respected
Signature ©: Saebre
Gender: Female
Species: Coyote/Fox
centering everything in your sniff?

_________________
Image
^Click for Characters^
“Happiness can be found,
even in the darkest of times,
if one only remembers to turn on the light.”

❀°•Gala-Fennexan Fursona
•°❀





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Thu Jul 26, 2012 10:38 am 
Offline
Alpha - Art Review Team
Alpha - Art Review Team
User avatar

Joined: Fri Jul 17, 2009 4:36 pm
Posts: 53513
Avatar ©: mxprieto
Signature ©: Gunmetal
Gender: XX ♀
Species: Fox
SpontaneousBeauty wrote:
centering everything in your sniff?


<center> text </center>

_________________
Image

Addicted to love and you're my supplier
But you and I we burn like a fire
And your words they cut like barbed wire
But that's how it feels when you love a liar





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Thu Jul 26, 2012 2:48 pm 
Offline
Ethereal Ancestor
Ethereal Ancestor

Joined: Fri Nov 11, 2011 12:13 pm
Posts: 10019
Avatar ©: Respected
Signature ©: Saebre
Gender: Female
Species: Coyote/Fox
Takatia wrote:
SpontaneousBeauty wrote:
centering everything in your sniff?


<center> text </center>

thanks taka

_________________
Image
^Click for Characters^
“Happiness can be found,
even in the darkest of times,
if one only remembers to turn on the light.”

❀°•Gala-Fennexan Fursona
•°❀





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Fri Sep 07, 2012 3:36 pm 
Offline
Pack Initiate
Pack Initiate
User avatar

Joined: Mon Aug 22, 2011 12:37 pm
Posts: 203
Avatar ©: Google
Thank you. This helps a lot.





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
 Post subject: Re: HTML how-to guide for customization of your sniff.
PostPosted: Wed Jul 31, 2013 5:39 am 
Offline
Wolfhome Newborn
Wolfhome Newborn

Joined: Sun Mar 03, 2013 1:08 am
Posts: 9
Signature ©: ~Ta Daa~
Do you know the code for a all black background?





    Top     Share post on Facebook     Tweet this post
Profile
Reply with quote
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 48 posts ]  Go to page 1, 2, 3, 4  Next

All times are UTC - 6 hours


Who is online

Users browsing this forum: No registered users and 1 guest

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group