Saturday, September 8, 2012

Issues with Customizing your BLOGGER TEMPLATE??

Have you noticed the new look of the blog {once again}? When Speak Out Loud jewelry shop launched last week, I wanted my blog to have to same color scheme as the shop. So I re-designed the header. After the design was finished and mapped out, I uploaded it to my template. Simple, no biggie. Did you miss the post on how to make clickable links in your banner with image mapping? Click here. But I noticed that when I tried to customize my blog colors in the Blogger Template Designer, nothing was changing. So I waited a day, thinking that there was just some temporary blogger issue. The next day, the same thing. So I waited another day...and nothing. By now I wasn't just annoyed that I couldn't get something to work, but the colors clashed so much that I was having a hard time looking at my blog! If it bothered me so much, it must be bothering you too, right?? Maybe it wasn't, but it was definitely bothering me. So I Googled it, because Google tells us everything. Doesn't it?? The only thing it told me was that some of you were having the same problem, but not why. In the moment I didn't care why really, I just wanted it to change! So instead of wasting another day to see if the blogger template would work, or looking into more Google pages until 4 am, I decided to just go strait to the source....the HTML. 

If you are having the same problem, the fix is easy. Here is what you can do. This is normally where you would start out if you want to customize your blog. Template → then advanced.


And don't be afraid....just back up your blog.

I didn't need to expand, just begin to look for the hex numbers, or color codes. It will say color: #......, and to know what you are changing look above the color, such as link; visited; hover, etc. These are the colors of the words that you link to other urls. 

Pin It!
You might find (like I did) that I couldn't tell exactly what section of the blog each area was referring to, and also that I don't have the hex values memorized. That's ok. Open up a separate page while you are working and use the advanced section of the template designer to tell you. Highlight the # in the html, go through the sections of the template designer, and paste the number in. You can match up what area had what color that way, and change the color accordingly. Which bring me to how you change the color. I use Chrome add on, color picker, to tell me what the hex number of each color is. Using color picker, I hover over the color I am wanting. Once the hex # is shown, highlight the # and copy. Then go into the html. Highlight the number you are wanting to change, and paste your new number in. You can also do this with the font and font size, if you are wanting to change those things too. 
Make sure that you before you hit save, you preview your changes to see if everything looks the way you are wanting. It's really much easier to NOT SAVE CHANGES, and start over with what was previously there, than to try to figure out what you have done wrong. 
If you have been trying to figure out what is going on with blogger, hopefully this helps you. Have a great weekend!

By the way, have you checked out my new shop?? 

Total Pageviews