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
Cómo resaltar la página activa en los temas de Tumblr
Hola! Un breve tip de diseño:
Si estás diseñando tu propio tema de Tumblr con el Editor HTML y no sabes cómo resaltar la página actual en el menú de tu blog, no necesitas usar ni desarrollar ningún script: Tumblr cuenta con una variable secreta bajo el nombre {CurrentState} –que, por supuesto, no aparece en el documento oficial sobre temas– la cual añade automáticamente la clase 'current-page' en la etiqueta html de la página activa. Entonces, puedes añadir la variable en la etiqueta así:
Esta etiqueta en el bloque de páginas añadirá los vínculos a todas tus páginas personalizadas (excepto las páginas ocultas). De manera que, posteriormente, puedes personalizar el estilo de los vínculos de la clase 'a.current-page' (o toda la clase '.current-page') en tu CSS personalizado (vinculado o incrustado), por ejemplo:
Esto estilizará únicamente el vínculo de la página activa, el resto de los vínculos permanecerán normales o con el estilo marcado por defecto. De hecho esta es la configuración del Tema oficial de Tumblr.
Sin embargo, el vínculo de la página principal funciona diferentemente. Para resaltar el vínculo de la página principal cuando esta está activa, deberás añadir el nombre tal cual de la clase (no la variable) entre los bloques de HomePage:
Nótese que la variable {CurrentState} sólo funciona para las páginas estáticas y no para vínculos externos, aun si los mismos redirigen a tu mismo blog, como las páginas de etiquetas u otras páginas de índice, todas ellas son consideradas externas. En estos casos puedes usar en cambio la variable {ExternalState} y personalizar la clase 'external-page' en tu CSS; sin embargo, a diferencia de {CurrentState}, {ExternalState} estilizará todos los vínculos externos a la vez y por igual, y no sólo el que esté activo, por lo que entiendo que éste último es algo limitado.
Desde luego, si esta solución no satisface las necesidades específicas de tu blog siempre puedes recurrir al viejo y confiable JavaScript (vainilla o jQuery)... empero por mi ignorancia en el tema ahí ya no seré de tanta ayuda.
