If you are currently designing a custom tumblr theme and you want to highlight the current page's link in your navigation menu, you don't need to develop or use any script or plug-in: there's a secret html variable called {CurrentState} –that of course doesn't appear on the official theme documentation as many others– which automatically adds the class 'current-page' on the html tag of the active page link. So you can add the class name into the tag such as:
The above block tag will add all the links to your blog's custom pages at once (except for the hidden ones). Then, you can customize the class 'a.current-page' (or simply '.current-page') on your custom CSS (embedded or linked) such as this:
a.current-page {color: {AccentColor}} /* Example */
Doing so will only add –and then stylize– the class on the active page's link; the rest of the nav links will remain normal –or styled as default. This is actually the solution used on Tumblr's official theme and that's actually where I knew it from.
However, the home link works differently. For the link highlighting to work similarly when the homepage or startpage is active, you can do so adding the class only between the HomePage block, as follows:
Notice that the {CurrentState} variable will only work for static pages of your blog, not external links –even if they redirect to your blog itself, such as /tagged/, /yyyy/mm/dd, /random or other index pages, they'll be considered as external. You can use the variable {ExternalState} for these and customize the css class 'external-page' but they'll be stylized always and in all pages instead of only the active one unlike the previous hack.
Of course, if this solution doesn't fully satisfy your specific needs due to this last limitation, you can always turn back to old trustworthy JavaScript (vanilla or jQuery)... though I won't be very helpful there.
A custom checklist on Tumblr's HTML/CSS for custom-theme beginners
Hey everyone! If you are completely new at custom themes –like I was not long ago– yet you have some basic knowledge on HTML5 & CSS3 for web design and want to dig in Tumblr's theme customization world to create your own themes, you might have some initial questions about compatibility with certain technologies. If so, this post might be good for you to start.
These are some of the –now answered by experience– doubts I had when I first started to code on Tumblr's Editor, the answers of which may hopefully help some of you who might be having the same or similar doubts:
Tumblr's Theme Editor uses HTML5, though you can use JSON to display your posts (specially & recommendably if you're using the Neue Post Format or 'NPF' which, when you find about, you won't like one bit as the majority of us) or AJAX to load your post notes.
You have a Resource Manager for theme-related resources at your disposition. You can upload your media or external styles & scripts here and Tumblr will provide a unique url for each, which you can later paste to link as the tags' source.
Read this Theme Documentation that shows most –but not all though– of Tumblr's variables, which are basically shorthands that get replaced for their final references on the live code.
Almost all HTML tags are allowed: space elements <header> <section> <main> <arcticle> <footer> <div> (of course), headings <h1>, <h2>...<hN>, icons, figures, images, iframes, links, hyperlinks, ordered or unordered lists, and even your own custom meta-tags for prebrowsing, opengraphs and schema. You can of course use your own custom classes and ID's for the mentioned tags for further CSS style customization.
Speak of Style, you can use inline, embedded or linked styles on your Tumblr theme. You don't have to embed all your styles: you can link external stylesheets using the Resource Manager or another hosting service such as Dropbox.
All media queries are compatible and customizable for web responsiveness, and you can use as many as you want/need, both on internal and external CSS. Additionally, media queries can be nested within one another (yes, even in basic CSS, no preprocessor needed).
Tumblr uses CSS3 for inline or embedded styles in the Editor, yet –I think, haven't tested– is compatible with syntactical and some other popular style preprocessors like SCSS or SASS (for external styles only) if you want/need your styles nested.
Similarly, Tumblr accepts vanilla JavaScript for embedded script writing, but you can link external libraries such as jQuery and AJAX. You'll notice, though, hypertext preprocessors (or PHP) are not allowed; so, even if you can add and style your own contact form or other input tags, you won't be able to connect those to a .php action document even if it's hosted in another host service and, hence, to make it functional. This is mostly for security reasons as far as I've understood.
We are allowed to add hyperlinks to external services (such as Facebook, Instagram, Spotify...) to mimic a Social action bar, though from now on they must all be compatible with HTTPS security protocol or either Tumblr won't redirect anymore. We are allowed as well to embed custom and external iframes (like, for example, a YouTube video or a custom widget).
You can choose your theme's typography from among over 20 free fonts available at Tumblr's editor by default. If none of those fully catch your eye, you can upload your own custom font files (only .woff webfonts though) to the Resource Manager to use them as font families, or even link as many fonts as you like from Google Fonts or other public font libraries.
If you've accidentally deleted your theme or erased part of your code, you can easily recover an automatically-saved backup at Tumblr's Theme Recovery page. Though be careful, for you've got access only up to 20 backup copies, so avoid overuse of the 'Save' button or else your theme's oldest versions will be gone forever.
Just in case you're wondering, you ain't forced to share your custom theme publicly with the comunity. However, know that you could –if you want to– publish your theme at the Theme Garden for everyone else to install and use, either paid or for free. You also ain't forced to use all the variables from the theme documentation; but know that if you aim to make your theme public, you have to cover the basic ones and follow these guidelines for theme sharing and it will be pending for approval by the Team.
Some other technologies compatible with Tumblr:
Flexbox
CSS Grid
OpenGraph
Webkit Tools
Pseudoclasses
CSS basic animations
Google Fonts, Font Awesome and other font libraries
If you want to see an example of all of the above at work, you can visit my Tumblr at ricardoherreramusica.tumblr.com
You can use your blog's header image as your share preview image on social networks like Facebook, Twitter and other platforms that support OpenGraph; simply copy this meta-tag and add it to your site's head (between the <head> </head> tags) of your theme's code using the Tumblr HTML Editor:
(unless your currently installed theme already includes it; you can use the shorthand Ctrl+F in the html editor to search for it beforehand).
Next, hit 'Preview' and then 'Save'. From that moment on, each time you post/share your blog's URL on a social platform, it will look like the following example:
(sadly except for Tumblr itself bcs I suspect its blogging platform doesn't use OpenGraph; ...either that or bl00dy NPF's, I haven't tried with legacy link posts just yet).
Note: Remember to add the meta-tag og:image:alt to describe your new share image for visual accesibility.
