snippets
Snippets
Have some code snippets! Mmmm... yummy
Links:
custom neocities thumbnail
Custom Neocities Thumbnail
Express yourself on Neocities more!
<script>
const urlParams = new URLSearchParams(window.location.search);
if (navigator.userAgent.includes('Screenjesus')) {
document.getElementsByTagName('body')[0].innerHTML = '<style>*{margin: 0;padding: 0;box-sizing: border-box;}img{width:100vw;height:100vh;}</style><img src="/IMG/squirtle.jpg">';
}
</script>
const urlParams = new URLSearchParams(window.location.search);
if (navigator.userAgent.includes('Screenjesus')) {
document.getElementsByTagName('body')[0].innerHTML = '<style>*{margin: 0;padding: 0;box-sizing: border-box;}img{width:100vw;height:100vh;}</style><img src="/IMG/squirtle.jpg">';
}
</script>
Click to copy!
UPDATE: Have a Gravatar? Use this custom Gravatar code to copy your profile picture to Neocities. Thanks to Luston for the code!
<script>
const emailSha256hash = [insert Gravatar EmailSha256hash];
if (navigator.userAgent.includes('Screenjesus')) {
document.getElementsByTagName('body')[0].innerHTML = "<style> * {margin: 0;padding: 0;box-sizing: border-box;} img {width: 100vw;height: 100vh;}</style><img src="https://gravatar.com/avatar/${emailSha256hash}">";
}
</script>
const emailSha256hash = [insert Gravatar EmailSha256hash];
if (navigator.userAgent.includes('Screenjesus')) {
document.getElementsByTagName('body')[0].innerHTML = "<style> * {margin: 0;padding: 0;box-sizing: border-box;} img {width: 100vw;height: 100vh;}</style><img src="https://gravatar.com/avatar/${emailSha256hash}">";
}
</script>
Click to copy!
custom website theme changer
Custom Website Theme Changer
This will definitely amaze your site's visitors
HTML Code for the <head> tag:
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="" id="themeCSSLink" />
<link rel="stylesheet" href="" id="themeCSSLink" />
Click to copy!
HTML Code for the <body> tag:
<label for="theme">Choose a theme: </label>
<select name="theme" id="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<script src="theme.js"></script>
<select name="theme" id="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<script src="theme.js"></script>
Click to copy!
JS Code:
var themeSelector = document.querySelector("#theme");
var themeStorage = localStorage.getItem("themeStorage");
var themeCSSLink = document.querySelector("#themeCSSLink");
if (themeStorage === null) {
localStorage.setItem("themeStorage", [default selection]);
themeCSSLink.href = [default CSS file];
} else {
themeCSSLink.href = themeStorage + ".css";
themeSelector.value = themeStorage;
}
themeSelector.onchange = (event) => {
var themeSelected = event.target.value;
localStorage.setItem("themeStorage", themeSelected);
themeCSSLink.href = themeSelected + ".css";
}
var themeStorage = localStorage.getItem("themeStorage");
var themeCSSLink = document.querySelector("#themeCSSLink");
if (themeStorage === null) {
localStorage.setItem("themeStorage", [default selection]);
themeCSSLink.href = [default CSS file];
} else {
themeCSSLink.href = themeStorage + ".css";
themeSelector.value = themeStorage;
}
themeSelector.onchange = (event) => {
var themeSelected = event.target.value;
localStorage.setItem("themeStorage", themeSelected);
themeCSSLink.href = themeSelected + ".css";
}
Click to copy!
html list tree view
HTML List Tree View
Ever wanted a different looking HTML list?
HTML Code:
<ul>
<li><div>item</div></li>
<li><div>container</div>
<ul>
<li><div>container child</div></li>
</ul>
</li>
<li><div>item</div></li>
</ul>
<li><div>item</div></li>
<li><div>container</div>
<ul>
<li><div>container child</div></li>
</ul>
</li>
<li><div>item</div></li>
</ul>
Click to copy!
CSS Code:
ul {
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}
li {
list-style-type: none;
border-left: 2px solid #FFF;
}
li ul {
margin-left: 1em;
}
li div {
padding-left: 1em;
position: relative;
}
li div::before {
content:'';
position: absolute;
top: 0;
left: -2px;
bottom: 50%;
width: 0.75em;
border: 2px solid #FFF;
border-top: 0 none transparent;
border-right: 0 none transparent;
}
ul > li:last-child {
border-left: 2px solid transparent;
}
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}
li {
list-style-type: none;
border-left: 2px solid #FFF;
}
li ul {
margin-left: 1em;
}
li div {
padding-left: 1em;
position: relative;
}
li div::before {
content:'';
position: absolute;
top: 0;
left: -2px;
bottom: 50%;
width: 0.75em;
border: 2px solid #FFF;
border-top: 0 none transparent;
border-right: 0 none transparent;
}
ul > li:last-child {
border-left: 2px solid transparent;
}
Click to copy!