Revera Documentation

Custom Title Options

Revera allows you to do some neat things with post titles. You can place them below Photo(posts) and Photosets. You can even put a few really great icons infront of your Titles, to give every post a custom feel and a unique token.

Let me show you how to implement a basic custom title first.
The first thing you have to do is leave the actual Title empty. Regular titles will always appear on the top of posts, and one cannot place varying icons in front of these. 

You type your title first-thing in your regular post field. and then continue writing your post as you normally would. 

image

Now, click on the <html> button on the the right side of the menu.
You’ll see the following.

image

The <p> tags represent regular body text. We’ll need to edit these surrounding our title. We’ll need to do two things.

  • Wrap the title in <h3> tags instead of <p> tags.
  • Manually insert the Permalink into the title.

Firstly:

<h3>Custom Title</h3>

Now, in order to get your title to link to your post - you have to click on the (originally green) post’s date button - which also links to the permalink. Now copy the address that’s displaying in your browser. (Unfortunately, you cannot use Tumblr’s {Permalink} variable here.) In my case:

<h3><a href="http://reveratheme-documentation.tumblr.com/post/48195382107/custom-title-this-is-my-regular-body-text">Custom Title</a></h3>

Now you have a functional custom title which you can place below Photo’s and Photosets. Now I’ll explain how to get a little icon infront of your title - and I’ll show you from which icons you can choose.

image

This is actually really simple. I’ve set up and prepared a selection of icons which you can use. This is how they’re implemented:

<h3><span class="icon-tools"></span><a href="http://reveratheme-documentation.tumblr.com/post/48195382107/custom-title-this-is-my-regular-body-text">Custom Title</a></h3>

Inside your <h3> tags, yet in front of your permalink you insert a <span> with a class that links to your respective icon. 

<span class="icon-tools"></span>

I’ve also included the option to include a distinguishable ampersand, as seen on the Revera homepage. If you’d also like to include this in some of your titles, here’s the code. (which you will need to also place in a custom title, wrapped in <h3> tags) &amp; is the HTML code for the symbol.

<span class="amp">&amp;</span>

Below is a list of the icons that you can pick from. Have fun! 

Available Icons

  • icon-tools
  • icon-popup
  • icon-vector-pencil
  • icon-brush
  • icon-feather
  • icon-star-1
  • icon-eye
  • icon-leaf
  • icon-globe
  • icon-pin
  • icon-user
  • icon-camera-1
  • icon-rocket
  • icon-compass
  • icon-graduation-cap
  • icon-thumbs-up
  • icon-umbrella
  • icon-headphones
  • icon-data-science
  • icon-lifebuoy
  • icon-fire
  • icon-cog
  • icon-lamp
  • icon-megaphone
  • icon-mobile-1
  • icon-heart-2

*Note that an icon for link-posts in generated automatically.

"."

Enable Revera’s Mobile Layout

Revera has a pretty neat responsive layout. It’s been designed to look & work great on your tablet and your phone. However, if you want your theme to display on your phone (instead of Tumblr’s standard mobile layout) - you’ll need to uncheck the “Use optimized mobile layout" box in the Customize section of your theme.

Removing the Description

Are fancy headlines not your thing? No biggie. In the customize panel - you’ll find this neat little option to remove it - the layout will adjust accordingly.

image

Customize the Social Icons

If you prefer your social icons to be presented in a little more subtly: you can opt for the ‘Grayscale Social Icons' option, which removed the colored backgrounds. Gray is the standard - but you can pick your own color when this option is checked.

image

Once you&#8217;ve done that - your readers will see Revera on their phones as well.
If you&#8217;d like to know more, you can ask me anything. You can reach me via:
Email: benjamin@benjaminnathan.nlTwitter: @benjaminnathan

Once you’ve done that - your readers will see Revera on their phones as well.

If you’d like to know more, you can ask me anything. You can reach me via:

Email: benjamin@benjaminnathan.nl
Twitter: @benjaminnathan