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
I will provide Worpdress template customization using the ready-made theme as per your need based on the template. The website will be hosted on your server too. This Gig is about Website customization for any company/organization / personal to make their business grow.
I am providing three different options to purchase this service. Those are explaining below:
--------------------------------------------------
Starter-----$150
Max, 5 pages website. Responsive & customized design. [ $50 for each extra pages, ]
--------------------------------------------------
Standard-----$250
Max, 10 pages website. Responsive & customized design. [ $50 for each extra pages, ]
--------------------------------------------------
Advanced-----$350
Max, 15 pages website. Responsive & customized design. [ $50 for each extra pages, ]
-------------------------------------------------- *** If you need Domain & Hosting, I am also able to provide them. WHY CHOOSE ME:
- 30 days FREE support after project handover.
- Execute task within time.
- Better communication.
- Flexible with clients. Do not hesitate to contact the right person.
Have a nice day :)
Thank You.
WordPress website customization for personal / company
as requested, here’s quick tutorial on how to make custom scrollbars.
So, a custom scrollbar is only available in webkit browsers (Chrome, Safari, and Opera). This means that any other browser will not display the scrollbar and will just use the default.
In your css, you’ll need, you’ll need to add the pseudo-element ::webkit-scollbar.
A pseudo element is used to style parts of an element. It essentially allows you to create a new type of element that you wouldn’t be able to use normally. this is different from a pseudo class, which adds styling to a specific conditions of an element (like :hover and :nth-child).
So, for a custom scrollbar, you’ll need to include ::webkit-scrollbar to set the width of the scrollbar you’re making. You can also set the height if you want to style a horizontal scrollbar.
Please do not make your scrollbar tiny. While it’s a common aesthetic in some themes, this makes it very hard to use. You don’t want your users struggling to navigate your theme.
Then you can use ::webkit-track . the track is the background/area that your scrollbar can go up and down.
::webkit-thumb is the part of the scrollbar you click and drag.
With ::webkit-thumb, you can add pseudo classes to it to style it whenever someone hovers over it and/or selects it.
Examples under the cut!
Now only setting the width and track and thumb colors, you get a basic scrollbar like thi
::-webkit-scrollbar {
width: 10px;
background: #ffffff;
border:1px solid #ddd;
}
::-webkit-scrollbar-thumb {
background-color:tomato;
}
To make that skinny track with a larger thumb like on my blog, you’ll need to play around with borders to give the illustion of that happening, because you can’t actually change the width of the track. By making thick borders that are the same color as your back ground, you make the track appear smaller.
this isn’t exactly the one I use for my blog, but it creates a similar look to this
While you can’t do this with the default window’s scroller, if you’re making a contained theme, you can add gradients and images to your thumb and track for even more customization possibilities.
In this post, I talked about working on a new Tumblr theme. I even shared a few screenshots from said theme. The theme I was talking about is actually Arica. I just finished it, and it is now available for sale on Gumroad: https://gumroad.com/l/arica-theme.
Arica is a single-column premium Tumblr theme with a fixed navbar, modal menu, and header slider.
Here are some of Arica’s many features and theme customization options:
Header Slider: showcase your arts and works; share links to your favorite posts and articles; use your mouse, or, if you’re on a touchscreen device, your fingers to navigate between slides
Supports Tumblr’s new Related Posts feature
Highlighted Posts: display the latest images from your photo, panorama, and photoset posts in slider format
Center photos: pics added to the body of a post will automatically be centered
All your pics will be high-res (high resolution)
Add titles to text posts: easily and quickly add titles to text posts and reblogged text posts with no titles just by using a tag
Exif data: display the exif data of pics from photo, panorama, and photoset posts including aperture and focal length
Track info: display the track info of audio posts including artist and album name
Caption titles: automatically turn the first line of your non-text posts into titles
Supports all of Tumblr’s post types including panorama, answer, audio, and link posts
Social media: share links to your accounts on various social media sites including Medium, Facebook, Pinterest, and Twitter; encourage your readers to follow you; let your blog visitors know where else they can find you on the web
Single column: let your posts be the main focus of your blog; no distractions since all other content will be hidden by default
Modal menu: content like your blog’s description and avatar will be stored here. You can easily and quickly access this content just by clicking the menu icon
Author widget: let your readers know more about yourself and your blog
Responsive and mobile-friendly: your blog will always look good even when viewed on any screen size or device
Fixed navbar: important links like the search bar and pages menu will follow you as you scroll through your blog
Header, modal menu, post, and footer widgets: put anything you want on these widgets including ads, text, images, and javascript
Cookie consent notice banner: comes in 3 different styles and 3 different positions; let your readers know your blog uses cookies or let them know about a contest or any other news or announcements you may have
Tumblr fonts and Google fonts: choose from hundreds of different fonts; change the font size, font color, and font family of your blog title, your blog posts, your blog’s header, your blog’s footer, and more
Back to top button: easily and quickly go back to the top of your blog with the simple click of a button
Lazyload images: images will be loaded only when they are needed and not all at once, which will help make your blog load faster
Author meta tag: will allow you to identify yourself as the author or owner of your blog
Social sharing buttons: easily and quickly share posts with the like, reblog, and social sharing buttons
Featured tags list: add up to 5 featured tags; you can even include descriptions with these tags; alternatively, you can use this feature to share links to your favorite sites, blogs, and articles
Disqus comments feature: talk to your readers; let them share their opinions with you; discuss your posts with the visitors of your blog
Twitter cards feature: share your posts on Twitter and have them displayed in a layout (complete with thumbnail and excerpt) that encourages people to check out your blog and read your writing or look at your art and other works
Google Analytics: learn more about the visitors and readers of your blog; analyze your blog’s traffics and stats
And more
Check out the demo blog (https://arica-theme.tumblr.com/) to see what the theme looks like. It also includes theme documentation and tutorials.
Buy the Arica Tumblr theme now.
If you have any questions or need some help, please feel free to ask. You can contact me here or here.
Credits: pics are screenshots from the Arica Tumblr theme demo blog
The codes for the Rustelia premium Tumblr theme have just been updated. Here are some of the changes and improvements that have been made. You can also check out the change log for more info.
Added author meta tag
This meta tag will allow you to identify yourself as the author of your blog. Here’s how:
Go to the URL of your blog
Click on the “Edit appearance” icon on the upper right corner of your blog
You’ll be taken to the theme customization page
Scroll down until you see the “Blog Author Name” option (shown in the pic below)
Just type your name, username, or whichever name you want the author of your blog to be known as, and you’re all set.
Minified CSS and Javascript
This will help make your blog load faster.
Used Web Font Loader for fonts
This will also help make your blog load faster. Previously, the fonts were loaded as a style sheet in the <head> part of the theme. With the Web Font Loader, the fonts are now loaded near the end of the <body> part of the theme, which could help increase page speed. You can find more info about this here.
Used lazysizes for images
lazysizes is a lazyloader for images. This will ensure that images will be loaded only when they are needed and not all at once, which will help make your blog load faster. You can find out more about lazysizes here.
Purchase the Rustelia Tumblr Theme
You can check out this post to get more information about the numerous features and customization options that you’ll get by using the Rustelia theme for your Tumblr blog. You can also buy Rustelia now and get a discount.
If you have any questions, feel free to ask me via the comments section below. You can also contact me using Tumblr’s ask box on my Soyuz Mir blog, which you can find here.
Note: Pics are from the Rustelia Tumblr theme demo blog.
Fiorella is a single-column premium Tumblr theme with an optional fixed sidebar. Check out the demo blog on https://fiorella-theme.tumblr.com/ to see how the theme looks. It also includes the theme documentation and tutorials. Here are some of Fiorella's numerous customization options and features: Add titles to all your Tumblr posts.
In this post, I talked about working on a new Tumblr theme. That theme is actually Arica, and I’ve just finished it as I discussed in this post. You can buy the Arica premium Tumblr theme on Gumroad using this link: https://gumroad.com/l/arica-theme.
Before Arica, I was working on Rei Asa. You can learn more about this theme on this post. It’s also available for sale on Gumroad. You can use this link to buy it: https://gumroad.com/l/reiasa.
You can also check out my themes blog as well as my themes page to see a complete list of all the themes I’ve made so far.
Anyway, now that I’ve finished Rei Asa and Arica, I have now started working on another Tumblr theme. This one is similar to the Rustelia Tumblr theme in that it also comes with a fixed sidebar. This new theme’s sidebar is located on the right side as you can see on the pic below.
The fixed sidebar comes with its own vertical scrollbar, which is separate from the scrollbar for the header and posts part of the blog (the first column).
Since this theme is responsive and mobile-friendly, just like all the themes I make, the sidebar is only visible on large screens and devices. On smaller screens and devices, the contents of the sidebar will automatically stack and show up below the header and the posts.
This also means that you won’t ever be seeing a horizontal scrollbar on your blog. All the contents of your blog will always be visible on any screen size or device without the need for side-scrolling.
On smaller screens and devices, a circular downward arrow will show up after the header tagline text. You can see this on the second pic above. If you click on this icon, you will automatically be scrolled down to the sidebar part of your blog.
Here are some more of this new theme’s many features and customization options:
Highlighted Posts
Just like Arica and Rei Asa, this theme supports Tumblr’s new Highlighted Posts feature. If you choose to show this, images from your latest Photo, Photoset, and Panorama posts will be displayed on the sidebar. These images will contain a link to the post where they came from.
On the demo blog for this theme, the heading for this feature is “Recent Photos”, but you can change this to any text you like.
Note that even if you choose to show this feature, it will not appear on your blog unless you have at least 6 Photo, Photoset, or Panorama posts (this is decided by Tumblr; the feature will automatically show up (if you turn or toggle it on) as long as the requirement of 6 pics have been met).
Sidebar Slider
The new theme is similar to the Fiorella Tumblr theme in that it also comes with a carousel, slider, or slideshow. This feature shows up on the sidebar right before the Highlighted Posts feature.
With this feature, you can:
Add up to 10 slides
Add titles to each of these slides
Add text content to each of these slides
Add links to any site you want
Share your arts and works and anything else you want
You can choose whether or not the slider should autoplay. The slider comes with navigation icons (left and right arrow carets), and you can choose whether these icons should be visible all the time or whether they should only show up when you hover your mouse over the slider.
While you can use these navigation icons to look through the slider, you can also use your mouse, or, if you’re on mobile or on a touchscreen device, your fingers, to navigate between the slides.
Sidebar Navbar
This theme’s sidebar has a navbar.
This navbar contains the following links and info:
Menu links - the burger menu bars icon. Click this to open a dropdown box or container with the Ask, Submit, RSS, Archive, and Random links.
Pages links - the vertical ellipsis icon. Click this to open a dropdown box or container containing links to the pages you’ve made and added to your blog. Check out this tutorial to learn how to create and add pages to your blog.
Social media follow icons - the share icon. Click this to open a dropdown box or container which shows links to your profiles on social media websites like Twitter, Pinterest, Medium, deviantArt, Patreon, and more.
If you hover your mouse on each one of these icons, you will see a tooltip with the words, “Follow me on [site name]”.
Note that you can choose which of these icons to display on your blog, so you don’t have to show all of them if you don’t want to, or if there are sites you don’t plan on joining.
Blog group members - the multiple users or people icon. Click this to open a dropdown box or container, which shows the avatars of the members of your blog.
Their avatars will contain a link to their Tumblr blog. If you hover your mouse over each of the avatars, you will see a tooltip with the blog member’s username as well as the title of their blog.
Stuff I like - the heart icon. Click this to open a dropdown box or container, which shows a list of the things you like on Tumblr along with a link to your Tumblr likes page.
People I follow - the person with plus icon. Click this to open a dropdown box or container, which shows a list of the blogs or people you’re following on Tumblr.
Note that the likes and follows features are only available on main Tumblr blogs, and only if you have the following settings turned on:
Search - the magnifying glass icon. Click this to open the search bar or box. This bar will temporarily hide the rest of the contents of the navbar.
Type what you’re looking for on the provided textbox then press the enter key on your keyboard. You will then be taken to the search results page. Click the x icon to the right of the textbox to return to the sidebar navbar.
Speaking of the search results page, if whatever you were looking for can’t be found on your blog, you will be taken to the no search results page:
This new theme gives you the option to customize the no search results page to your liking. For instance, you could add links to your tags page or let your readers know they can contact you if they need some help.
Here’s an example from my themes blog:
Cookie Consent Notice
This theme’s cookie consent notice feature comes in 3 different styles and 2 different positions. You can use this to let your readers know your blog uses cookies, or let them know about a contest or any other news or announcements you may have.
The available positions are Float Bottom Left and Float Bottom Right. On this theme’s demo blog, the cookie consent notice shows up on the bottom right side in a Classic style.
The styles look like this:
Classic
Block
Edgeless
You can customize the colors and fonts of this feature.
Related Posts
This theme also supports Tumblr’s new Related Posts feature. This shows up on post permalink pages after the comments section (if you choose to have a comments section on your blog).
As you can see in the above pic, the Related Posts feature shows up in its own container or box with its own vertical scrollbar.
Once you scroll through the end of the available related posts, you will see a button with the words, “Show more”. Clicking this will take you to the homepage of your blog.
The Related Posts feature shows the minimal versions of the Spotify and SoundCloud music players for Audio posts. Photoset posts will be displayed in slideshow, slider, or carousel format. This is similar to the one for the sidebar, only this one is specifically for photosets, and it will only show up on the Related Posts feature.
Tumblr Posts
This theme supports all of Tumblr’s post types. Below, you can see some examples of the appearance and layout of these post types:
Audio posts
SoundCloud
Spotify
Tumblr’s buil-in native audio player
As you can see from the above pics, this theme will include the track info of all audio posts if they are available. This includes:
Track name
Artist
Album
Play count
Photoset Post
You can position your photoset pics in any way that you want. But, on your blog, these images will be displayed in a single column, one image per row. You can add captions to these pics, and they will show up below the photo.
If it's available and it's what you want, you can also choose to display the exif data of each image. This includes:
Camera
Aperture
Exposure
Focal Length
ISO
Photo Posts and Panorama Posts also come with the exif data feature.
You can also add links to Photo Post pics.
Lightbox for Images
If you click on a Photo Post image, a lightbox will open. This will show a larger version of the picture in the middle of the screen. The post’s caption will also show up at the bottom of the screen.
If the caption is too long, it will automatically be truncated, and you will see an ellipsis at the end of the excerpt. To close the lightbox, just click on the x icon, or the left or right portions of the screen.
Photoset Posts have the same lightbox as the Photo Post. But, with Photoset Posts, you will also see left and right caret arrow icons on either side of the picture. You can then click on these icons or use your mouse, or, if you’re on a touchscreen device, your fingers, to navigate between the slides.
Panorama Posts have their own lightbox. Click on a Panorama Post pic to open Tumblr’s built-in native lightbox for panoramas. This will show a larger version of the image along with a smaller version. You can then scroll through the image to get a closer look at it.
Quote Post
The quotes on this theme come with an optional border as you can see in the pic below. You can change the fonts and colors of the quote. The first line of the source will also show up in a different style from the rest of the text content of the quote post.
Text Post
Want to add titles to text posts you reblog? Before, this used to be possible. But, after Tumblr made some changes, it’s no longer possible to add titles to reblogged text posts. When you reblog a text post, the title box is not displayed.
But with this theme, you can easily and quickly add titles to text posts and reblogged text posts with no titles just by using a tag.
Video Post
The vids on this theme are responsive. They span the width of the post box or container regardless of the screen size while maintaining the aspect ratio. The video formats and players supported include:
YouTube embeds
Tumblr’s built-in native video player
Other features and options of this theme includes:
Center photos: pics added to the body of a post will automatically be centered
All your pics will be high-res (high resolution). Tumblr will automatically resize your pics to 500px (pixels), but, with this theme, the size of your pics will be 1280px. Even the size of pics you reblog will be 1280px. Note that this will be the case for all pics unless they are really small in which case they will not be resized so as to avoid having them look pixelated and stretched
Caption titles: automatically turn the first line of your non-text posts into titles. You can see this in some of the pics above. This feature is available for Video, Photo, Photoset, Panorama, etc posts
Header, Sidebar, Post, and Footer widgets: you can put anything you want on these widgets including ads, text, images, and javascript
Tumblr fonts and Google fonts: choose from hundreds of different fonts; change the font size, font color, and font family of your blog title, your blog posts, your blog’s header, your blog’s footer, and more
Back to top button: easily and quickly go back to the top of your blog with the simple click of a button
Lazyload images: images will be loaded only when they are needed and not all at once, which will help make your blog load faster
Author meta tag: will allow you to identify yourself as the author or owner of your blog
Social sharing buttons: easily and quickly share posts with the like, reblog, and social sharing buttons
Disqus comments feature: talk to your readers; let them share their opinions with you; discuss your posts with the visitors of your blog; add any text you want (like your blog’s comment guidelines) before the comments section
Twitter cards feature: share your posts on Twitter and have them displayed in a layout (complete with thumbnail and excerpt) that encourages people to check out your blog and read your writing or look at your art and other works
Google Analytics: learn more about the visitors and readers of your blog; analyze your blog’s traffics and stats
Compatible with Tumblr’s HTTPS Security feature: make your blog more secure without messing up its appearance and layout. Your blog’s URL address will start with “https” instead of just “http”
Background image or color: you can choose to add a background image or color to your blog. If you choose the background image option, you can adjust the opacity of the pic if you think it’s too dark and the text on your blog is hard to read
JavaScript code prettifier: this theme also supports code syntax highlighting. This allows you to share codes or samples of code in a way that your readers can easily read
GIF Attribution: GIFs you add using Tumblr’s GIF search will include attribution. The username of the person who originally posted the pic as well as a link to their blog will show up below the image. You can change the background color of the attribution box
And more
The theme has a whole lot more features and customization options, but this is all for now. I hope to be able to finish this theme soon. What do you think about it so far?
You can share your thoughts and opinions in the comments section below, by reblogging this post and adding some text to your reblog, or by sending me an ask or message here.
Pics are screenshots from the new Tumblr theme I’m currently working on
