How to create buttons, email links, and more…

Dear Becca,

(I love your avatar – too cute!)

Your questions answered:

1. By grey boxes around everything – I assume you mean the images?   To remove these, go to Appearance>>Edit, and find the Style.css- should be listed at the bottom of the right-hand side.
- scan through that file until you find:

a img {border: 3px solid grey; .....}

- change the border width to zero like so:

a img {border: 0px solid grey; ....}

Note – there may be more than one instance of “img” so you may need to use your notepad and search & replace feature to find each instance.\

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2. Your question says that you have a picture, but you’d like it to function like a button, correct?

First, find the button code. Look here first: Posts>>Edit>> and inside the specific post – click on the “HTML” editor.  If it isn’t in a particular post, but in your sidebar, go to Appearance>> Widgets and find the text widget with the image in it.

Scroll down in the html until you see a line of gibberish (code) that begins with "<img alt="" and ends with “ />” (also known as an “end” tag.)

In order to make that image do something (just like a button) you need to put a link around it. For an example, lets say you want that button to go to your about page.   A normal link will look like:

<a href="http://myblog/about" title="About Me"> About </a>

You will want to replace the “About” text with your image, so that the image is now surrounded by a link – thus clickable.  So the end result will look like:

<a href="http://myblog/about" title="About Me"> <img src="http://flickr/myaccount/myimage.jpg" title="me" alt="" /></a>

You will need to replace my links (in blue) with your specific links.   By the time you’re done you’ll be an html coder!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3. You’d like people to click on a link and email you.

Yes, this can be done with a mailto: function in an “a” tag, HOWEVER, bots and spiders crawl the internet all the time, and I strongly recommend against using the mailto tag as it will be scanned and become the target of innumerable spam. Instead, I recommend the use of a contact plugin – I use Contact – Form 7.

If you are SURE you want to use the mailto function, it works like this:

<a href="mailto:cathy@myemail.com">Email Link</a>
(replace the blue text with your email address!)

Let me know if you have problems with any of these answers!

To leave me more questions – and get FREE answers – simply leave a comment on THIS POST.