ebro themes

23. they/them theme maker

[ebrothemes]

theme two: airlock by ebrothemes

live previews: (one) (two) / install: (github)

this theme was designed around wanting a simple theme with only 2 colors and options for a couple photos in the sidebars, that also supports photosets with a carousel lightbox (ideal for gifsets) and has a night mode toggle. i'm really happy with it, and it definitely works a lot better than my past themes/pages. it should work well for both text-heavy and photo-heavy blogs.

features:

responsive

NPF post support

day/night mode toggle

2 custom colors (day/night mode colors can be different)

540px posts (option for 400px, 450px, and 500px, but it was designed at and works best with 540px)

custom text like and reblog buttons

optional photo in right sidebar

8 body font options with even more customization options for font size and heading fonts

up to 4 custom links

carousel lightbox for photosets

credits in the code as well as here

please like/reblog if you use

[ebrothemes]

hello! i'm trying to use your airlock theme but whenever i try to use it, part of my description (mikhail, 23"/>) shows up at the very top left corner of my blog page and won't go away. i can't seem to find the issue that's causing this

Hi, looking at your blog I don't see that in the corner, so I can't tell you what the issue is. It may be something that shows up only in the theme editing page, but disappears once you go to the live site.

It's also possible that it has something to do with adding hyperlinks to your description, similar to this. If you have any html that uses double quotes in your description (") you can replace them with single quotes (').

If that doesn't work, feel free to send me a link to the blog where the issue is happening so I can troubleshoot.

[ebrothemes]

hi ebro! thank you for sharing your themes, im using the black and white airlock theme and loving it so much. i was wondering if there was a way to make it so my username showed up above my posts like it does for those i reblog from other blogs?

hello thank you!!

so the theme has your username set to only show up when you've pinned a post. to change that, you'll go into the html section, under the heading "TOP POST INFO"

then find the section wrapped by {block:NotReblog} ... {/block:NotReblog} and replace the whole section with this:

{block:NotReblog} <div class="reblog-header reblog-item-info"> <div class="reblog-avatar"> <img class="reblog-avatar-image avatar-img" src="{PortraitURL-64}"> </div> <div class="reblog-tumblr"> <a href="{Permanlink}">{Name}</a> </div> <hr class="pagination-line"> {block:PinnedPostLabel} <div class="pinned-post"> <i class="ph-light ph-push-pin"></i> </div> {/block:PinnedPostLabel} </div> {/block:NotReblog}

if that doesn't work first try, you may have to retype the quotations marks

[ebrothemes]

him, i'm using your theme and really love it so far! i'm having trouble, though, because something is making it... i don't know how to explain it, but basically i can't hyperlink things in my regular description without it showing up on the theme for whatever reason. you can just look at my blog and see it.

hey, thank you! that is a weird bug, and i'm not 100% sure why it's doing that. i had a similar issue when using it on one of my personal blogs, but it's not totally the same.

my suggestion would be to replace the double quotes around your link with single quotes, so it would look like:

baddie with an I.Q. like you've never <a href='https://robeatnic.tumblr.com/about'>seen</a>

instead of this:

baddie with an I.Q. like you've never <a href="https://robeatnic.tumblr.com/about">seen</a>

if that doesn't work, send me a dm and i can try to get it working

(also after you do this, it may still look weird in the theme preview, but double check because it might end up looking okay outside of the customization page)

[mournstera]

Sprung — a responsive, single-column theme

Static previews: - Preview (Left Sidebar) - Preview (Right sidebar)

Download code: GitHub

This is a single-column Tumblr theme with a choice between left or right sidebar, and body font + accent font (Google fonts) of your choosing. Full support of npf posts. Optional dark/light mode toggle and update tab available.

Read features and notes below the cut

Customize colours for dark and light mode

Customizable post margin

Custom title

Custom description

Select font-size

Select Post-width (350-540px)

Select photoset gutter (1-4px)

Select post info displayed as text or icons

Select display tags or hidden behind toggle

Select Tumblr controls displayed or hidden behind toggle

Select update tag hidden, inside sidebar or top left corner

Toggle to center post column

Toggle between sharp or rounded corners on content

Toggle between shark or rounded corners on photo(sets)

Toggle search bar

Navigation: An unlimited display of native Tumblr pages (Learn how they work in my helpdesk here). Custom label for home + ask + archive link.

Sidebar Image icon: Choose between sizes 80x80px/100x100px/120x120px. Choose a shape between shapes square, rounded, circle or blob. Separate icons for light and dark mode! But If you want the same icon, simply upload it twice.

Dark Mode: If you decide to offer dark mode, it detects if the visitor’s operating system is on dark mode, and displays that choice at the first visit - of course with the option to toggle the other mode on/off.

Icon change for update tab: To change the icons, go to https://tabler.io/icons and simply copy the name of the icon like so:

Into the corresponding field:

Notes:

Via/source links are on permalink pages

to hide the archive link, simply delete the text in the field.

