5 Pixels Per Inch

Anonymous said:

i love ur 4chan theme so much thank u endlessly 4 making it free and publically accessible <3

Thank you, I am so glad you like it!

denpachannel said:

hey, i currently use your degenerate 4chan theme and LOVE it. i was wondering if there was a code to make the banner is different on every refresh? does that make sense? i've made custom ones i'd like to cycle thru and make it look like og 4chan but i'm a code noob. sorry if this is worded weird, lol thank you so much in adv

Yeah, this is definitely possible and fairly easy! I’ll explain how to do it.

First, you’ll have to upload your images onto some image hosting site like Imgur. Tumblr also has a file-hosting facility in the theme HTML customization page, if you click the options button and then “Theme Assets”, although I find it a bit annoying to use.

Next, locate this part of the HTML:

<img src=“{image:Banner}” class=“header–banner” />

This is the image tag that’s in charge of rendering the banner image. You can see that right now, it uses the image at {image:Banner} which is a Tumblr-specific code for letting users upload this image through the Tumblr interface. However, because you want this image to be random upon refresh, you will want to remove that. You’ll also give this image tag an ID so it will be easy to manipulate it through JavaScript later. So it should now look like this:

<img class=“header–banner” id=“banner” />

Now, scroll all the way down to the JavaScript portion of the theme. Identify the part of the code that starts with

window.addEventListener(“load”, function() {

The code that occurs in this block is what happens when the page loads. Since you probably want to put the image in before anything else happens, we will write the new code at the beginning of this block (so before the decodeLinks() part of the code).

First, you’ll want to create an array of the image URLs that you created for the banners. An array is basically a list of things, except the word “list” has special meaning in computer science. It should look like this:

let bannerURLs = [ “URL”, “URL”, “URL”, “URL” ];

Where, of course, each “URL” is replaced with one of your banner URLs. You need the quotation marks around each, and make sure these URLs all start with https instead of http, since the images may not load over http.

Now that you have a variable storing all the URLs, you need code to randomly select one of them. Here is how we will do that:

let index = Math.floor(bannerURLs.length * Math.random());

Math.random() returns a random decimal between 0 and 1. We multiply that by bannerURLs.length, which is the number of URLs that you put in the array, to get a random decimal between 0 and that length, and then floor it to get a random integer between 0 and that length. This allows us to specify which of the URLs to use.

Next, you will set the URL of the image like this:

document.getElementById(‘banner’).src = bannerURLs[index];

You’ll recall that we set the ID of the image tag to banner previously. That’s why we can get it with getElementById now. You’ll also recall that we removed the src tag previously, but we’re setting it now with our randomly-chosen URL. This is selected by bannerURLs[index]. If index is the integer n, then bannerURLs[index] is the nth URL in the array bannerURLs.

And you are done. As always, let me know if you have any questions!

tfwnogf-moved-deactivated202012 said:

hey sorry if this ask comes off as weird but thank im using your 4chan theme and i want to thank you so much for it not just cux i think its a bit funny but because its the only custom theme ive ever been able to easily understand, and because i can tell how much effort went into it. genuinely appreciate you for that a lot

I’m happy to hear you like the theme, and thank you so much for your wonderful feedback. It’s really good to know that someone is noticing my work, and I’ll be supporting my themes forever so please let me know if you encounter any problems with it :)

Anonymous said:

Hi I just wanted to say that I love all your themes, this is the 3rd one I've used from you! I noticed that on mobile the videos on your html theme are bigger than the page. How can i fix that? Thanks in advance!

Hello! I’m glad you enjoy my themes, and thank you for pointing this out! I’ve fixed the issue, so if you reinstall the theme, the videos should resize properly at smaller screen sizes.

As always, let me know if there are any other problems.

lilacfaerii said:

is your theme called 5 pixels per inch orrr? cause i cant find it, its beautiful btw and have seen ppl use it but i cant find its name

5 Pixels per Inch is the name of this theme blog. You can find all of my themes right here. :)

Anonymous said:

Hi im using your highlighter theme and i was wondering if theres a way to make the font smaller? I love your themes btw!

I’m sorry for not answering this until now! Yes, but you have to edit the theme file. The font size is declared in the Highlighter theme like this:

body {
  font-size: 18px;
  font-size:calc(18px + 0.2vw);
  line-height: 1.6;
}

What this means here is that for browsers that don’t support calc() notation, the font size is 18px. Otherwise, the font size is 18px plus 2% of the browser width. So the bigger the screen is, the bigger the words will be.

Now you have the power to change all of that. If you remove the calc() line, the words will stay the same size even if the browser resizes. I don’t recommend this though, because people with large screens will think the font size is too small.

I do recommend messing with the numbers here to get a combination that you like! And this goes for all of my themes. But don’t change the line height for this particular theme, because the distance between the borders in the Highlighter theme depends on the 1.6 line height.

hawkinsbabes said:

You facebook theme doesn't work anymore? It gives me this message: "uh oh! we couldn't save your theme. Looks like your custom theme references assets from non-HTTPS URLs. Please try again using only HTTPS URLs."

I’m sorry for not answering this until now! I’ve fixed the problem. But a bigger update is coming soon to the Facebook theme!

Anonymous said:

Your themes are amazing. Simple and effective. I love them. Thanks for sharing them with us!

Thank you so much for your kind words! I’m sorry that I have been too busy lately to make new themes. I’ll have a bit of free time soon, so I hope I’ll have a new theme ready to share with you then!