A simple page pack utilizing masonry. Please read the notes at the top of the code for help with customization. It’s suggested that you already know basic html if you’re going to install a custom page, however.

NAV PAGE: ORANGE PLANET

FAQ PAGE: TICKLE ME PINK

NETWORK PAGE: MOTHER EARTH

prey: preview + code

The Art of Asking Theme Makers Questions

Keep reading

Tutorial 03 - Installing Custom Fonts | Beginner So you want to spiff up your theme by using fancy fonts? This tutorial will show you how! Just a quick note before we continue though - unfortunately because Firefox is fickle, custom fonts (not google fonts) will not work on Firefox. For some reason fonts have to be uploaded to the same site server - so yes, even if you host it via the static tumblr uploader, it will not work. Custom fonts (not including google fonts) will only work on Chrome and possibly IE (I honestly don’t want to bother to check.) That being said on with the tutorial!

Step 01 - Finding Your Fonts

Make sure you know where your fonts are that you want to use. This means locating your fonts folder on your computer as you’ll need to upload it to an outside source. As I said earlier - you can use the tumblr static file uploader - but other sites would be like box.com and webs.com. While you can still install custom fonts, I would recommend either sticking to Google Fonts or at least having a font back up for Firefox.

a. Google Fonts

It’s a pretty easy set up for Google Fonts. You simply find a font that you like click “Quick Use” and then it provides directions for you. The only draw back is that there only a small array of fonts to use, not like what you might have in your own font folder.

Step 02 - Custom Fonts Code

So below you’ll find the custom font code you’ll need to install. You don’t need to use all the lines but it is important across browsers. You’ll want to replace “Some Font Name” with what you want to call the font. This will be used later in the CSS. You’ll also want to replace “host.com/somefontname.xyz” with your hosted font.

@font-face {font-family: 'Some Font Name';     src: url('http://host.com/somefontname.eot'),          url('http://host.com/somefontname.eot?#iefix') format('embedded-opentype'),          url('http://host.com/somefontname.woff'),          url('http://host.com/somefontname.ttf') format("truetype"),     font-weight: normal;     font-style: normal;}

The EOT font file is only for Internet Explorer. So if you want to appeal to people who have Internet Explorer - bless their souls - you’ll have to find that file. If not this is all really required of you:

@font-face {font-family: 'Some Font Name';     src: url('http://host.com/somefontname.ttf') format("truetype"),     font-weight: normal;     font-style: normal;}

Of course you can change the font-weight and font-style to what you prefer!

Step 03 - Using the Fonts

Now when you go to use the fonts in your CSS you’ll do something along the lines of:

.class {font-family: 'Some Font Name', 'Google Font Backup';}

Save your theme and ta da you have installed a custom font!

THEME #11 GOLDEN by neothm └   preview & features: original, contained   |   pastebin   |   freetexthost

ALL-IN-ONE PAGE 1 // MADE BY CHLOE THEMES

PREVIEW / CODE

Features:

Please like this post if you are using this.

6 image options: background, sidebar, scrollbar, favicon, cursor, and cursor hover.

19 optional features: max background, gradient background with two or three custom colors, posts background fade, infinite scroll or pagination, centered or left aligned, 250px 300px or 400px posts, animated beat that appears on hover, always visible (unanimated), or not at all, captions, grayscale, image invert on hover, custom cursor, sidebar image, three links, all optional.

22 color options

Other notable features: gradient background can be left to right, top to bottom, or diagonal left/right. box provided for a custom header, separate from your blog’s title. fully movable sidebar and posts, pop out ask box included, reblog button on posts, reblogged from on posts, tags that appear on hover if applicable, and a description that may be typed in infinitely.

Image sources: x x x

More info under the cut –

Seguir leyendo

THEME #19 by claricest

damascena | static preview & code

features:

credits: soundcloud player and video resizing script from @shythemes​

Please do not steal any of this code & do not edit the credit. Like/reblog if using // thank you!

colors box

put this on your blog for easy access to your color tags  

preview // css (put this code before </style>) // html (put this code before </body>)

I have annotated the code, but feel free to send me a message if you have any questions with positioning or adding more colors !!

Changing Like and Reblog button colors

The following is a truncated version of the original post by Georgi Demirev.

Basic markup

<ul> <li class="reblog">{ReblogButton size="19"}</li> <li class="like"><svg width="19" height="19" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"> <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path> </svg>{LikeButton size="19"}</li> </ul>

CSS

.like { position: relative; } /* Change color */ .like svg path, .reblog svg path { fill: #563d7c; } /* Position like button above your custom one */ .like .like_button { position: absolute; top: 0; opacity: 0; } /* Keep like functionality active */ .like .like_button.liked { opacity: 1; } ul { list-style:none; } ul li { float:left; }

BASE CODE // by clumhood

static preview / pastebin / freetexthost

Rules

Likes and reblogs are appreciated :)

Text Formatting for Tumblr’s Dashboard: Add meaning and visual order to your text with these formatting styles that work on the Dashboard. Tumblr filters out some HTML tags, but these formatting examples all function on the Dashboard. Keep in mind the Dash is where you get 70 percent of your views.

Jan. 28, 2015 Update: HTML mode moved. Also, <code>, <sub>, <sup> and <hr> (horizontal rule) now work on the Dashboard.

[Theme #12] Young and Beautiful by 7th-district

Credit:

Features:

[Live Preview] GET CODE: [Pastebin] - [Freetexthost]

Please Like or Reblog this if you use it. Thank you.

Need help? Click here.

TUTORIAL: Starry Updates Tab

Requested by tabbycas. Sorry this took so long, hon!

Please like or reblog if using!

Features:

IMPORTANT NOTE:  This was one of the first tabs I ever made. I am still working on its format, though of course it does work, and I have tested this tutorial. HOWEVER, if you would like to change the position of the whole tab on the page, you MUST make sure to change the positions of each element (star & moon). JUst position the moon where you would like it, keep track of the number value by which you changed it, and add those number to the position of the stars. The position on the page is found beside “top:…” or “left:” (delete quotation marks) under CSS, if anyone is wondering.

Any questions? Please contact me.

Without further ado:

1. Paste this before </head>

2. Paste this before </style> or after <style>

3. Paste this after <body>