Submit-link and ask-link only shows if toggled on in your blog's settings.

Credits

[mournstera]

A Dark Mode guide - with CSS variables and JS

This was first published January 2022, but has been completely rewritten and updated in 2024!

This guide is aimed to make displaying dark mode more accessible and stable. I had a long talk with a user of one of my themes, who has some eyesight difficulties, I wanted to improve on accessibility in my themes - beginning with a better dark mode experience.

What we want

When selected, dark theme to stay dark when refreshing a page

To prevent default (light) theme from flashing before displaying dark mode when browsing

If a visitor has dark mode on their computer/device, honor their preference and display dark mode with the option to turn on light mode

a snappy transition(!) - with a way to override it though!

[View guide]

[annasthms]

photosets.css, by @annasthms and @espoirthemes to everyone who balks at having to use javascript and pxu to style photosets, we hear you

photosets.css is a CSS stylesheet (compiled by JavaScript, ironically) that lays out all photoset layouts using solely CSS and a nifty photosets variable, {PhotosetLayout}. The photosets’ pictures are arranged using the CSS grid layout, though a fallback using inline blocks has been provided, in case anyone is using a browser that doesn’t support CSS grid.

Demo | Learn more + Install

[glenthemes]

NPF images fix v3.0 by glenthemes

What are NPF images?

NPF images refer to any images located between paragraphs, or images in posts uploaded via mobile. There has been little to no official documentation in regards to NPF, and the default styling only really works with Optica.

Turns out, their images have a property of position:absolute; and padding-bottom:75%; meaning that they’re only 75% of their real height.

Anything posted via mobile counts as a text post. So even if you post a single image (e.g. your art or a selfie) with no accompanying text, it’s still rendered as a text post, which can be counter-productive to what you originally wanted it to look like.

Features / Overview:

stops images from stretching past the post width

stops images from being squashed

custom spacing between images

custom spacing between images and caption text

automatically adapts to old blockquote captions or modern captions

lightbox support (i.e. click for next image in the set)

✲ Whilst v2.0 still works, it’s admittedly not my best work. This new version is more efficient and less buggy. Please remember to remove the old version before installing the new one!

♡ ⇢ instructions + download | have a question? | donate ☕

[ebrothemes]

Hi! I'm using one of your wonderful page themes, I think it's called "tags one"? It's the one with the "cards" labeled "category" in the preview and images. I was having an issue with the link inside the cards, when you hover over and the "tag 1" etc shows up. I put in my link at "URL" in the code, but it doesn't work. It automatically adds "assets.txmblr." before my link. How do I fix it? Thank you!

Hi! I can't seem to recreate this issue, at least not without any examples so I'm not totally sure why it's doing that. I haven't been coding on tumblr for over a year now but tumblr does sometimes act kind of weird and add stuff.

Sometimes it helps to double check to make sure everything is properly formatted: none of the quotation marks or brackets <> are missing and that the entire url is there. Here's how it should look:

<div class="info">            <div class="ilink"><a href="https://blogname.tumblr.com/tagged/taghere/or-whatever-your-url-is">tag name</a></div>            (more of the ilink divs here) </div>

If that doesn't work, feel free to send me or dm me a link to your page or send over what you've written in that bit of code so I can see what exactly is happening.

[ebrothemes]

