How To Change Blog Title Font On Tumblr

CSS is the styling language of the web used to change how things on your Tumblr blog look, such as colors, the number of columns, the positioning of elements and text size (this list could go on forever).

A lot of preferences have already been included in your theme's customize panel so you don't have to write your own custom CSS for things such as changing up a link color. However if you know (or are learning) CSS, you may want to add your own custom CSS for advanced or personalised looks. If you're unfamiliar with CSS, some common snippets are included towards the end of the page, allowing you to try out some more advanced customizations on your blog.

To add custom CSS to your theme, scroll right down to the bottom of the customize panel and select "advanced options":

You can compose your own CSS (or paste in a CSS snippet) here:

Snippets

Here are some pre-made CSS snippets for pasting into the "add custom css" section of your Olle Ota theme.

Make posts transparent

For transparent black posts use:

#content article { background: rgba(0, 0, 0, 0.5) !important; }

For transparent white posts use:

#content article { background: rgba(255, 255, 255, 0.5) !important; }

In both cases you can change the "0.5" part to be any decimal number between 0.0 and 1.0 (such as 0.1, 0.2, 0.35, 0.73). This adjusts the level of transparency of the post.

Change font size for post titles

.type-NAME h1 { font-size: 0.9em; }

You can manually fine tune post title sizing on a per post-type basis with the above CSS. Replace 'NAME' with the type of post you want to edit (text, photo, photoset, link, chat, video, audio or answer). Also replace "0.9" with a slightly smaller or larger number, depending on how large or small you want the titles to be.

For example, to reduce the font size of text post titles use:

.type-text h1 { font-size: 0.9em; }

Change font size for quotes

To manually adjust the size of quote posts use the following CSS depending on your theme type.

For grid themes use:

.type-quote blockquote { font-size: 0.9em; }

For column themes use:

.type-quote h1 { font-size: 0.9em; }

As usual you can change the "0.9" to any decimal number of your choice to adjust the size.

Change font size for text widgets

.intro {font-size: 0.9em !important}

Make images grayscale

img { filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%) }

Remove all shadows

* { box-shadow: none !important; text-shadow: none !important; }

Fixed masthead background effect

#masthead { background-attachment: fixed; }

Hide post date (grid themes only)

To hide the post date that shows up when you click on a post permalink use:

.permalink .post-hover { display: none; }

Adjust number of columns (grid themes only)

This custom CSS is for going beyond the number of columns provided in the theme's option (there's a 3 or 4 column/4 or 5 column toggle in grid themes).

This one's a bit complex to change and involves a little bit of experimentation to get it right. Here are the steps to take:

Enable the "form fewer columns" option in the customize panel
Paste the following CSS into the custom CSS box:
.three-col.index article { width: XX%; }
Adjust the "XX%" to a percentage, you'll need to experiment with the percentage until you get the desired look

As a very general guide:

8.28% to 14.28%: seven columns
10.66% to 16.66%: six columns
14% to 20%: five columns
19% to 25%: four columns
27.33% to 33.33%: three columns
44% to 50%: two columns

Just for example, to change to a two column theme, you'd type:

.three-col.index article { width: 45%; }

The 45% figure comes about from experimentation by trying out values from 44% to 45%, as it varies between different theme designs.

Please note that changing the number of columns may cause your blog to look strange, as themes are specially designed for a specific number of columns only.