Social Networks Guy

  • Home
  • Categories
    • Applications
    • Browsers
    • Productivity
    • Tumblr
    • Tutorial
  • Subscribe via RSS

How to replace your Tumblr title with an image

August 18th, 2009  |  Published in Tumblr, Tutorial  |  48 Comments

It looks like there is an information void on the internet when it comes to customizing your Tumblr. So from now on I will dedicate a few posts to help Tumblrs customize parts of their themes. If you have a suggestion for a Tumblr Help Post please leave it in the comments. I will be more than glad to write about it.

Now back to the subject in hand. I will now let you know what steps you need to take in order to change the regular letter title of your blog and change it into a custom image. For this tutorial I will use the most used and popular Tumblr theme Litewire.

Tumblr Title Before and After

Step 1.
Click on the Customize button. Click on the “Theme” button and in the window that opens on the “Use Custom HTML”.

Step 2. (Very Important!)
Before doing anything else copy the HTML code that appears in the “Use Custom HTML” window and paste it in either Note Pad (Windows), Text Edit (Mac) or your favorite Source Code Editor.

Step 3.
Find a free place where to host your image if you don’t already have a place. I suggest you use Imageshack.us

Step 4.
Find the first Tumblr tag for title {title}

1
2
3
4
5
<body>
    <h1>
        <a href="/">{title}</a>
        <a href="/rss"><img src="/themes/5/rss.gif" id="rss" alt="RSS"/></a>
    </h1>

Step 5.
Replace the Tumblr {title} tag with the following code:

1
<img src="http://IMAGEURL" alt="Name of your Tumblr here" />

