5ppi

[5ppi]

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!

[5ppi]

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!

[5ppi]

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 :)

[5ppi]

Announcement

Unfortunately, I am extremely busy and I do not think I will be making any more themes for the foreseeable future. I know I've been promising new themes for a long time now, but it's clearly just not realistic at this point.

However, I plan on supporting all existing themes for as long as possible. So you can keep sending in questions and bugs related to these themes, and I will try my best to answer quickly!

[5ppi]

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.

[5ppi]

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. :)

[5ppi]

My tumblr notifications haven't been working properly for a few months now, and I've only just noticed. So I just answered a few asks from March! I'm sorry it's gotten this late to get to you and I hope you've been able to figure out the answers yourself. Nevertheless, if you sent me an ask earlier and didn't get a reply then, I've answered it now.

[5ppi]

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.

[5ppi]

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!

[5ppi]

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!

[5ppi]

i'm using ur degenerate theme for my meme sideblog and it's so fuckinggg funny i love it thx for doing god's work

Thanks for telling me! I’m really happy to hear that.

[5ppi]

I LOVE THE HIGHLIGHTER THEME!!! i know this might go against the purpose of the theme, but is there any way to reduce the size of posts to the regular 500px? and to center them on the page? also to show the tags? (im sorry for all the qs i love how it looks i swear but photosets on the theme always stretch out and id like it not to). thanks in advance!

Hi, anon! I’m glad you love my theme so much! In general, I don’t like to just tell people the answers to these types of questions, because I think people always learn more from trying things themselves. :) Yes, personally I don’t recommend setting a fixed width on anything, because it’s not really good for responsiveness -- but it’s your blog and I can’t tell you what to do.

To help you with your first two problems, the responsibility of displaying the body of the theme goes to the div with a class of "wrapper". You’ll find the style rules for this wrapper in the CSS under the name .wrapper. It actually appears twice in the CSS, because there are separate styles for if the screen is greater than 800px wide and for if the screen is less than that. I had separate styles for these two scenarios because the enormous padding and left-aligning of the posts doesn’t work for sufficiently small screen sizes, so I had to restrict these styles to only if the screen size is greater than 800px wide.

However, what you want doesn’t have this distinction, so you can actually now completely remove the style section for screens greater than 800px in width (it’s at the bottom of the CSS). Now the posts will always take up 100% of the screen space. To fix that, you add width:500px; to the first .wrapper style rules section (which is close to the beginning of the CSS). Do not remove the max-width part.

A caveat here is that due to my liberal use of responsive units on the page, setting the width to 500px doesn’t actually set the posts to exactly 500px. Because there is padding around the entire theme, that padding actually gets factored into the 500px. So the posts will actually be 500px minus a little from the padding. If your issue is that photosets always stretch out, though, I think this shouldn’t be a big deal.

For centering, adding margin:0 auto; to the wrapper will do the trick, and you can change the number 0 to any measurement. It determines the margin on the top and bottom of the page.

The theme already shows tags on permalink pages. I am assuming you want them to be shown on index pages as well. This is simple. In the HTML portion of the theme, I put the tags in a div with a class of "post--tags". I surrounded this part with the lines {block:PermalinkPage} {/block:PermalinkPage} which pretty much says, “Only display these tags on a permalink page.” Just remove those two lines and you’re set!

I hope this helps you get started on the theme modifications you want. If you have any more questions, please do not hesitate to send me another ask!

[5ppi]

hey! I was wondering if for your html theme there's a way to always have the header instead of the sidebar in all screensizes? I really love your themes btw! I have been using highlighter for a long time and decided to change it now! thank you for your work

Absolutely. See this code snippet in the theme:

@media (min-width:800px) {    .wrapper {        margin:5rem 0;        padding:0 3rem;    }        header {        margin-bottom:5rem;    }    .links {        position:fixed;        left:calc(8vw + 500px);        top:5rem;    }    .links ul {        list-style-type:disc;        padding-left:1em;    }    .links li {        display:list-item;    }}

