it’s actually just an overlay on top of the header image with a gradient that goes from transparent to the background colour to mimic the effect of it fading into the background!

it’s pretty simple, especially since there’s tons of tutorials online and most of it is just changing the colours of stuff in the CSS. if you want to add one to a theme, you’ll also need to know how to use your browser’s inspect element tool, but again, there’s lots of explainers on how to use it. it’s more time-consuming than complicated. I have a tag for themes with night mode but it’s very sparse since I only just started that tag.

{RGBcolor:name} is what you’re looking for.

it’s used like… color: rgba({RGBcolor:name}, 0.5);

sorry I’m a web design noob and I don’t know quite what you mean by a proxy…. not sure if this is what you meant, but it’s totally possible to make your blog posts only viewable from the archive and/or force people to look at a certain page on your blog! i.e. if you install a page theme on your regular blog or your theme HTML support posts, desktop viewers will only be able to see the page no matter what URL they go on. so people will be able to look at your archive if they go to /archive but if they click on the post permalink, they won’t see the actual post, just the page code you’ve got on top of it.

you can also use this redirect script to force certain pages on users. like, I use it on my /ask page to redirect anyone who goes to /ask to my faq. I think that sounds like what you might be looking for?

I will note that I’ve heard of cases with blogs that use a bunch of redirect scripts getting taken down in the past (as in a few years ago). I don’t know of any recent cases and I and many other thememakers use redirects all the time without issue, but thought I’d mention that just because tumblr has been shitty about sex workers :/ but even if you didn’t go that route, replacing your regular theme HTML with a page would definitely force your users to look at that page no matter what url they went to.

oh that’s lovely to hear! good luck with your return to coding :)

it’s the post authors blocks, which you can find listed under the “group blogs” section of Tumblr’s documentation.

on mobile - no, because to my knowledge the mobile theme override in the app won’t let you do it. on desktop, you can do it with the filter property, i.e. like this:

.tmblr-iframe-compact .tmblr-iframe–unified-controls {

-webkit-filter: invert(100%);

-o-filter: invert(100%);

-moz-filter: invert(100%);

-ms-filter: invert(100%);

filter: invert(100%);

}

there’s a bunch of different ways to use that property though.

I know some theme makers have started out that way because you don’t really have to deal with any of the Tumblr specific variables, so you don’t have to really deal with changes affecting your code, and pages are solely reliant on HTML/CSS. it’s definitely less arduous. but for learning, I don’t think there’s a “best” way, it just depends on what you feel most comfortable with. I never made a page until I’d been coding themes for myself for years simply because I never used them, and being able to use my codes myself and test them out really helped me to learn. even now, I much prefer coding themes to pages even though pages are easier in some ways because you have to spend more time organizing your code and writing instructions and I hate doing that.

plus I think it really depends on your tolerance levels for change. honestly, the npf photosets aren’t too bothersome unless you post lots of photosets or really don’t like it when margins are 5px out of place, and as someone who falls into the latter camp, that’s why it bugs me. but if you don’t care so much about that, you could just focus on learning the variables and leaving aside npf for now, since there’s not really much that can be done until Tumblr finalizes their changes.

yes, they’re called tooltips! there’s lots of ways, but I think most thememakers use an external plugin like style-my-tooltips or tippy.js (I personally use tippy.js). the plugins have instruction on usage but there’s also this tutorial on tippy.js by silbrigthemes you can follow. 

you can also do it with jquery ui, but as I’ve never used that method, I don’t know exactly how to do it with that method.

it sounds like this is the tutorial you’re looking for!

I got it by following css-trick’s guide to dark/light mode and using the localStorage method. I think the css is basically the same as in egg’s guide, it’s just that the jquery uses localStorage to remember the user’s preferences, so I think you could probably just swap out the jquery from egg’s tutorial with what I have. this is my jquery:

const btn = document.querySelector(“.night-button”);

   const currentTheme = localStorage.getItem(“theme”);
   if (currentTheme == “dark”) {
     document.body.classList.add(“night-mode”);
   }

   btn.addEventListener(“click”, function () {
     document.body.classList.toggle(“night-mode”);

     let theme = “light”;
     if (document.body.classList.contains(“night-mode”)) {
       theme = “dark”;
     }
     localStorage.setItem(“theme”, theme);
   });

but yes I fully recommend reading through the guide since I’m a novice with jquery and I can’t really explain it well. 

thank you! yes, it’s possible to do so by using the @ font-face property, and I see themes that use it fairly regularly. if it’s not working, I’d guess it’s something to do with a font hosting problem - although I probably shouldn’t speculate because I’ve never tried it before.

thanks! and yeah I answered really quickly this a few months ago in brief but people keep asking so I might as well go into more depth since it’s not complicated.

choose an icon and put it in the HTML above </body>, like so (this is an svg from feathericons, but anything works):

<div id=“controls-icon”>
   <svg xmlns=“https://www.w3.org/2000/svg” width=“48” height=“48” viewBox=“0 0 24 24” fill=“none” stroke=“currentColor” stroke-width=“2” stroke-linecap=“round” stroke-linejoin=“round” class=“feather feather-settings”><circle cx=“12” cy=“12” r=“3”></circle><path d=“M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z”></path></svg>
</div>

then, in the CSS above </style>, you have to fix it in the top right-hand corner with something like this, plus whatever styling you want for the button:

#controls-icon svg {
   position: fixed;
   top: 20px;
   width: 1.5em;
   height: 1.5em;
   right: 20px;
   z-index: 50;
}

and finally, you need to add padding to the native tumblr controls so that the padding overlaps the icon you put in the right-hand corner. you also have to set the opacity to 0 so that when the user hovers over the icon, the opacity of the controls changes to 1, like so:

.tmblr-iframe-compact .tmblr-iframe–unified-controls {
   z-index: 999999999!important;
   opacity: 0;
   margin-top: 0.65em;
   padding-right: calc(35px + 1.5em);
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -ms-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
.tmblr-iframe-compact .tmblr-iframe–unified-controls:hover {
   opacity: 1.0;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -ms-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;

}

it sounds like you need to add box-sizing: border-box; to your selectors. I could be off-base though since I suck at doing coding without a lot of trial and error.

I see this ask has a (½) at the end but I didn’t get a second ask so if you sent one, Tumblr must have eaten it. resend if you want to.

here’s a list of explainers:

• css-tricks intro guide on svg and on using CSS with svgs
• w3schools’ explainer
• MDN web docs’ explainer

you can resize the svgs with CSS. cherry blossom already has a lot of pre-existing CSS that styles the svgs, so your svgs might be being affected by that; you can check what styles are being applied with your browser’s inspect element tool.

yeah, that was the one I used too back when I first coded the controls like that. the basic idea is to put your icon wherever you want, and then position the controls nearby but give the controls selector enough padding so that the controls padding overlaps the icon, but the controls themselves don’t overlap the icon. then give the controls selector opacity: 0;, and set a :hover on the controls so that when the user hovers over the controls, the opacity changes to 1. 

you could take a look at my rosemary theme to see how I did it, but there’s no one-size-fits-all kind of code with this, since you’ll have the adjust the code depending on how big your icon is, where you position your controls and icon, and how much padding you want.