#customize theme

First, go to the homepage of the blog whose theme you want to change. For this tutorial, I’ll be using the Arica Tumblr Theme’s demo blog as an example, so let’s go there now. You can learn more about this theme on this post and this one. You can buy it here.  

As you can see from the above screenshot, most blogs will have the Tumblr controls located on the upper right side of the page.

Click on the one that looks like a palette. If you hover your mouse over it, you will see the words, “Edit appearance”. Clicking on that link will take you to your blog’s Edit Theme page.

You can click on the Browse themes link if you want to check out the themes that are available on the Tumblr Theme Garden. Click on the Edit HTML link if you want to make your own theme or if you’re using a free or paid theme that isn’t available in the Theme Garden.

If you make changes to your blog’s theme, the green Update Preview button will become clickable. Clicking it will cause the preview pane to the right of the Edit HMTL section to change, reflecting the changes you’ve made. Doing so will also cause the blue Save button to show up.

If you’re happy with the changes and your blog’s new look, then just click the Save button.

However, as noted above, the preview pane only shows your blog’s homepage. If some of your content is hidden under a Read more or Continue reading link, then you won’t be able to see the changes made to those posts. 

It should also be noted that there are some elements in your theme which may now show up in the preview, but which will show up on your blog. Take Tumblr’s like and reblog buttons for example.

So, to really see how a theme will look like on your blog, save the changes you’ve made to it then go to your blog’s URL and check out its posts and permalink pages. If you don’t like the changes, you can just revert back to your old theme or check out another one instead. 

Hope this helps. If you have any more questions, feel free to ask :-).

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.

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.

Responsive and mobile-friendly: your blog will always look good even when viewed on any screen size or device

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

Portfolio widget: show off your arts and works; add 'buy now' or 'read more' buttons

Share your Facebook, Twitter, and Pinterest feeds on your blog

Background image: make your blog stand out; use any image you want

Social media: share links to your accounts on various social media sites including Medium, Facebook, Pinterest, and Twitter

Supports all of Tumblr's post types including panorama, answer, audio, and link posts

Header, modal menu, and footer widgets: put anything you want on these widgets including ads, text, images, and javascript

Center photos: pics added to the body of a post will automatically be centered

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

Caption titles: automatically turn the first line of your non-text posts into titles

Exif data: display the exif data of pics from photo and photoset posts

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

Lazyload images: images will be loaded only when they are needed and not all at once, which will help make your blog load faster

Lightbox for images: click on an image to see a larger or bigger version of it

Audio post info: display the track name, artist, album, and play count of audio from audio posts

Author meta tag: will allow you to identify yourself as the author or owner of your blog

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

Pagination: choose from 2 different pagination styles: default or jump

Cookie notice banner feature: tell your readers and visitors that your blog uses cookies; link to your cookie policy page or your privacy policy page; tell your readers important announcements or news about your blog

Highlighted Posts: images from your latest Photo, Photoset, and Panorama posts will be displayed in the modal menu. These images will contain links to the post where they came from   

And more

Check out the demo blog (https://rei-asa.tumblr.com/) to see what the theme looks like. It also includes theme documentation and tutorials.

Buy the Rei Asa Tumblr theme now.

If you have any questions or need some help, please feel free to ask. You can contact me here or here.

No built-in gadgets or widgets on Tumblr

Other blogging platforms, like Google Blogger, make it really easy and quick to add text to your blog’s sidebar and footer. In the case of Google Blogger, all you need to do is add the Text gadget to your sidebar or footer and configure the settings of said gadget to input whatever text you want.

Unfortunately, Tumblr doesn’t have gadgets or widgets. So wanting text on your blog isn’t as simple or as easy as clicking something and adding it to your site’s footer or sidebar and then typing the text that you want to input. Well, unless your chosen Tumblr theme comes with this feature anyway.

Customizing and modifying your Tumblr blog’s theme

If it doesn’t and you really want to add some text on your blog’s sidebar or footer, you’ll have to tinker with the HTML codes of your Tumblr theme and modify and customize it to your liking.

The first step is to go to the theme options page of your Tumblr blog’s theme. Once there, just click on the “Edit HTML” link on the left side of the page and you’ll be taken to the HTML editor.

Here, you’ll have to look for the HTML codes that correspond with the footer or sidebar section of your blog and that’s where you can add the text that you want. This will usually be named something that has to do with the sidebar or footer, but the exact names of the class or ID depends on which theme you’re using.

Once you find the aforementioned codes, you can start adding the text you want as well as your chosen style or design. This depends on how you want this section of your blog to look like so the HTML and CSS can differ per person.

For example, if you want a paragraph, you’ll need the <p></p> code. If you want to insert a break or space in your text, you need to use the <br> code. You can also decide the font-size of your text as well as the font-family. You can even choose to bold it or italicize it.    

It can look something like this:

<div id="footer" style="font-weight:bold; font-size:14px; font-family:Arial;"> <p>Insert your text here</p> <br> <p>Insert more text here</p> </div>

After adding your chosen text, click on the “Update preview” button to see the changes you’ve made. If everything looks right and to your liking, save the changes you’ve made before exiting out of the HTML editor.  

Tumblr Themes with this feature

Don’t want to do it yourself? Here are examples of some Tumblr themes that allow you to easily and quickly add text to your blog’s sidebar and/or footer.

Fiorella Tumblr Theme:

The sidebar comes with a tagline feature, which allows you to put text right below your blog title as well as a text widget feature as you can see in the screenshot below:

The theme comes with a 2-column footer where you can put any text you want as well as polls, codes, ads, javascript and more.

Adding text to your sidebar and footer using the Fiorella theme is as easy as going to the theme options page of your blog and typing whatever you want to show or display. Just look for the entry which corresponds to the feature you want to use. 

For example, to customize your footer, just look for the text with the names, “Footer Col 1 Heading,” “Footer Col 1 Content,” etc.

Verde Frühling Tumblr Theme:

This theme doesn’t come with a sidebar, but you can still add text on your blog’s header as well as footer.

The theme’s footer section comes with 2 columns:

Rustelia Tumblr Theme:

The Rustelia theme comes with a 2-column footer:

Sol Aki Tumblr Theme:

The Sol Aki theme doesn’t have a footer text widget. However, it does have a sidebar and header widget.

Mystic Summer Tumblr Theme:

Mystic Summer also comes with a three-column footer:

Weiss Zima Tumblr Theme:

Weiss Zima doesn’t have a footer text widget, but it does have a sidebar text widget as you can see below:

The rest of the themes mentioned here are just like Fiorella. You can easily add text to your blog’s sidebar and/or footer just by going to the theme options page, looking for the feature you want to change or modify and then adding the text you want or toggling an option on or off. 

All of these themes come with documentation as well as tutorials for your convenience. For more detailed information about these themes, you can check out my themes page here. If you have any questions, feel free to ask :-).