Shoutmeloud Thesis Theme Customization - Part 4

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 11 Comments

It's been quite some time we posted about the customizations on Shoutmeloud thesis theme. So, we thought to provide one now. If you had missed the earlier series, then I recommend you to check out the various parts here - Part 1, Part 2 and Part 3. Well, this post deals with the issues related to block quotes and the text background color on hover in the post area.

Still confused about the changes which I highlighted earlier in this post? Just take a look at the following pictures to understand what changes have me made to the template and what will you achieve by following the tutorial in this post.

INITIAL BLOCK QUOTES ON THESIS

THE NEW LOOK FOR BLOCK QUOTES

INITIAL HOVER EFFECT ON LINKS

THE NEW LOOK FOR HOVER EFFECT ON LINKS

I think you now have an idea about the modifications we made on the template. You may check out the live demo about this hack on this article here - LIVE DEMO. So, let's get started with the tutorial on installing these effects on your blog. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page.

BLOCK QUOTE INSTALLATION

1. Once the back up is over, search for the following piece of code.

.post blockquote{
background:#007EC4;
margin:0 25px 15px;
padding:10px 20px 0 15px;
border-top:1px solid #DDD;
border-right:1px solid #666;
border-left:1px solid #DDD;
border-bottom:1px solid #666
}

2. Replace the above block of code with the following piece of code.

.post blockquote{
background: url("https://lh5.googleusercontent.com/-jSdcOvnlXUM/TfIHdrUoW5I/AAAAAAAABDw/Gv9rx8-QGuE/s800/blockquote.png") no-repeat scroll 5px 0 transparent;
font-size: 14px !important;
padding: 0 30px;
border-left: 0 none;
color: #9E9E9E;
font-style: italic;
margin: 2px 0 13px;
}

3. Save your template. That's it! Pretty simple, isn't it?

To make the block quotes actually work on your template, you need to use them in your posts. To do so, just mark the text which you want to appear as quotes and press the "Quote" icon --on the blogger post editor. That's it.

LINK HOVER EFFECT INSTALLATION

1. Search for the following piece of code.

]]></b:skin>

2. Place the following piece of code just above the line mentioned in step 1.

.pos-links a {
text-decoration: underline;
}
.pos-links a:hover {
text-decoration: none;
background-color: #0F4F7E;
color: #FFF;
}
.pos-links img{
text-decoration: none;
background-color: #FFF;}
.pos-links img:hover{
text-decoration: none;
background-color: #FFF;}

3. Save your template.

4. Navigate to your "Settings>>Formatting" page. Scroll down to the end of that page. In the field which says "Post Template", you will find an empty box next to it. Just paste the following code in that empty space.

<div class="pos-links">
</div>

5. Save your settings by hitting the "Save Settings" tab at the end.

By default, the upcoming articles on your blog will have the link hover effect. If you wish to have the same for your previous articles as well, then you need to edit your posts... However, you just need to add only only one tag at the start and end it at the last. So, it shouldn't be a tedious job provided you have lesser number of posts on your blog.

To edit your posts and have the link hover effect on your previous entries, navigate to "Posting>>Edit Posts" page and select the article which you want to edit. Just simply add the following tag at the start of the article.

<div class="pos-links">

Scroll to the end of your article. Close the div tag by adding the following tag at the end of your article.

</div>

That's it!! Nothing else!!!

If you wonder why I did not change the CSS for the post section and I went on with the alternate method to add individual div tags on each article, well the answer is simple. If I add these hover effects to the post section, then the images, social bookmarking icons above the posts, about the author widget and everything that comes under the post section will get affected. So, the only solution was to add the tags individually to the post.

I hope you understood the reason behind adding individual tags to each post. If you have any other alternative method, then let me know and we can discuss about that. Your opinions are always welcome - share it via comments. See you soon with another interesting customization!

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Thesis, Thesis Theme Customization