Oresama Blog layout for Tumblr

[polarn.livejournal.com]

http://oresamabloglayout.tumblr.com/

I've converted the layout of Prussia's blog (from 2009 April Fool's) into a Tumblr layout, that I hope is easy enough to install that anyone who wants it can use it!
The main point of this is so that, if anyone wants to run a nation's blog with the same layout structure, you can just use this but change the images and colours to your liking. (Of course, you could just use it for your personal blog too but...)



If you're planning on using it, please read the stuff below!!

GENERAL:
I've tried to make it work well with Tumblr without losing the original style. The profile picture to the side will load the normal Tumblr profile image, and the "this blog's readers" loads the people you're following (on the layout example Tumblr I linked, my Tumblr is shown as an example). The profile information is your blog "description", so it's very easy to change. Notes will be shown instead of comments (you could try to make Disqus comments work with it too though).

IMPORTANT NOTES:
I would have wanted to change the fake search box and the little icon on the top left, but I don't really have the opportunity right now, I recommend you change it if you're planning to have anyone else's blog than Prussia's. (Just change them to "BLOG" and "Search" or delete them or something - the japanese won't make sense for your blog.)
The "mail me" button (under "Become friends") should also be changed, just make a new one in the same size. If you want it to actually work, you can use the Emailmeform.com and a custom page ("Pages") in your blog. However, if you just enable "allow people to ask me questions" in your blog settings (I think it's from the dashboard for your blog), the "ask me anything" will appear in your profile and people can use that instead! (You could also just make the mail-button link to your "ask me" page after you activate it...)
Also remember to change your follower settings, so that people can leave you notes, if you want that. It's somewhere in the settings (not on the customize page).

IMPORTANT ABOUT IMAGES:
You will have to upload all the layout images to your own hosting (such as your own Photobucket album).

ZIP WITH ALL YOU NEED:

http://www.mediafire.com/?ucw4gaoex8c4817

& INSTALLATION GUIDE:

※ Step one is changing images if you need to
- I don't need to explain that, I think. "Bg04a" to "d" are the rounded white edges of the posts and probably don't need to be changed, "1pxfill" and "header03" are blank filler images so the same goes for them. All the other ones you may be interested in editing. (But keep the width and height the same!)

※ Step two is uploading the images, and then changing the image links in the code
- which is really important if you want your layout to work!
All the image files in the zip that have "layout_" in the beginning of their name, are the ones you need to upload. The recommended way to change the links in the code is the "replace" function in your text editor.
Upload all your images to somewhere, then get the code. This is f.ex. "http://123.photobucket.com/123/abc/layout_something.gif". Grab the part of the code that's common for all the files: that means everything to "layout_", so your copied link should be like "http://123.photobucket.com/123/abc/layout_". Open the "theme_customhtml.txt" in a text editor (Notepad or TextEdit or similar!! Not sure what stuff like Word would do!), and go to the "replace" function - in TextEdit this is included in the "Find..." option, in Notepad I think it's "Find and replace".
In the "find" field goes: layout_
In the "replace with" field goes: (your common address, such as http://123.photobucket.com/123/abc/layout_ )
Click the button to make the replacement for all finds, and ALL image links should have been replaced this way.
After that, the code is finished if you don't want to customize it.
If you've changed the background image in colour, you need to change the background colour in the code to match it. That's the "background: #dcf600 url('layout_background01.gif') no-repeat fixed bottom right;" part, just change the "#dcf600" into a more fitting colour and you're done.

※ Step three is installing the code
- Select all and copy the whole code from that text file. Login to the Tumblr blog that you want to change, and go to "Customize Appearance" on that blog's dashboard page. Under the "Theme" button, click "Custom HTML". Remove all the code from that box and paste the code from your text file. Update preview and save!

※ Profile information
- In the Tumblr customization page, click the "Info" button. Fill in whatever title you want (such as "Oresama Blog"). From the zip file, open the "info_description.txt" file. Copy and edit those contents and paste it in the "description" on Tumblr, if you wish to have the same sort of info as Prussia's blog.

※ The "I love Friedrich der Grosse" banner on the side
- You can remove this banner or add more banners like it, if you go and edit the code yourself (obviously this is really easy if you know HTML, but everyone doesn't). I marked the spot where it is, so try to search the code for "fritz".

※ examplephoto.jpg & exampleprofile.gif
- Not used in layout, just for you to remember the standard size. Photos and profile images will both be resized when shown in your blog. You upload your profile image in the Tumblr settings somewhere.

※ Note for the savvy
- I'm sorry, I used nested tables. (It might be easier to edit for the less savvy, though.) If you have any improvements, feel free to edit the code all you want and post however you want, it's not my design in the first place. Stuff that could be done (that I didn't do because I'm busy/lazy) for example is Disqus support, automatically connecting the mail-button to the "ask me" thing (but then the button wouldn't show up at all if it's inactivated - maybe someone wants it if they want to use an e-mail form instead), making some stuff look better in general, making the code easier to edit, make the quote posts more like how Himaruya answers questions in his blog, etc etc.


Hope you enjoy, and just ask me if there's a problem or you need some help (but try to figure it out first)...! Sorry if I forgot about anything!!
Never credit me, this belongs to Himaruya Prussia.
Oh yeah, and if you install it, feel free to link to your blog in the comments, it would be nice to see it in action!

Comments

[taleness.livejournal.com]

This is brilliant! It seems as if a lot of effort was put into this... Great job!

[hierarchy.livejournal.com]

this is really cool :D

[emsiecat.livejournal.com]

This is... for lack of a better word, awesome! I might just use this one 8D

[polarn.livejournal.com]

Thank you, it could still be made a lot better though!

[polarn.livejournal.com]

Glad you like :-D

[polarn.livejournal.com]

Glad you like it, have fun! :-P

[bosscookie.livejournal.com]

Wooooah this is amazing.

[madnesshp.livejournal.com]

Awesome job! :DD

[nameru-ja-nai.livejournal.com]

Eeee~ Thank you thank you thank you for making this ^.^!!

[sakurita.livejournal.com]

That looks great! :D

Thank you for your hard work! ♥

[couryielle.livejournal.com]

Implementing it right now. Thank you so much!

wow!!!

[sandie04.livejournal.com]

aaaaaahh!!!! i can't tell you enough how awesome you are!! you ROCK!!!!!!!! thanks so much!!!!! this is awesome!! EEEEEEEE

[wyvern-ventrue.livejournal.com]

WOW!! Looks amazing! Thank you! :D

[leekhim.livejournal.com]

Thanks a lot! I've tried it here (http://helizabeta.tumblr.com/) but the middle portion seems to be quite small. How do I edit that part?

[polarn.livejournal.com]

hi, i don't really know how that happened? did you edit something or have some custom css? ´w`;;

[polarn.livejournal.com]

oh, wait, now i get it. it's because of the width of the content you've posted/reblogged, that are larger than the layout allows. sorry, at this moment i can't help, but i'll try to figure something out to fix this (i wasn't really expecting/thinking of that it would become used like that hahah)... sorry.

[leekhim.livejournal.com]

Ah, ok. I've new to tumblr anyway.
(Take your time~ I don't think others will come look at mine anyway.. [Apart from 3 posts] All of them are reposts from others.)