Wednesday, July 27, 2011

Change the block quotes in your blogger template!

Last month I purchased a new template for My Avon Team business. I used to code the websites myself, but I found this great template from a designer in the UK and thought it might just be easier to buy it along with the matching blogger template ($50.00 extra)

So, I made my payment and waited, and waited. When I finally did get a response, she was rude and slow. Anyway, she finally emailed me the code for the website so I could upload it myself with Dreamweaver. Then, I had to wait for my blog.

Now, If you have ever seen the pre-made templates from Rainy Day Templates you'll know that this girl puts her heart and soul into creating some of the prettiest blogger templaes around. For months I had been dying to buy one from her but having purchased a specific website, I needed a specific blogger template to match so I HAD to use the girl from the UK I was telling you about before.

Anyway, I ended up waiting 2 weeks before I emailed her asking what was going on? She then emailed me back saying she had completed my new blogger template and installed it for me.

YAY!

Although when I opened my browser and typed in the address I was mortified. This was not a new blogger template at all. All she had done was change the background colour and insert the header she had previously sent me for my website.

$50.00 bucks for something I usually do myself and I could have done it in 10 seconds... Not 2 weeks. I was so angry I sent an email. Not that it was going to do anything (i was aware from the start that she wont do refunds) but I just needed her to know that anyone with even a small working knowledge of the Blogger platform would be a little peeved if that's what they received as a template.

I mean, she didn't even change the link/text colour to match what she had given me in my site. Very unprofessional I think!

So, with that in mind, I decided to start teaching myself how to manipulate the code in Blogger to make my blogger template and little more appealing (and matching, at the very least)

From the day I started this blog, I have never liked the width. The template designer in blogger is very limited and I needed more space so I set about learning how to do it.

I simply logged in to my Dashboard and did the following:

Click on Edit HTML
Hit Ctrl+F
Enter this into the search: <b:template-skin>
      <b:variable default='930px' name='content.width' type='length' value='1200px'/>
      <b:variable default='0' name='main.column.left.width' type='length'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='480px'/>

Where it says 1200px that is the new amount (it used to say 1000px) and where it says 480px I changed from 430. And you can see how wide my blog is now... Simple.

Next I wanted to change my Blockquotes.

Still in Edit HTML I did a search for 'Blockquote' but the search came up empty. Hmmm, there was no tutorial on google that prepared me for this one, so I found some code from a fellow mummy blogger and thought I'll just insert it and see how I go!

The easiest way to find it was to look for the 'Post' section and get right to the bottom (i inserted the code just above this piece of code:

/* Footer
----------------------------------------------- */

The code I inserted looked like this:

blockquote {
background:#fdf5e7;
font-size:100%;
padding:10px 15px;
border:1px solid #0f491c;
}

That above code looks like this:

This is my test blockquote code at work!
 You can go back in and change the colours and font size as you see fit...

Hopefully this little tutorial has helped you a little! Please don't forget though to download your original template before playing around with the code...

Happy coding!

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...