Freckles in April: DIY Blog Design Part 11: Installation

Friday, June 29, 2012

DIY Blog Design Part 11: Installation

If you're starting a new blog from scratch and built your template on your real blog then congratulations! You get to skip this part. For everyone else, read on.

Installation is, sadly, NOT an easy, quick or clean process. I suggest you do it at night when there are a minimal number of eyeballs on your blog to see it royally freak out.

This one turned out hairier than most because of that weird issue I keep running into with the padding. I know where the issue is but I can't fix it without breaking something else so I had to manually adjust every widget in the left column. Really fun! I have asked a couple smart people about it so if I get a good answer for how to avoid this issue (aside from just not having a 3 column design and using my favorite header technique in the same blog), I'll share it.

First, go to your test blog and save your template.

When you see the pop-up window click "Download full template."

Do the same thing to your current template (if you have one). Just in case. It's your insurance if something goes horribly wrong (which has never happened to me but you never know). Just set that file aside somewhere safe. You probably won't need it ever again.

Then go to your real blog and click Backup / Restore again. This time, click "Upload a template from a file on your hard drive." Browse to your new template. Take a deep breath and then upload that sucker.

It's going to look ugly. Really ugly.

I stopped taking screen shots at this point and went fast and furious trying to get her blog looking decent again.

Uploading a new template makes your sidebars go crazy. You can see above how the new template drew one of her sidebar grab buttons up above the nav bar. A bunch of her other stuff got rearranged.

To get it looking normal again- 

1. Manually upload your header in the Layout section.

2. You may also have to copy and paste your CSS from your test blog template designer into your real blog template designer. I suggest you do.

3. Manually add the HTML widget with the nav bar code in the Layout section (just like we did here).

4. Rearranged your freaked out sidebar(s).

5. Optional: If you're experiencing the same padding issue that I have been through this whole design, you have to go through and add CSS for each widget in the left sidebar in order to get it to sit where it should. I explained how to do that here. Just mess with the numbers until it looks right. I took this little snippet from Summer's CSS to show you what it will probably look like-

#HTML7 {
   margin-left: -70px;

#HTML1 {
   margin-left: -30px;

#HTML13 {
   margin-left: -30px;

#Label1 {
   margin-left: -30px;

#HTML3 {
   margin-left: -30px;

#PopularPosts1 {
   margin-left: -30px;

etc. and so on for each of her widgets in the left sidebar.

Check how your blog looks in multiple browsers. I actually should have done this before I installed know. My design looks great in Firefox-

But Internet Explorer looks a little difference-

That's a rather ugly blue box around Summer's "About" blurb. I googled "HTML remove image border" and discovered I only needed to paste BORDER=0 into the HTML image code. So now the very first part of that code looks like this-

<img src="" border=0 alt="About Me" usemap="#AboutSumo" />

(see the whole post about creating that blurb here)

And I'm done! Well, in theory. There usually ends up being one or two little bugs that pop up that I have to fix but nothing too awful.

Stay tuned for a couple other little tidbits you may find useful!

No comments:

Post a Comment

Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...