Tuesday, 14 April 2009

BLOGGER - LINKS COLOUR PROBLEMS?

Sometimes, no matter how careful we are when writing our posts, we do slip up technically - and then don't know how to get ourselves back out of the situation.


Copyright-free image from Tack-o-Rama

One of the major hiccups can be innocently importing previously-written pieces in Word!

My problem was this: no matter what I did (going to Layouts, changing the Fonts & Colours) all my links kept defaulting to the most appalling, strobing blue. And I couldn't figure out why.

What to do?

First off, I spent hours looking up solutions on Blogger (I never did get a reply from the Blogger Forum) and I found this link which sounded exactly like the problem I had.

The culprit was Word!

Writing your posts in Word, or copying&pasting sections of Word documents (which have tons of messy code not compatible with Blogger) is what was causing the problem. In particular, my having copied&pasted a piece with links in - which was a Word document.

These always default to blue - and override any Blogger commands.

Word fonts also override Blogger - but I had noticed these and sorted them out at source before I posted my articles (mainly because Blogger kept flagging them up and I kept hitting the Delete button). Shame I didn't notice the links thing at the time. Who would have thought?

SO... I now knew I had cut&pasted some Word documents into Blogger (to save retyping them all as they were pretty long).

I knew Blogger didn't like the coding, and I kept getting error messages when I hit the Publish Post button. I was getting round this problem by hitting the Delete button, then hitting Publish Post again - then Blogger highlighted more unacceptable code - I deleted it, hit Publish again... etc etc ... and eventually the post would publish.

Everything looked fine on screen - then suddenly all my Links turned brilliant, strobing blue (aaargh) and the Visited Links purple (eurgh). On a black background, this was VILE.

Having spent many a happy hour trying to find out what to do, I came across the post in My Blog is Broken in the Help Section (as mentioned above) which outlined the problem I had - the solution being that I had to find out which post was causing the problem. Which entailed hours of tedium and eyestrain as I had to look at each post's html code, one by one.

How to do it

Scroll down through the blog and see if you can pinpoint where the change happened. If all the posts look fine after a certain point (ie: older posts are OK) then the one with the colour change is the one that is causing the problem - and this one will affect all the new posts written after it.

Go to Edit Posts, then tick the box beside the suspect post and click on Edit. This brings the post back up onscreen. Click on the Edit Html tab (right next to the Compose tab). This lets you see all your code.

To find out if this particular post has the fault, click CTRL + F on your keyboard, which opens up a toolbar just above your bottom toolbar (at the bottom of your screen, just above the Start button).

You'll see a white box with Find: beside it. Type in a:link and hit Enter. If your post has the problem I had (ie: the colours kept defaulting to blue & purple, and overriding the colour codes you typed in in Settings) the section will highlight for you (see below). This only works if you are already in the Edit Html view.

Right - you found it. Now what do you do? Take it all out. You'll find you have a ton of Word code in there. Click over to the Compose or Preview views to see how it looks, and whether you have deleted anything important. If you did, hit Edit Posts again and when prompted to Save or you'll lose your work, don't save it (because you DO want to lose it) then go back into Edit Post and have another go. If it's only one item (or typo) then right-click your mouse to Undo.

You'll find the Word stuff is very obvious - a whole chunk of code, and in there is the font: blue etc stuff. There will also be some code immediately after about underlining, which you also don't want. As per the link I gave you at the top of this post, your code will look something like this (notice the highlight:

a:link, span.MsoHyperlink {color:blue; text-decoration:underline;
text-underline:single;}
and
a:visited, span.MsoHyperlinkFollowed {color:purple; text-
decoration:underline; text-underline:single;}
Once you have got rid of all the code you don't want, hit the Save Now (blue button, on the right) which saves as a draft, then view the blog - all your link colours should have changed. If you are happy with everything, you can now go ahead and Publish Post, and your link colours will be back to what you want them to be.

Customise your link colours

The next issue I had was that I didn't like the colour choice I was offered. To go with the blog skin from TheCutestBlogOnTheBlock, I wanted my links to be more of an olive and a khaki.

To do this, I changed the colours in Layout, Fonts&Colours, by clicking on Links - you'll see a block of colours on the right - if you like what you see, click on a colour and then Save Changes. That's it!

But I don't like the choice of link colours!

In that case, you need to customise your link colours. Go into Layout, Fonts&Colours - and to the right of that is a box titled Edit Colour Hex Code. The colour code will have a hash symbol: # and some numbers and/or letters. Do not delete that hash symbol!

Find your colours on this chart and follow the directions carefully. To change the colours in html you would type in the numbers individually. For example, the colour might be #000000 (this is that awful blue default colour).

I wanted to change to olive, so typed in #999933 (no space after the # mark).

In the Hex box, I have #999933, the colour value, which is in effect the title of the colour. In the html code in the body of the post, you would see it as (153, 102, 51) which is the red, blue, green mix used to obtain the colour (a comma separates each group of numbers, with no spaces).

If very nervous, and you haven't played around with code before, always go to Layout, Edit HTML and Download Full Template. This saves a copy of your entire blog to your Desktop, so if anything goes wrong you can just reload it again, no damage done.

post signature

your photo name

7 comments:

  1. Susie THANKYOU!!
    I've been having the most frustrating afternoon trying to fix my 'blue links'.
    Your amazing!
    Thanks for your post.
    Olivia

    ReplyDelete
  2. You can tell I learnt the HARD way, lol

    It's amazing how much help you CAN'T get online - Blogger never did reply, so it's a good thing I saw that other query, or I'd still be stuck!

    So glad my post was able to sort your problem - and always feel free to email if you need any help - if I don't know, I'll try to find out. I'm sure if you have a problem & solve it, that there's others out there in the same boat. This is WHY I started Computery, basically.

    ReplyDelete
  3. thanks... this was bugging me a lot..

    ReplyDelete
  4. also.. there's some meta link and xml links

    this needs to be delete too.. it helps..

    ReplyDelete
  5. Rishi - I'm so glad I was able to help. And thanks for the tip re the meta & xml links too.

    What I did was delete the whole lot! Whatever makes life easier, lol...

    ReplyDelete
  6. Just found your post, searching for how to get rid of those horrible blue and purple links in Blogger. Thank you, thank you!!! You rock my world!

    Leslie

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.