How to Customize the Jelana Tumblr Theme Text Options?
This post will show you how to customize the text options of your blog if you’re using the Jelana Tumblr theme. To get started, go to the theme options page of your blog.
Here are the meanings and explanations for each of these text options:
Just leave the textboxes blank if you don’t want to display these features.
Font Family and Font Style
If you want to use Google Fonts instead of Tumblr’s built-in fonts, then refer to the following options:
Blog Title Font - the font family for the title of your blog
Post Title Font - the font family for the titles of your blog posts such as Chat and Text posts. This includes caption titles (if you turn on the caption titles feature) for Photo, Panorama, Photoset, Video, Link, and Audio posts.
Body Font - the font family for the body part of your blog such as the contents of your posts
Quote Font - the font family for quotes in quote posts. This applies only to the quote itself as well as the first line in the body of the quote post (for the author or source of the quote).
The rest of the text in the quote post uses the Body Font.
Go to https://fonts.google.com/, copy the name of the font/s you want to use then paste them on the appropriate textboxes.
Blog Title Font Style, Post Title Font Style, Body Font Style, and Quote Font Style - the style of the font family font. For example, bold or italic.
For the font styles:
On the Google Fonts site, click the name of the font you want to use
On the popup box that shows up, click the Customize tab
Put a check on the styles that you want to use
Go back to the Embed tab
You will see symbols of the font style next to the font family name
Copy this style and paste it on the appropriate textbox on your blog’s theme options page
Add : (colon) before the style
For example, the Jelana demo blog’s Post Title Font is Playfair Display. The Font Style is :bi. This means the style is bold italic. You can also use :700i.
Here’s a screenshot for reference:
The pic above is from this article.
Font Size
To customize the font sizes of various text elements in your blog, refer to the following options:
Blog Title Font Size - font size of the title of your blog
Post Body Font Size - refers to the font size for the body part of your posts
Post Info Font Size - refers to the font size of the info or meta part of your posts
Quote Font Size - font size of quotes in quote posts. This includes the first line of the body of quote posts (the author or quote source).
Blockquote Font Size - font size of blockquotes in the body of your posts.
This is a sample blockquote
Heading 1 Font Size - the font size for the titles of posts, tag pages, day pages, and search pages
Heading 2 Font Size - font size for the article titles of Link Posts and the names of the asker and answerer in Answer Posts
In the above pic, the “Buy Premium Tumblr Themes by Freya Yuki” has the Heading 2 Font Size while the “Sample Link Post” has the Heading 1 Font Size. The “On Jelana...” has the Post Body Font Size.
In the pic above, both the “Anonymous asked” and the “potter-plotholes said” have the Heading 2 Font Size.
Heading 3 Font Size - refers to the font size for the following:
the Follow me heading of the social media icons
the exif data heading for Photo and Panorama Posts
the audio track info heading for Audio Posts
the notes count heading
the comments heading
the highlighted posts heading
the likes heading
the follows heading
the group blog members heading
the Twitter widget heading
the Pinterest widget heading
the Facebook widget heading
Header Content Font Size - refers to the font size for the contents of the header. This includes the tagline and the header widget.
The tagline shows up right below the blog title. On smaller screens, the header widget shows up below the tagline. On larger screens, the header widget shows up to the right of the blog title and tagline.
You can put anything you want on the header widget including images, HTML, javascript, or just plain text.
Sidebar Font Size - refers to the font size for the contents of the sidebar. This includes the font size for the description of your blog and the sidebar widget
Navbar Font Size - font size for the contents of the navbar including the icons and the custom link
Navbar Dropdown Font Size - font size for the contents of the navbar that open inside a box, container, or dropdown format. This includes the Menu Links (submit a post, RSS feed, Archive, and Random) and the Pages Links (pages you add to your blog)
For more info about the navbar and how to customize it to your liking, refer to this.
Footer Font Size - font size of the footer section of your blog
Cookie Consent Font Size - font size for the cookie consent notice widget. Refer to this post for more info
Exif Data and Audio Info Font Size - font size for the contents of the exif data and audio info
Back To Top Button Font Size - font size of the back to top button
All the font sizes are in rems.
Line Spacing
Posts List Spacing - spacing between ordered and unordered lists
Posts Heading Spacing - spacing between headings
Posts Paragraph Spacing - spacing between paragraphs
Check out the Jelana Tumblr Theme demo blog’s Sample Text Post for examples.
Other Text Options
Blog Title On Hover - if you hover your mouse over the title of your blog, you will see a tooltip. You can customize the text on this tooltip
The Blog Author Name will let you identify yourself as the author or owner of your blog.
This is the author meta tag that will let search engines know who the author or owner of a blog or website is.
To add this, all you need to do is look for the Blog Author Name option.
Then just type your name, username, or whichever name you want the author of your blog to be known as, and you’re all set.
Highlighted Posts Text - refers to the heading for the Highlighted Posts feature. Check out this post for more info.
Change the contents of the following options to customize the text and links of the cookie consent notice banner:
Ask Page Text - way back in 2015, I wrote this post on how to add text to your Tumblr Ask page.
The method to do this is easy enough, but, using the Jelana Tumblr theme, it’s even easier, not to mention faster, because, now, all you need to do is fill in the Ask Page textbox, and your Ask page can look something like this:
Note: to display the ask and submit pages of your blog, you need to turn on these features on your blog settings:
Audio Info Text - heading of the audio or track info of Audio Posts
Exif Data Text - refers to the tooltip text that shows up when you hover your mouse over the camera icon if you choose to display exif data and if it is available. This also refers to the exif data heading for Photo and Panorama Posts.
Change the Background Image Opacity depending on how transparent you want your blog’s background image to be. Refer to the Add Opacity To Background feature for more info.
Custom Link Text - text content of the custom link. On the Jelana Tumblr Theme’s demo blog, the custom link text is Tumblr Themes
Custom Link URL - URL link of the custom link. On the Jelana Tumblr Theme’s demo blog, the custom link URL is https://gumroad.com/freyayuki
Menu Links Tooltip - text that shows up when you hover your mouse over the burger menu icon (the icon with three horizontal lines) in the navbar section of your blog.
Look for the Post Widget option to add content to the widget that shows up after your posts. This widget will only show up on post permalink pages.
Footer Widget 1 and Footer Widget 2 - contents of the footer section of your blog
Sidebar Widget - contents of the sidebar widget
Header Widget - contents of the header widget
Header Tagline - contents of the header tagline
Google Analytics will let you track your traffic and get more data and info about your blog. To use this, add your Tumblr blog to your Google Analytics account then get the given ID.
Back on the theme options page of your blog, scroll down until you find the Google Analytics ID option.
Then paste your ID on the provided textbox.
RSS Link - this is for those who don’t want to use Tumblr’s built-in RSS feed. Just type your RSS feed URL link on the textbox provided.
Photoset Post Gutter - spacing between images in Photoset Posts
Facebook Page URL, Pinterest Profile URL, and Twitter Profile URL - URL links of your Facebook page, Pinterest profile, and Twitter profile
Facebook Widget Heading, Pinterest Widget Heading, and Twitter Widget Heading - headings or titles of your Facebook, Pinterest, and Twitter widgets
Disqus Comments
The comments section will show up before the related posts section on permalink pages only if you fill up the Disqus Shortname textbox.
Leave the Comments Heading and Comments Content textboxes blank if you don’t want to display this info.
Social Media Follow Buttons
Scroll down near the bottom of the theme options page of your blog to find the textboxes that correspond to the social media icons that show up on the sidebar.
Then just add the links to your accounts on these sites. For example:
Check out this post for more info.
If you have any questions about any of this, please feel free to ask me by leaving a message in the comments section below or by contacting me here.