Essentially, this part of the code tells the computer: If the screen is 800px or wider, then apply these styles to make the links appear like a sidebar. So, if you think the links should never become a sidebar, all you have to do is remove it. Let me know if you have any additional questions!

[5ppi]

hey is there anyway to remove your blockquote from your highlighter theme? I usually do this myself cause blockquote really annoys me but I tried it a few times and it didn't work so here I am. also I absoluttely adore your themes as a responsive layout fan! good job!

Sorry, I don't understand. What is it that you want to remove? Which blockquotes are you referring to?

[5ppi]

People who like tumblr themes should check out GNU/Linux. You can make it look really pretty and minimal. It's not that much harder than making themes, either. Look what I did with i3 to my laptop.

Might as well show you guys my setup. My computer looks like this and it is nice. I worked hard on it. Also clearer pictures here.

[5ppi]

sorry to bother you, but is there a way to change header title text size in lemon theme? can't find anything in the code to do that

You’re right; there’s nothing in the theme code that would change the title text size, because I’ve left it as regular header size. You can, however, add your own code to it to change what you want.

Sometimes it can be hard to browse a theme’s source code if you weren’t the one to make it. One method is to use a web browser’s built-in developer tools to “inspect” what the source code of the page is. You right click on the thing you want to look at, which in this case is the header title, and open the inspector tool. In Google Chrome this tool is called ‘Inspect’ and in Firefox it’s ‘Inspect Element’. I suspect in other browsers it would be something similar.

This tool automatically opens an HTML view and a CSS view. The HTML view shows what the HTML of the page looks like and the CSS view shows the CSS styles being applied to the current item. You can click on things in the HTML view to change the current item, so you can look at them more carefully in the CSS view, and so that you can find the right item.

From there you can see how I’ve laid out the theme and which CSS rules are being applied to the title. At first, you will automatically be looking at the thing you right-clicked, which hopefully is the header title. If you clicked on the wrong thing you might want to view other items that are close to it until you find the right one. You will eventually notice that I happen to have made the title in such a way:

YOUR TITLE

You can use this information to add code that will style your title in any way you want using CSS, or you can even change the HTML now that you know roughly what it looks like in the theme code.

By the way, I suggest using em units instead of px units, as they’re better for responsiveness. The current header title has a font size of 1.8em, for reference, (and if you’ve used the inspector tool right, you will see that) which means 1.8 times the regular font size.

Let me know if you have any additional questions!

[5ppi]

hi there! i was using ur lemon theme but the code changed? and now here in ur asks i could read why heh, and i was wondering if i could have the old code back if that ain't too much trouble ! have a nice day ♥♥♥ sorry for the inconvinience tho

You may, but keep in mind that my old codes are not officially supported. I change my themes for a reason, and sometimes the reasons may be personal opinion.

I host all of my themes on GitHub here. GitHub uses git, a version control system, which means that you can always access old versions of any of my themes, even broken or non-functional versions! On GitHub, you can navigate to the file that you want then click on the “History” button to see all the edits I’ve made to that file since the beginning of time. Then you locate the latest change that you’re interested in (which will usually be the change right before the change you didn’t like). I will do it for you just this once!

In this case, my major update that you didn’t like is “Update Lemon: More semantic markupNo jQuery...” so you want the one right before that, called “Update Lemon: Make videos responsive” which was committed on July 23rd. You click on the “<>” button on the same line as the update message, and you will be able browse my files as they were on July 23rd when I made that update. Now you can navigate to the file again, and you will see that it is the old one.

In this case I’ve located the right update for you, but if you try to do this yourself in the future it is possible you get to a broken theme since you are browsing my edit history and I make mistakes sometimes. You might have to try different points in time.

Honestly, I think your blog looks great with the updated version, and I wouldn’t change a thing--but it is your opinion and your choice to make. I hope I helped you and let me know if you have any troubles. Just keep in mind that any old versions aren’t officially supported and I won’t fix anything that’s broken (but I will be very happy to teach you how to).