Problem Solving

I spent the better part of yesterday redesigning Stimulated Outlet Book Reviews to make it seem less visually busy. After scouring the internet for templates, I soon discovered that there was no perfect fit. Either there were not enough tabs in the navigation area for the number of pages I require (five), or the column spacing distorted my entries, my widgets, or both. So what's a girl to do? Code.

Let's address issues one at a time. The first: navigation. Some of the templates out there will list your pages vertically when what you really need is a horizontal menu. After messing about with the Join Coffee template for a while, I gave it up as a lost cause and replaced the whole widget with one of Blogger's link lists, which worked out quite nicely. Unfortunately, the truncated posts still looked too spaced out for my tastes, so I scrapped that for the Grunge template, which resulted in an entirely new navigation problem. As frustrating as it may be to work with widgets, it's worse when there are no widgets involved, only straight HTML. Into the code I went!

Now, if you haven't discovered the awesomeness that is Ctrl + F, you are wasting a lot of unnecessary time. The first thing I did was search for "RSS Feed," as it was one of the built-in menu items. That led me to a section of <li class="x"><a href="http://feedproxy.google.com/~r/alice-..." title="PageTitle">Page Title</a></li>. That's right — these menus are usually lists. Hallelujah, something easy! All I had to do then was replace the text in red with my contact page, my giveaways page, et cetera, using one list item for each option. Of course, they only started off with three, soI went ahead and replicated the same code to add in the links for other pages. Hurray! One problem solved.

This led to another set of issues involving mini-posts. I tend to favor them, as they give my book blog an organized look. Unfortunately, the Grunge template had its own script for automatically truncating,:

<script type='text/javascript'>createSummaryAndThumb
('summary<data:post.id/>';);</script>

Oh, goodie. Not only did it mess up the cut-off points I had already made, but it turned bulleted lists into regular text! Well that just wouldn't do...After discovering the reason for this  irritation, I went in and took the whole thing out. Ta-da! Good as new.

Well, almost. Blogger automatically generates a "Read more" link, which would be fine except a) it didn't look right with the template, and b) the template already had its own "Continue" button. Thankfully, the solution for this is actually incredibly simple! Using Ctrl + F again, I went into the Main portion of the code, where classes are defined, and added in .jump-link {display:none}. Theoretically, that code should work no matter where it's placed; I chose the main section for organizational purposes. See? Simple.

Now for one last finishing touch: getting the "Continue" button to go away when it isn't needed. Not knowing the code myself, I did a search for "jump-link" as that's what Blogger normally uses. Its appearance may be suppressed, but its code is still in there somewhere. You'll have to expand widgets in your template to find it! You end up with a section that looks like this:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 
      </div>
    </b:if>

Lovely. In layman's terms, that first line says that if there is a jump-link (i.e. the entry is truncated), then — and only then — does the rest of the code kick in. Sweet! Now what you'll discover is that the sections in text are the portions that you won't need. It may be easier just to copy the whole thing and delete it later, though. Anyway, I ran a quick search for the "continue" code in the template and started mixing my own code in right below <data:post.body/>.

<b:if cond='data:post.hasJumpLink'>
<span class='readmore'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img src='url'/></a></span></b:if>

Note that the instead of keeping <div class='jump-link'>, I chose to use the <span class='readmore'> that the template was already using. Why? For appearances sake. I want this button to look like Grunge but function like basic Blogger. The same goes for using the button image instead of <data:post.jumpText/>.

Something unique about the Grunge template is that instead of letting you replace the title text with your blog's name, it has the word "Grunge" at the top with no way of adjusting it. Sort of. You can't fix it through Page Elements, but you can change it through HTML. I tried to search for "Grunge," but nothing came up, suggesting that this was actually an image and not text. I right-clicked on the page, and sure enough, it was a gif, so all I had to do was copy the image address, then search for it in the HTML. After that, it was pretty straightforward: I deleted the imaging code for the logo and replaced it with my own text, sized and colored to my liking. A few minor tweaks were done for the width of that container versus the width of the top navigation menu, but overall, it was a relatively easy fix.

There was the usual rearrangement and renaming of widgets in the Page Elements section of the Design tab, which is not really worth explaining as it's more or less clicking and dragging.

So what are the lessons to be learned from this? Number one: you can't find a solution to a problem via Google if nobody has posted a fix. Number two: A template probably won't be perfect as-is, but you can tweak it to make it work for you. Number three: You don't a background in web design (or  even a functional understanding of javascript) to change things around in your blog's source code.

Speaking of coding, I removed the random script that was slowing down this blog. From what I can tell, it served no actual purpose, so hopefully it wasn't included in the template with malicious intent. If it was, then that's one more reason to be thankful that it's gone.