Official Sniff HTML Code Thread

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 Previous topicNext topic
User avatar
macaroon
Gamma
Gamma
Posts: 6318
Joined: Tue Jun 08, 2010 11:24 am
Gender:
Preferred Name: Kei
Species: Ocelot
Location: NV

Wed Oct 03, 2018 2:53 pm

Image

Hello everyone, welcome to Wolfhome's official HTML topic! This is the master-post of all HTML codes that can be used to customize your sniff.


Please keep in mind when you're customizing your sniff that it adheres to Wolfhome's rules. Although we love creativity and individualism, we ask that you also be respectful of others and keep your sniffs within regulations. If you have any questions or concerns as to what you can and can't include into your sniff, please feel free to message an administrator or click the link below.
Wolfhome FAQ & Rules
Topic Key:
Codes require you to put in certain numbers, names, and other things. Just replace these symbols with what you would like in the code.

# ➙ Insert desired number and color
!!!!! ➙ Insert desired font
*** ➙Insert desired words
The Basics:
Fonts:
From order top to bottom; font size, font face, font color
Inserting Links and Images:
From order top to bottom; clickable link, inserting image, image as link, background image, background image covers whole sniff (no idle), background image covers whole sniff (shows idle)
  • Code: Select all

    <a href="linkhere">***********</a>

    Code: Select all

    <img src="link here">

    Code: Select all

    <a href="linkhere"><img src="linkhere"></a>

    Code: Select all

    <body background="linkhere">

    Code: Select all

    <body text="#000000" bgcolor="#8285a3" onload="window.resizeTo(760,650); var trs=document.getElementsByTagName('tr'); for (var i=0; i<trs.length; i++) { var current = trs[i]; content=current.firstElementChild.innerHTML; if (content!=='Idle Time:') { current.style.display='none'; } else { spoiler=document.getElementById('spoilerMain'); spoiler.insertBefore(current, spoiler.firstChild); } }">
    <body style="background-image:url(LINK HERE); background-attachment:fixed; background-size:cover; background-position:fit; text-align:center; visibility:hidden; overflow-y:auto;">
    Code above given courtesy of Scrimshaw

    Code: Select all

    <body text="#000000" bgcolor="#8285a3" onload="window.resizeTo(760,650); var trs=document.getElementsByTagName('tr'); for (var i=0; i<trs.length; i++) { var current = trs[i]; content=current.firstElementChild.innerHTML; if (content!=='Idle Time:') { current.style.display='none'; } else { spoiler=document.getElementById('spoilerMain'); spoiler.insertBefore(current, spoiler.firstChild); } }">
    <body style="background-image:url(LINK HERE); background-attachment:fixed; background-size:cover; background-position:fit; text-align:center; visibility:hidden; overflow-y:auto;">
    
    <font color="#FFFFFF"><div id="spoilerMain" style="display:show; padding:1rem; font-family: Times New Roman; margin: 1rem 0; line-height: 1.5em; font-color:#ffffff; font-size: 16px; background:rgba(200,200,250,0);"></div></font>
    Code above given courtesy of Scrimshaw
Cosmetics:
From order top to bottom; fixed window size, image column, button, activated button, transparent box, scroll box, carrd code
  • Code: Select all

    <body text="#000000" bgcolor="#8285a3" onload="window.resizeTo(1000,900);">
    Code above given courtesy of Scrimshaw. Text and color doesn't work, just change the number values in the parenthesis to adjust width and height.

    Code: Select all

    <p style="width: 900px;"> <img src="image link here" style="float: left;" /> body paragraph words </p>
    Code above given courtesy of Scrimshaw. To align to the right, substitute the float from left to right. To make a text parallel to an image, it is suggested to use a long image otherwise the text will appear underneath it.

    Code: Select all

    <button>Button text</button>
    Code above given courtesy of NVentous

    Code: Select all

    <button onClick="alert('hi');">say hello</button>
    Code above given courtesy of NVentous. Note that you need to use Javascript to use this code.

    Code: Select all

    <div style="background-color: rgba(114, 112, 124, .5); border-radius: 10px; padding: 30px; width: 80%; margin-bottom: 40px;"> <span style="opacity: 3; -khtml-opacity: 1; -moz-opacity: 1; filter: alpha(opacity=90);">******************</div>

    Code: Select all

    <div style="width: 50%; margin: 0 auto; overflow: auto; background: transparent; border: 1px solid #000; padding: 2rem;">************</div>
    Code above given courtesy of NVentous. Adjust how wide the line is by changing 1px to 3px, 5px, etc. accordingly.

    Code: Select all

    <meta http-equiv="refresh" content="0; url=CARRD URL" />
Adding music/a video:
To add music or a video to your sniff, you must visit this link here. Copy your desired music or video into the link tab and adjust the settings as you please. If you want an invisible video, do not adjust the settings on the website. Generate the code and adjust the width and height to "0". For example, it should look like this:
  • Code: Select all

    <div class="gaf210imvustylez_youtubebox" style="width:1px;height:1px;overflow:hidden"><iframe allow="autoplay" width="0" height="0" src="https://www.youtube.com/embed/VeHddLI-aY8?autoplay=1&loop=0" frameborder="0" allowfullscreen></iframe><!--Youtube player code generated @ http://gaf210.imvustylez.net --></div>
Helpful Links: Thank you to everyone who provided us and the user-base with codes. This topic will be updated as we find more codes to customize your sniff. If you have any questions or more suggestions, please contact an administrator.
4 x
Post Reply Previous topicNext topic