Note: Use the address of the image instead of IMAGEURL (ie. http://img217.imageshack.us/img217/6029/18561222.gif)

Step 6.
We now have to make a few changes to the CSS. This part will be different in each theme. I will try to explain what to look for so that regardless of what theme you are working on, you will be able to make the changes.

Your theme’s CSS is the code that shows between the tags:

1
2
<style type="text/css">
</style>

If the {title} tag is wrapped in <h1> tags as is the case in this example you will have to look for any h1 mentions in the CSS code. In this example using the Litewire theme we have:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 h1 {
        width: 600px;
        padding: 0px 100px 20px 100px;
        margin: 50px auto 40px auto;
        border-bottom: solid 1px #ccc;
        text-align: center;
        font: Bold 55px 'Trebuchet MS', Helvetica, sans-serif;
        letter-spacing: -2px;
        line-height: 50px;
        position: relative;
    }
   
        h1 a {
            color: {color:Title};
            text-decoration: none;
        }
       
        h1 img {
            border-width: 0px;
            position: absolute;
            right: 0px;
            bottom: 10px;
            width: 43px;
            height: 23px;
        }

In this case we don’t need a fixed width and height. If our image is bigger than the current declared width and height it will not show correctly. So delete the width and height.

Now we have to fix the height of the space where the image goes. The image I am using is of 120 pixels in height. When declaring all 4 margins in one line the order is top, right, bottom and left (clockwise order). So we need to change the top margin of the h1 margin from 50px to 120px. This will give us the height we need for the new image. (Check the code below so you can compare to the original posted above).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
h1 {
    width: 600px;
    padding: 0px 100px 20px 100px;
    margin: 120px auto 40px auto;
    border-bottom: solid 1px #ccc;
    text-align: center;
    font: Bold 55px 'Trebuchet MS', Helvetica, sans-serif;
    letter-spacing: -2px;
    line-height: 50px;
    position: relative;
}

    h1 a {
        color: {color:Title};
        text-decoration: none;
    }
   
    h1 img {
        border-width: 0px;
        position: absolute;
        right: 0px;
        bottom: 10px;
    }

And that is the end of this tutorial. If you have any questions or your Tumblr theme is much different to the one I am using in this example drop me a comment below. I will me more than glad to help. Make sure you let me know the address of your Tumblr and the Theme you are using so I can reply to your comment with a useful answer.

How to be more productive combining GTD and your calendar

July 23rd, 2009  |  Published in Productivity

In the three years that I have been part of the web studio Arte y Logica, I have periodically changed my work habits to be a more productive person. I think though, that I finally found a method that I am happy with and will be loyal to.

Why this method works for me:

  1. You don’t have to think about what your next action will be, alleviating your sense of overwhelm
  2. It is a great way to muti-task your week, as you dedicate time to all your clients and projects. You will make progress with all of them
  3. It gives you peace of mind when you go to bed as you will not go to sleep thinking of all the things you have to do next morning. They are all written down somewhere safe
  4. It instills confidence, and releases a flood of creative energy
  5. It provides structure without constraint, managing details with maximum flexibility

Before I go into the meat of the matter, I must recommend a book called “Getting Things Done” by David Allan. If you have not read it, I strongly suggest you read it. This book will not magically give you the will not magically give you the will power to be more productive and fight procrastination, but it will teach you ways that make it easier to do so.

Getting Things Done
David Allan’s secret consists of removing every “To Do” you have in your head and putting it in writing somewhere. His theory, one that I agree with, is that every man can only possibly hold 8 “To Do’s” in memory at a time. If you don’t write these down, you will spend most of your productive work time trying to think what you will have to do next instead of doing your “To Do’s”. By clearing your head from your responsibilities list, you are letting yourself focus all your brain power to the important task at hand. This is just a brief summary of his theory. Read his book, he will teach you how to apply this theory to every aspect of your life. He will also give you hacks for how to manage your “To Do’s” whether it is using your computer, a notebook, a sheet of paper or what ever it is that you feel more useful in your daily life.

OK, with that very important note out of the way, we can talk my way of applying David’s way with a little Dan’s way. I use to extremely powerful tools: iCal and The Hit List. iCal comes standard with my Mac and The Hit List is a application, developed by the Potion Factory, that you can get for $49.95 in Beat (when 1.0 is released you will have to pay $69.95).

The Hit List and iCal

Using The Hit List’s own marketing pitch to describe what they do: “The Hit List is a simple, yet sophisticated application to manage the daily chaos of your modern life. Based on the simple concept of making lists, The Hit List lets you plan, forget, then act when the time is right.” All this based on David Allan’s “Getting Things Done”.

Now let me tell you how I put the two together. Once a week, usually Friday night, I sit down for about an hour to do my weekly schedule. During this time I will review my groups of lists in The Hit List, each group has a Client’s to do list, or my Blog’s to do list, or my grocery shopping to do, or my future projects to do lists, or well, you get the point. The review consists on making sure I list all possible tasks I have for each specific group. I define a task or a ‘to do’ as work that takes less than half an hour.

After I am done with my Hit List review I will open my iCal. I know my work day has 8 productive hours. One week has 5 days. This means I have 40 productive hours in a week and 40 hours I have to spread among each of my Hit List groups of lists. So I might end up dedication to Client A 10 hours, Client B 20 hours, Client C 6 hours, Grocery Shopping 1 hour and My Blog 3 hours. In my iCal I make my 8 hour daily schedules and make blocks every day for each client as illustrated here:

iCal

A piece of advice: Give yourself breaks between blocks! It is very healthy, and you will be more productive.

Once I have my list and my iCal ready, when Monday comes I am ready to be a productive human. I know that from 9am to 12:00pm I will work on Client A. I don’t have to think were to start with Client A’s project because I did the thinking on Friday. All I have to do then is pull out my Hit List and start with the first item in the list. When 12:00pm I will stop at what ever item I am, knowing I will continue with Client A when ever iCal tells me to do so (in this case Tuesday from 4:00pm to 6:00pm). After lunch I will continue with the next client on my iCal’s list and so on for the rest of the week.

As you can see the effectiveness of my method lies in your ability to create your inventory of all your tasks, organized and reviewed in a systematic way, so you can focus clearly, view your world from optimal angles and make trusted choices about what to do on a daily basis every day of your work week.

Should I upgrade to Snow Leopard?

July 14th, 2009  |  Published in Applications

In September I will be facing the question most Mac users will ask themselves. Should I upgrade from Leopard to Snow Leopard?

I will not go through the overview of the new features of Leopard because I think Apple did a great job in the product page of doing just that. You can read about the Snow Leopard short and sweet summary or you can click on the various “read more” links and learn in detail about each new feature.

MacOSX Snow Leopard

Instead let me give you my top 5 Reasons to Upgrade from Leopard to Snow Leopard:

  1. The price of $29 is just too cheap not to buy it. Most of the software I am use to buying for my Mac is about the same price or more expensive.
  2. The speed promised is expected to be noticeable, specially for those using MacBook Pro’s with Intel chips.
  3. It alleviates (though slightly) on of my biggest headaches by simply freeing 6GB of space just by installing Snow Leopard.
  4. We will enjoy 50% faster Time Machine backups. They waiting is cut in half and time is money.
  5. One of my favorite features and the one that has me more exited is that our Macs will be ready to face all the new technology changes underlying on third party applications. Meaning I can’t wait to see all the new crazy apps soon to be develped, and perhaps improve performance on some of them (comment intended for Adobe).

Changing the background on your Tumblr theme

July 13th, 2009  |  Published in Tumblr, Tutorial  |  110 Comments

Changing your Tumblr Theme might look more complicated that what it really is. I got a client of mine who has very little internet knowledge, to change his theme’s background image with the instructions in this article you are reading. Unfortunately it does require a little bit of coding since Tumblr does not offer a this functionality.

His Tumblr site in case you want to check it out is Music Management company Playground Entertainment Co.. My client is an extravagant Marketeer and is never satisfied with owning anything that stands a chance of there being two of the same. So he calls our me and asks if I can help him make his theme more his own.

He wants to change the background of his theme. Not a bad idea, backgrounds are a fast easy way to make a site more yours. If you think about it most social network sites such as Twitter and MySpace allow you and encourage you to change the background of your page. Anyway after this long introduction here is the way to do it.

8 easy steps to changing your Tumblr background image:

  1. When you log into your Tumblr account, there is a link on the top right corner that reads “Customize”.
    Tumblr Customize Button
  2. Click on it and it will take you to a page with these options:
    Tumblr Edit Options
  3. Chose the “Theme” option and enable “Custom HTML”. This will open a window with your Themes HTML Code. You have to know that Tumblr Themes use some inline CSS. Usually they will declare a background color or image in the actual CSS file. The cool thing is inline CSS (there is nothing cool about inline CSS, it is depreciated today) is that what ever we declare here will override what ever is declared on the CSS file.
  4. Select all the HTML code that shows here, copy it, and paste it in your favorite word editor (notepad for Windows or text edit for Mac users). If anything goes wrong you will need this code to restore your Theme. This step will give you peace of mind and the freedom to mess things up without freaking out.
  5. Before we go on, find yourself a free image hosting (or click on the link for my suggestion) service. Upload the image you want to use as your background and make sure you copy the URL to that image somewhere. We will use it in the next step.
  6. Find this line in the Tumblr Theme HTML found in between the <head> tags.
    1
    <style type="text/css">;

    Right after that line copy paste the following code:

    1
    html{ background:url('http://IMAGEURL'); }
  7. Replace the text IMAGEURL from the code above with the URL address of where your image is hosted, for example:
    1
    html{ background:url('http://img217.imageshack.us/img217/6029/18561222.gif'); }
  8. Hit the “Update Preview” button. If your background shows then hit the green “Save Changes”button on top right corner of your screen and you should be done.

If you get stuck anywhere or want more tips on changing anything else in your Tumblr Theme give me a holler, I will be more than glad to help – I love pro bono. You can also visit the Tumblr’s page for creating a custom HTML theme for more information.

Choosing the right browser for the job

July 7th, 2009  |  Published in Browsers  |  1 Comment

I have been a mac user for 3 years now and used to flip between Safari and Firefox every time either one of them released a new version. Until I realized that it was painful to be modifying my browsers add-ons, favorites and other cool new features, every time a new release happened. Now that FireFox 3.5 was released I decided to stop and think about this for a second. I thought I needed to know which browser was the best. You will find my conclusion to be just a bit more complex and useful than that. I hope this helps some one out there also as much as it helped me.

As a Mac user I have access to Safari, FireFox, Opera and since I have to test every website I develop, I some times will have to use Windows where I have Explorer and Google Chrome. Needless to say FireFox, Safari and Opera exist in both platforms and there is very little difference between the different platform versions so I won’t go into that.

safariSafari Browser

The Pros:

  • Without a doubt the best feature is that Safari is the fastest browser for Mac and it battles for speed with Google Chrome in Windows
  • It runs javascript 4.2 times faster than before
  • It let’s you save Web Applications
  • Uses Webkit
  • It allows more plugs now check out PimpMySafari.com
  • Visual “wall” of our most frequently visited Web sites
  • It has a cover flow History format
  • It supports XHtml5 and CSS3
  • Smart address field
  • Smart search field
  • The new developer feature ROCKS!
  • private browsing
  • Feel free to go on reading about it’s Safari features.

The Cons:

  • In windows it defaults to the Microsoft’s font rendering (you can change this under preferences)
  • The biggest con was the Tabs used in Beta, but with the release of the official version of 4.0 this was fixed. If you are using the Beta version UPGRADE.
  • Close button is on the opposite side to all the rest of the browsers
  • Can’t customize as I would like

firefoxFireFox

The Pros:

  • The strongest pro in my opinion for this browser is its community
  • The second pro that in some point is there thanks to its community is the plugin and add-on directory
  • Awesome web developer tools (add-ons)
  • Private browsing
  • Support for XHtml5 and CSS3
  • open audio and video formats

The Cons:

  • If you overload your FireFox with too many add-ons it will start running slow (big disappointment)
  • It’s taking too long for some add-ons to release their update to the new FireFox 3.5

explorerInternet Explorer

The Pros:

  • Unfortunately the majority of the world’s populations still uses this browser

The Cons:

  • Every other browser is superior to it in every way
  • Slow in every way
  • Takes too much of your CPU memory

operaOpera

The Pros:

  • Excellent compliance with web standards
  • Very light, which makes it a good browser for use with old computers
  • It runs on more operating systems than the rest of the browsers
  • Has interactive voice commands
  • Very cool new feature Opera Unite. It allows your computer to become a server, making media sharing much easier and efficient.

The Cons:

  • I’ve never used it
  • Slower than all big browsers
  • Not very popular, the percentage of Opera users is not big enough to even consider when developing

chromeGoogle Chrome

The Pros:

  • The fastest browser on the net
  • It uses Webkit
  • There are big money and research resources behind this browser (GOOGLE!)
  • Supports XHtml5 and CSS3
  • Very stable
  • Private browsing
  • Customizable (there are add-ons out there)
  • Enables offline use of internet apps
  • Very simple to use

The Cons:

  • It is only available for Windows
  • Not very popular yet
  • No add blocking
  • Bookmarking not so great
  • Not very light on your PC

After so many years of using all of these browsers (except Opera I must say), I concluded that there is no way I can just say I will ditch all of them for one favorite. Instead I have to say that depending on the job I am undertaking, the browser I will chose to use.

Safari or Google Chrome (if using PC): I will use Safari for browsing and procrastination. It is the speed I need when I am wasting time or reading online. Safari’s best features, speed and XHtml5 and CSS4 support, will do the trick.

Firefox: I will use FireFox when I am working and developing sites. I need all the cool development add-ons FireFox offers like Firebug, and the developer toolbar.

Internet Explorer: Strictly for testing that websites render correctly. I will never use this browser for anything else.

Opera: I guess I will learn to use Opera Unite and use it for this feature only.

Previously


Jul 23, 2009
How to be more productive combining GTD and your calendar

by Dan | Read | No Comments

In the three years that I have been part of the web studio Arte y Logica, I have periodically changed my work habits to be a more productive person. I think though, that I finally found a method that I am happy with and will be loyal to. Why this method works for me: You [...]


Jul 14, 2009
Should I upgrade to Snow Leopard?

by Dan | Read | No Comments

In September I will be facing the question most Mac users will ask themselves. Should I upgrade from Leopard to Snow Leopard? I will not go through the overview of the new features of Leopard because I think Apple did a great job in the product page of doing just that. You can read about [...]


Jul 13, 2009
Changing the background on your Tumblr theme

by Dan | Read | 110 Comments

Changing your Tumblr Theme might look more complicated that what it really is. I got a client of mine who has very little internet knowledge, to change his theme’s background image with the instructions in this article you are reading. Unfortunately it does require a little bit of coding since Tumblr does not offer a [...]


Jul 7, 2009
Choosing the right browser for the job

by Dan | Read | 1 Comment

I have been a mac user for 3 years now and used to flip between Safari and Firefox every time either one of them released a new version. Until I realized that it was painful to be modifying my browsers add-ons, favorites and other cool new features, every time a new release happened. Now that [...]

About Social Networks Guy

I'm a co-founder and Marketing Director in the digital agency ArteyLogica.com located in Costa Rica. I'm also an amateur disc golf player, NFL fan and enjoy fine dining and cooking.

Advertizing

Article Categories

  • Applications (1)
  • Browsers (1)
  • Productivity (1)
  • Tumblr (2)
  • Tutorial (2)

RSS You should subscribe to my RSS feed

  • How to replace your Tumblr title with an image
  • How to be more productive combining GTD and your calendar
  • Should I upgrade to Snow Leopard?

Tags

Applications Browsers explorer firefox google chrome GTD mac osx opera Productivity safari snow leopard Tumblr

Twitter @danielgavilan

  • Word of the week Ombudsman http://t.co/fXZzFBn3 01:26:45 AM April 25, 2012 from HootSuite
  • La diferencia entre UX y UI for dummies http://t.co/J3beEeHs 11:57:49 PM April 24, 2012 from HootSuite
  • Just reported a jam on Avenida 14, San José, Hospital, Ángeles, http://t.co/V1jwvcoU using @waze - Social GPS. 01:10:04 AM April 19, 2012 from Waze

Recent Comments

  • Alexander WinifredNo Gravatar on Changing the background on your Tumblr theme
  • Alexander WInifredNo Gravatar on Changing the background on your Tumblr theme
  • DanNo Gravatar on How to replace your Tumblr title with an image
  • DanNo Gravatar on Changing the background on your Tumblr theme
  • Alexander WinifredNo Gravatar on Changing the background on your Tumblr theme

My Most Popular Articles

  • Changing the background on your Tumblr theme
  • How to replace your Tumblr title with an image
  • Choosing the right browser for the job

Categories

  • Applications (1)
  • Browsers (1)
  • Productivity (1)
  • Tumblr (2)
  • Tutorial (2)

Art

  • Antoxic An internet art collector’s website. Inspiring.

Web Developing

  • Gaston Garcia A web developer’s blog. Useful.

Work

  • 499 websites A subsidiary of Arte y Logica. A company that builds economic websites for small businesses.
  • Arte y Logica My independent digital agency. You should visit and see what I do for a living.

RSS You should subscribe to my RSS feed

  • How to replace your Tumblr title with an image
  • How to be more productive combining GTD and your calendar
  • Should I upgrade to Snow Leopard?
  • Changing the background on your Tumblr theme
  • Choosing the right browser for the job

©2012 Social Networks Guy
Powered by WordPress.