Elletricity.com, from 2009 to 2014.

Update on using a Tumblr blog as a subdirectory

I wrote a post a few years ago about moving my Tumblr blog from blog.elletricity.com to elletricity.com/blog. Tumblr has since changed and the information in that post needs an update.

Files and code:

  1. A subdirectory in your domain, with your name of choice. I used /blog.
  2. Two files in your subdirectory, proxy.php and .htaccess
  3. CSS fix in your Theme HTML or CSS file
  4. Script fixes in your Theme HTML
  5. External Javascript file - I put it in a .js file with the rest of my jQuery scripts but you can use a separate file. This has to be external for the scripts to work.

proxy.php

<?php

$from = "yourusername.tumblr.com";
$unto = "yourdomain.com/blog";

// Because Dreamhost doesn't do remote fopens, and to get content-type
function fetch($url) {
  $curl = curl_init();
  $timeout = 5; // set to zero for no timeout
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl, CURLOPT_URL, $url);
  curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
  curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
        $html = curl_exec($curl);
  $content_type = curl_getinfo($curl, CURLINFO_CONTENT_TYPE);
  curl_close($curl);
  return array($html, $content_type);
}

list($html, $content_type) = fetch($_GET['url']);

// Fix root-relative links etc.
$html = preg_replace('/\b(href|src|rel)="\//', '$1="http://'.$unto.'/', $html);
// Fix the iframe-url
$html = str_replace("iframe?src=http://".$unto, "iframe?src=http://".$from, $html);

// Replace the old URL with the new
$html = str_replace($from, $unto, $html);

header("Content-type: $content_type");
echo $html;

?>

.htaccess

RewriteEngine On
RewriteBase /blog

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$  proxy.php?url=http://yourusername.tumblr.com/$1

Before </head>

<script type="text/javascript"> if (location.host == 'yourusername.tumblr.com') location.replace(location.href.replace('yourusername.tumblr.com', 'yourdomain.com/blog')); </script>

Before </body>

{block:IndexPage}<div id="control_fix"></div>{/block:IndexPage}
{block:PermalinkPage}<div id="single_control_fix"{block:Posts} data-reblog="{ReblogURL}" data-id="{PostID}"{/block:Posts}></div>{/block:PermalinkPage}
<script>var controlFix={name:'{Name}'}</script>
<script type="text/javascript" src="http://yourdomain.com/javascripts/scripts.js"></script>

In your CSS file or in <style></style>

#tumblr_controls{display:none}

In your .js file

$(document).ready(function () {
	// Permalinks and other pages
	$("body").find("#single_control_fix").each(function () {
		var x = $(this);
		var a = x.attr("data-reblog");
		var b = a.slice(-8);
		var c = x.attr("data-id");
		x.after("<iframe src='http://www.tumblr.com/dashboard/iframe?src=http%3A%2F%2F" + controlFix.name + ".tumblr.com%2Fpost%2F" + c + "&pid=" + c + "&rk=" + b + "&lang=en_US&name=" + controlFix.name + "' scrolling='no' width='330' height='25' frameborder='0' style='position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;' id='tumblr_control'></iframe><!--[if IE]><script type='text/javascript'>document.getElementById('tumblr_control').allowTransparency=true;</script><![endif]-->")
	});
	// Home page
	$("body").find("#control_fix").each(function () {
		var x = $(this);
		x.after("<iframe src='http://www.tumblr.com/dashboard/iframe?src=http%3A%2F%2F"+controlFix.name+".tumblr.com%2F&lang=en_US&name=" + controlFix.name + "&avatar=http%3A%2F%2F25.media.tumblr.com%2Favatar_8b153d3df20d_64.png&title=" + controlFix.name + "&url=http%3A%2F%2F" + controlFix.name + ".tumblr.com%252F&page_slide=slide&_v=dddebe193046ef922006b33d60687b05' scrolling='no' width='330' height='25' frameborder='0' style='position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;' id='tumblr_control'></iframe><!--[if IE]><script type='text/javascript'>document.getElementById('tumblr_control').allowTransparency=true;</script><![endif]-->")
	});
	// To bring back colorful Tumblr controls for people who aren't logged into Tumblr
	if ($('#teaser_iframe_container').length > 0) {
	    $('#tumblr_control').hide();
	    $('#tumblr_controls').show();
	}
});

Replace the bolded parts with your information. Comment or email me if you have any problems with this!

Excelle Theme

It’s been years (literally) since I’ve submitted a theme to Tumblr. For those who have stuck with me despite my long absence, this one is for you.

Includes:

  • Customization options include colors, fonts, and other styles
  • Responsive two column design with full-width posts on permalink pages
  • Feature full-width posts on the homepage by tagging the post with “xl”
  • Infinite scrolling (click button to load more posts)
  • Social networking links
  • Instagram, Flickr, Pinterest, and like widgets
  • Custom lists with bullet options
  • Custom text options on your ask and submit pages
  • Integrates colors and avatar styles from mobile theme options

Information:

  • You must allow Instagram to display your photos by getting an access token. Click here to get your access token.
  • The like widget will only display on primary blogs.
  • Uploading a custom header icon will override the option to show or hide your avatar.
  • The accent color from your mobile theme options is used for links and hovers. The color used in the demo blog and screenshots is #2A5DB0.
  • The background color is also from your mobile theme options. The color used in the demo blog and screenshots is #EBEBEB.
  • Custom text on your ask page cannot include HTML. Use \' instead of regular apostrophes.

Click here to install! If you have any other questions, please check out my FAQ. If your answer is not listed there, feel free to contact me or send a Tumblr message to me on my contact page.

Like and/or reblog this theme if you decide to use it!

Midori Source HTML

Since Tumblr hasn’t accepted my theme update, I’m putting Midori online for download. The link on the resources page has been updated. Hope you guys find this useful, and apologies for the long wait.

Working on getting a complete theme and tutorial together. In the meantime, here’s a breakdown of all the tweaks/themes I used.

iPhone 5, iOS 7.0.6

As requested, my complete iPhone setup. Weather icons from Lukas Bischoff’s Artill font; glyphs modded from Stephen Hutchings’ Typicons font; text icons and widgets by me. I’ve ported the icons and setup to my iPad as well.

Using an iPhone 5 on iOS 7.0.

Like or reblog if you’d like a tutorial on my complete setup and/or a release of the text icons and widgets!

Current iPhone theme.