Okay quick follow up, I did just notice that in the preview window when editing pages, only links that are ‘complete’ (such as <a href=”https://blogname.tumblr.com/ask”>), will successfully direct, but anything with a ‘shortened’ version of the url (such as <a href=“/ask”>) directs to the assets.txmblr. On the live page however, both types of links should work.

Not sure if that’s the same as the problem you’re having, but it could be a good place to start.

[ebrothemes]

Hi! I'm using one of your wonderful page themes, I think it's called "tags one"? It's the one with the "cards" labeled "category" in the preview and images. I was having an issue with the link inside the cards, when you hover over and the "tag 1" etc shows up. I put in my link at "URL" in the code, but it doesn't work. It automatically adds "assets.txmblr." before my link. How do I fix it? Thank you!

Hi! I can't seem to recreate this issue, at least not without any examples so I'm not totally sure why it's doing that. I haven't been coding on tumblr for over a year now but tumblr does sometimes act kind of weird and add stuff.

Sometimes it helps to double check to make sure everything is properly formatted: none of the quotation marks or brackets <> are missing and that the entire url is there. Here's how it should look:

<div class="info">            <div class="ilink"><a href="https://blogname.tumblr.com/tagged/taghere/or-whatever-your-url-is">tag name</a></div>            (more of the ilink divs here) </div>

If that doesn't work, feel free to send me or dm me a link to your page or send over what you've written in that bit of code so I can see what exactly is happening.

[ebrothemes]

hello! i installed your about page earlier today and had no problems filling in the designated codes and texts. it's a really wonderful theme since i am trying to showcase more of my work and allow my audience to better know me. i do want to ask though, are there any recommend img src you would prefer over others or certain types to do so? i can't seem to find an image that fits the icon code. thank you so much for your help!

hi! sorry this is a bit of a late response, i’ve been offline for a while. 

as you probably can tell, each of the image links will have 

<img src=“”> 

you need to replace just the IMAGE LINK or COVER IMG text which is in between the quotes with the link to your image. this can be a link to an image off of google search or one from somewhere else. basically, it just needs to end with a .jpg or .png 

if you’re cropping or editing images yourself, you’ll need to upload and host them somewhere, i personally use nickpic.host

but generally, if you find an image and the link looks something like https://website.com/somethingmaybenumbers.jpg (or .png) it should work

hope this helps!

(also for the icon, if you just want to have your profile pic, put {PortraitURL-128} in place of a link)

[codingcabin]

New Year, New Theme!

Much like in 2019, we are kicking off the year with another color challenge! This time, the focus is on hex colors that resemble English words (for example, #facade resembles facade and #C01025 resembles COLORS).

Guidelines: The use of a hex color that resembles an English word (including leetspeak) is mandatory! Please include the color(s) you chose in your post. 

Resources: Here are two sites that list hex colors that are also English words:

http://bada55.io/

http://c0ffee.surge.sh/

How to participate:

Reblog this post.

Submit your entry or tag the post with #newyearnewtheme

Duration: January 1st to February 28th

For questions contact @suiomi, @annasthms, or @eggdesign, or leave a message

[nuclearthemes]

✿ THEME 001 ✿

simple & centered one column theme static preview // download // support me on ko-fi?

>> features

base code by @seyche!

header menu with home, ask, archive and nav buttons

dropdown menu with three custom links

hidden tags that appear on hover

customization for font, font size, post margin & colors

check out the static preview for all features!

>> notes

list of credits in the code! please do not remove it, thank you :)

this is my first theme, so customization is still limited!

please dm me or send me an ask if you have any questions or run into problems :D

likes and reblogs are much appreciated! if you like my work and want to support me, please consider donating to my ko-fi, it’s much appreciated :D

[ricecodes]

[ Theme #04: From Home ]

Static Preview + Code

Features:

Responsive

Day and night mode (will stay in night mode until you turn it off!)

Dropdown tags

Popup menu (10 custom links)

Searchbar

Like and reblog buttons

Supports page links

Options:

Post size: small, medium and large

Custom description

Hover on Tumblr controls

Social media links

The font size and font family are customizable. To change the font family, please refer to this site!

Credit:

Day and night mode: @eggdesign

Icons: boxicons

NPF photosets: @annasthms

Photosets: @annasthms and @eggdesign

Popup: @odeysseus

Tippy tooltips: atomiks

Tumblr redirects: @magnusthemes

See full list of credits here!

[pirateskinned]

theme #40: phobos by pirateskinned ↳ static preview — patreon / payhip

contained theme with 400px or 500px posts

header ( 950 x 160 / 1050 x 160 ) with image ( 100 x 100 ) and title

sidebar ( 250 x 580 ) with description

slide-out with header ( 950 x 140 / 1050 x 140 ), text area in three columns, up to twelve links and muses section with an image ( 100 x 100 ) for every muse

slide-out with up to three admin spots, every admin gets an image ( 160 x 194 ) and two titles. admin slide-out doesn’t show up if there isn’t at least one admin image

custom font sizes ( 11px - 15px )

toggle option for the header to be fixed or scroll along with the posts

toggle option for the background image to be pattern or cover size

toggle option for image wrap within text posts — this feature is only for roleplaying blogs with a lot of text. does not work well with one liners!

lots of colour options

everything can be edited without going in the code — read the instructions at the beginning of the code to get the right formatting

don’t use as base code, remove credit, take parts of the code or repost / claim as your own. do edit and make it your own. please like / reblog if you plan on using.

[stratuscodes]

[ Static Preview + Pastebin ]

Rose Petals #2

Contained RP theme

Two (2) custom links

Drafts & Queue section

Multiple icons

Mostly customizable

This is a contained theme created for rp and writing purposes. You can change almost any color in the theme and the font size. You can choose between nineteen (19) description icons, which shows a little text when you hover it. I might do a muse & navigate tab soon.

Do not claim as your own.

Do not edit.

Like/reblog if you use it.

[ethereal-themes]

DIA: PERSONAL THEME BY ETHEREALTHEMES

See the source link for the preview + download for this theme

This is a personal theme with a minimalistic look.

Images; 50X50 blog avatar

Basics; 4+ Navigation Links, 350-540 Posts, Custom like/reblog

On/Off; Sidebar, Post Separator

Tweaks; Font family, Font Size, Post Margins, Sidebar Margin, Dashboard style captions

Everything you see can be edited including the accent color, margins, font family and size and much more. There are a few different post sizes that will auto-center posts depending on the size chosen. There are multiple post sizes and sidebar sizes, along with sidebar margin options so you can get the perfect look.

Basic - Basic HTML to edit, all info is on the main editor. Please reblog or like if using. And let me know if you come across any issues.