-
How to Change the Initial Following Display
Initially, this theme hides all of the tumblogs you follow except for the most recent 17 (I use that number because that’s how many fit into one row). However, once you hover over the section displaying your followers, the rest are displayed.
If you would like to change the initial amount displayed, and it’s easy to do, than here is what you do.
Open up the Theme tab in the customization panel and find this block of code near the top of the HTML (full size here):
Just like the picture says, all you have to do is change the value of the
xvariable. To keep them displayed nicely in full rows, make sure thatxis set to a multiple of 17. Examples:- For 1 row change the number to 17.
- For 2 rows change the number to 34.
- For 3 rows change the number to 51.
- etc.
I know. It’s just basic math, but that’s all there is to it.
This should be all the information you need on editing your following display. If you have any questions, or this does not seem to be working for you, please feel free to contact me. You can find a link to my email on this page.
-
Customizing the Field Notes Theme
I didn’t just want to put a theme out there and expect that everyone was going to be able to customize it just how they wanted to. I also didn’t want to assume that most people just go right into adding widgets and links and don’t care how they end up looking on the site.
For these reasons, I have created a couple of “How To’s” to help anybody who wants to add some extras to the theme. The reason I did this is because I set up the theme with the idea that, in the future, some people would want to do just that and these guides will walk you through a process that allows you to embed your Twitter updates and Flickr photo stream, as well as add any extra links you might want to include, all while letting you keep the theme style and layout from going haywire and getting out of hand (aesthetically). Here are the links to the different articles:
- How to Change the Initial Following Display
- How to Change your Title’s Font-Size
- How to Embed your Flickr Photo Stream
- How to Add Custom Links
Hopefully these guides are pretty helpful, but if you have any questions, or any problems come up when you’re trying to customize your theme, please feel free to contact me. You can find a link to my email on this page.
-
How to Add Custom Links
Update: It’s now much easier than this to add custom links to your theme. Just go to the appearance tab and add the link title and url to the text boxes. They’ll pop up automatically.
This is probably the easiest thing you can do to add your own customization to this theme. All you need to do is follow the formula I’m going to give and you won’t have any problems adding extra links to your site that completely match the style of the theme.
First, I’m going to go ahead and post the entire forumla and tell you where to paste it into your theme. If you feel like you can go on from there, than you won’t need to read on. The rest of the post is going to be going over the reasons I have it set up this way and why some things in the formula that don’t look important are, in fact, important. Anyway, here it is:
<div class="links"> <ol>
<li><a href="http://somewebsite.com/">Your Link Title</a></li> <li><a href="http://somewebsite.com/">Your Link Title</a></li> <li><a href="http://somewebsite.com/">Your Link Title</a></li> </ol> <div id="clearfix"></div> </div>Note: You can use either ordered
<ol>or unordered<ul>lists. It just depends on whether you want the numbers or little empty circles.After you’ve copied that, you’re going to want to paste the code in the header or footer of your Custom HTML by using the customize link on your Tumblr dashboard. If placed markers in the HTML to show you where, but you can also see what it looks like in this picture (full size here):
Of course you’re going to want to add your own links, but I strongly recommend adding sets of links this way. It’s the only way I could find to make it as easy as possible to add your own custom links and keep the style of theme.
Now, some of this may look unnecessary (i.e. putting lists inside the
<div class="links"></div>wrapper or the<div id="clearfix"></div>element), but I’ll explain the reasoning behind this below.- First, as mentioned above, the reason I placed the list inside a
<div>is because I have the theme setup to add a dashed border for every<div>inside of the header and the footer. To get even more technical, I also couldn’t figure out how fix the float problem when the lists were placed inside the header but did not contain a<div>wrapper. I’m sure there is a way to do this, but I just couldn’t figure it out. Which leads us to the next element. - For the layout to work as smooth as possible, the
<div id="clearfix"></div>element needs to be placed as shown above. Again, in technical terms, I just can’t figure out how to clear each element and keep the layout looking smooth without doing it this way.
This really is easy if you follow the formula, but I do want to apologize because doing it this is probably not very intuitive. Again, like I say in most of these How To’s, it’s the only way I could think of that would let you both customize the theme and keep the layout and style from getting out of hand.
If you have any questions at all, or this does not seem to be working for you, please feel free to contact me. You can find a link to my email on this page.
- First, as mentioned above, the reason I placed the list inside a
-
How to Embed your Flickr Photo Stream
For people who aren’t used to working with HTML or customizing their Tumblr themes, don’t worry, I have tried to make embedding your Flickr photo stream into this theme as easy as possible.
There are two ways of doing this. You’re going to need your Flickr ID for both of them, so let’s get that first. This is east to get a hold of, just go to idgetter and follow the one instruction there is.
For example, my Flickr username is bschaeffer, so correctly getting my Flickr ID will look like this on the idgetter page:

Copy your
id.New Way (Version 3 or later)
With your
idcopied, go to your Customize screen from your dashboard and click Apperance. Find the input that says Flickr ID and paste youridinto it. Click Save and your Flickr photos will show up in your header.Old Way (Version 2 or earlier)
With your
idcopied, the next step is to insert this little line of javascript into your theme:flickr('your_id');Of course, you’re going to want to replace
your_idwith theidyou got from idgetter, leaving the single quotes there. You want to place that somewhere under thehideFollows(x);code. You can find it near the top of theme file.The last step to is insert the Flickr
<div>element. Here’s the code for that:<div id="flickr"> <noscript>Your message for people w/o javascript enabled goes here.</noscript> <div id="clearfix"></div> </div>You can place that code inside the header or the footer. Look for these markers inside the HTML and they will tell you where you should place the code. Here’s what it looks like (full size here):
Again, there is a spot in both the header and the footer that have these comments.
And with that you can save the changes. The end result, if you’ve done it the way I described, should look exactly like this:

Again, I did it this way to try make it as easy as possible to add your Flickr stream to your site. I have already set up the styles so that it will fit the look of theme, so it really is as easy as copying and pasting.
If you have any questions at all, or this does not seem to be working for you, please feel free to contact me. You can find a link to my email on this page.
-
How to Edit Your Blog Title’s Font Size
This is one of the easiest things you can do.
Look for a line of code near the top of the theme file on your Customize page that looks like this:
<!-- Custom Styles --> <style type="text/css"> /* Blog Title Font Size */ #header h1 { font-size: 3em; }To change the size of your title’s text, just adjust the number for the
font-sizestyle. You can any size indicator you want (em, px, %) to customize the size.If you have any questions, you can find a link to my email on this page.


