Hi! I'm using Theme 5: Jupiter and it's beautiful, and I already checked how to have different background images with light/dark mode toggle on— but I was wondering if there was a way to also change the sidebar icon (the one inside the little planet) into a different one depending on the color mode? Thank you so much for all your work btw ^^
sure, no problem! my only note is that if you use this feature, dual avatars, it won't update if you change your avatar on mobile.
EDIT: removed all that since it was glitching out, and just added dual background images and dual avatars as options to the default theme! you can reinstall without having to modify any html yourself.
Hi! I'm using your super cool Discord theme (v2) on a sideblog of mine. Is it possible to separate the custom links into categories (similar to how you can group text channels, if you know what I mean)? Thank you for your hard work!
hmm well it wouldn't be possible with the links as they are right now, unfortunately :( tumblr pages don't allow for grouping of links right now...
that being said.... if you're comfortable with editing the theme code itself, then yes, I could give you template code to fill in! the only limitation would be that you'd have to go and edit the HTML every time you wanted to change/add a link
template code and instructions under the cut. as always, if they're confusing or something isn't working right, feel free to DM me and we can figure out fixes
usage instructions
go to your Customize page
find the Edit HTML section, then ctrl+f to the {block:HasPages}...{/block:HasPages} part
delete that entire part. make sure you don't delete anything around it, like the Description block or the </div> tag!
replace it with the code from the "template code: HTML/JS" section below
go back to the main Customize menu and find the Advanced Options section
in the Add Custom CSS box, add the code from the "template code: CSS" section below
go back to the HTML and add links/sections
- links can be added by copying over a single <a href="YOURLINK">...</a> tag. place it inside one of your <div class="category">...</div> tags
- categories can be added by copying over one <span class="catlabel">...</span> and one <div class="category>...</div>, immediately after each other
for more specific instructions and a breakdown of the links/categories code, go to the "more specific guide" section at the bottom of this post
with the actual URL inside the href bit, and the text you read goes where "LINK DISPLAY TEXT HERE" is. for example, this link can be gotten from this code:
"channel" links in the discord theme follow a similar pattern, with the addition of an <svg>...</svg> for the # icon, and putting the link display text inside a <span>...</span> to separate it from the #.
category labels are super similar to links, just without the "href" URL portions. all you edit is the "CATEGORY NAME HERE" bit, which is the label for that entire category.
if you want to add a new category, copy this entire block of code, then:
edit the "CATEGORY NAME HERE" label
add new links inside the <div class="category">...</div> section
is there a way to change the background on jupiter from a solid color to be a background image?
Anonymous asked: hey there! I love your Jupiter theme so much, I was just wondering if there was any way I could get a background image rather than a solid color background?
Absolutely, though it'll require some minor modification to the theme! There's two options for how to add background images. Both use the same steps, the only difference is what you have to add to the theme code
EDIT 19/8/2022: i've removed the instructions here since the original Jupiter theme has been updated to include background image options! these don't require any HTML editing at all. reinstall the theme from here, and see the original post for instructions on how to achieve the combination of background images you want
Hi! I've been using your theme Jupiter, and it's so beautiful, but I can't seem to figure out any way to make any uploaded background image tile instead of filling the whole screen and getting all blurry. Is there any way to do that or is it impossible in this theme?
add one of the following to your custom CSS (instructions on editing custom CSS), depending on which backgrounds you want to tile
both color mode backgrounds:
html body {
background-repeat: repeat;
background-size: auto;
}
only dark mode background:
html:not(.light) body {
background-repeat: repeat;
background-size: auto;
}
only light mode background:
html.light body {
background-repeat: repeat;
background-size: auto;
}
hey sorry to bother you and if this question was asked already
in your discord theme code there are likes and random post at the side thats green i was wondering how to add more of those
and how to add the ask button because i have asks enabled but when i copied the code the ask function isnt showing up
anon sent another message a little after this that I assume means they figured this out, but just in case it'd help anyone else, I'll go ahead and answer this!
ask and submit
both of these are blog-dependent; if you have the tumblr settings "let people ask questions" and "let people submit posts" turned on, they'll display! make sure to go to your actual blog in a new tab to check that these links appear, because the Customize page can be buggy and not display some stuff even when it's enabled and visible.
more "server" links
this'll take a bit of theme html editing, but it should be fairly simple! just copy/pasting a single line in the right place, then editing that a bit.
To start, you want to find the place in the code you'll be inserting your links, so open up the Edit HTML page in the Customize menu, then Ctrl+F to 'a class="more"'
Just above that (and below "IfShowArchiveLink"), hit enter to get a new line. This is where you'll be adding your links! (There's a screenshot of the complete code at the end of this post, if you'd like visual reference.)
For all the link types, to make this point to the link you want it to go to:
Change YOUR-URL-HERE to the url you want, e.g. https://tumblr.com
Change YOUR-LABEL-HERE to some text describing the link, e.g. Likes, Following, My Link, whatever. This can technically be as long as you want, but try and keep it short and simple.
Next, figure out what you want as the link icon (SOMETHING-HERE). This can be text, an SVG, or an image, all of which are pictured below:
TEXT: Replace SOMETHING-HERE with whatever text. Keep it short, under 5 letters if you can. Uppercase/lowercase, whatever works.
SVG: Replace SOMETHING-HERE with an SVG, usually in a format similar to:
The HTML that resulted in the above three server-links was this. Note the double-hyphens in each var(); sometimes Tumblr reformats these into long dashes, so you'll have to edit them back by hand:
