Recent Posts
Recent Comments
Popular Articles
About Me
Posted by Rochelle in On my Tools For Ghost Hunters niche store I added images of a ghost that you can see links are hovered over or selected. I’ve been requested to share how I did this. Writing these instructions is something I’ve put off because I think it this is a rather difficult mod but have finally so read on if you would like to add images to your links or auction results.
This mod is difficult, in my opinion, because it requires knowledge on how to edit images using a photo program like Photoshop or Paint Shop Pro. If you have never edited images then you may want to skip this mod.
Lastly, there are a lot of variables when doing this. The width of the sidebars in one template may differ from the width in another, and so on.
My instructions to add graphics to sidebar menu link backgrounds: |
|
|
Step One
|
|
| Find the image you want to add to your links. I recommend choosing something that is small to begin with because you will most likely need to make it smaller. Save the image to your computer. | |
| Step Two | |
| Log in to your site’s Admin and click on the ‘Template‘ tab and ‘styles.css‘ link for the template you will add this mod to. | |
| Search for /* Sidebar Start */ and take note of the sidebar’s width. In the example below the width is 175px: | |
| /* Sidebar Start */ #sidebar { margin-top: 10px; margin-bottom: 10px; margin-right: 10px; float: left; width: 175px; background-color: #ffffff; text-align: left; border-style: solid; border-color: #ffffff; border-width: 1px; } |
|
|
Step Three
|
|
| Open your image editing software (such as Photoshop). | |
| Create a new image with the following attributes: | |
|
|
| Note: The width above might seem too high but this is to prevent having your image repeat. If your link goes to two or more lines and the image isn’t tall enough then your image will repeat, as seen here: | |
 |
|
| Fill the image with the color you want the entire background to be. Here is how the 177 px x 100 px image for my ghost hunters site looks when filled with color: | |
 |
|
| Step Four | |
| Open the graphic you want to add to your background with your photo editing software. Resize the image, if needed, so that the height is less than 25 px. | |
| If the image is surrounded by color then remove it if you can. If you have no idea what I’m talking about then skip this, as it is beyond the scope of these instructions to detail how to do this. | |
| Copy the entire image and paste it onto your colored background. Move the image to the upper right corner. Here is how my background looks with the ghost added and placed in the corner: | |
 |
|
| Save the image. | |
| Note: Make sure you do not include any spaces in the image name: | |
|
|
| Step Five | |
| Upload the image to your site’s template. You will save the image to the template’s ‘image‘ folder. In my case, I saved the image as hover.jpg and will upload the image to http://toolsforghosthunters.com/themes/layout-1-both/images/hover.jpg | |
| Step Six | |
| Go back to your site’s Admin and click on the ‘Template‘ tab and ‘styles.css‘ link for the template you will add this mod to. | |
| Save a copy of the original code (click here for instructions on how to do this). | |
| Search for #sidebar ul li a:hover { | |
| The code that follows #sidebar ul li a:hover { is what you will edit. Your code will differ slightly from mine but will look very much like the example below. The code in my template looks like this: | |
| #sidebar ul li a:hover { background-color: #b3b0c1; padding: 3px; margin: 0px; color: #343548; font-family: Arial; font-size: 12px; display: block; padding-right: 10px; padding-left: 10px; text-decoration: none; border-style: solid; border-color: #dddddd; border-width: 0px 0px 1px 0px; } |
|
| Make the following changes bit of the above code: | |
|
|
| Your modified code should look similar to: | |
| #sidebar ul li a:hover { background: url(‘images/hover.jpg’); background-position: top right; padding: 3px; margin: 0px; color: #343548; font-family: Arial; font-size: 12px; display: block; padding-right: 10px; padding-left: 10px; text-decoration: none; border-style: solid; border-color: #dddddd; border-width: 0px 0px 1px 0px; } |
|
| Search for #selected { and #sidebarright ul li a:hover { (if your template has this code) and repeat what you did for #sidebar ul li a:hover { here. | |
| Save changes and check site for errors. | |
|
.
|
|
You may need to refresh your Internet browser before you can see this effect.
You can also add this effect to your auction results by following these instructions, though some layouts will show this effect better than others:
My instructions to add graphics to auction result backgrounds: |
|
|
Step One
|
|
| Find the image you want to add to your links. I recommend choosing something that is small to begin with because you will most likely need to make it smaller. Save the image to your computer. | |
| Step Two | |
| Log in to your site’s Admin and click on the ‘Template‘ tab and ‘styles.css‘ link for the template you will add this mod to. | |
| Search for #content { and take note of the sidebar’s width. In the example below the width is 574px: | |
| #content { width: 574px; margin-top: 10px; margin-bottom: 10px; margin-right: 0px; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; background-color: #f8f8f8; border-style: solid; border-color: #dddddd; border-width: 1px; text-align: left; } |
|
|
Step Three
|
|
| Open your image editing software (such as Photoshop). | |
| Create a new image with the following attributes: | |
|
|
| Fill the image with the color you want the entire background to be. | |
| Step Four | |
| Open the graphic you want to add to your background with your photo editing software. Resize the image, if needed, so that the height is less than 50 px (you may need to play around with the size by finishing these instructions, uploading it to your site, and modifying your template several times until you are happy with the results). | |
| If the image is surrounded by color then remove it if you can. If you have no idea what I’m talking about then skip this, as it is beyond the scope of these instructions to detail how to do this. | |
| Copy the entire image and paste it onto your colored background. Move the image to the upper right corner. | |
| Save the image. | |
| Note: Make sure you do not include any spaces in the image name: | |
|
|
| Step Five | |
| Upload the image to your site’s template. You will save the image to the template’s ‘image‘ folder. In my case, I saved the image as hover2.jpg and will upload the image to http://toolsforghosthunters.com/themes/layout-1-both/images/hover2.jpg | |
| Step Six | |
| Go back to your site’s Admin and click on the ‘Template‘ tab and ‘styles.css‘ link for the template you will add this mod to. | |
| Save a copy of the original code (click here for instructions on how to do this). | |
| Search for tr.row0:hover { | |
| The code that follows tr.row0:hover { is what you will edit. Your code will differ slightly from mine but will look very much like the example below. The code in my template looks like this: | |
| tr.row0:hover { background-color: #B3B0C1; background-position: top right; } |
|
| Make the following changes bit of the above code: | |
|
|
| Your modified code should look similar to: | |
| tr.row0:hover { background: url(‘images/hover2.jpg’); background-position: top right; } |
|
| Search for tr.row1:hover { and repeat what you did for tr.row0:hover { here. | |
| Save changes and check site for errors. | |
|
.
|
|
I don’t usually discourage people to try my mods but that’s because you don’t usually need any experience to do them. This mod is different. But if you feel up to the challenge you now know how to add images to your hovering and selected links.
Rochelle
Rochelle you are a star!! I was hoping you’d share this, although I hated to ask since you give so much to us already.
I’m definitely going to try this with some of my keeper sites – I fell in love with your little ghosts and can’t wait to add some little cuties of my own on my sites.
Alice
This is wonderful information, and you explain it so clearly!
I have not been able to add photos to my content pages. Is there a trick to it?
Kay
Rochelle,
I used your Brown template for my 1st BANS store, but the footer code was broken. I included direct links to your stores instead. You can see it at
http://antiqueoakfurniture.info
If you want me to do something different, please throw me an e-mail and I will make the appropriate changes to the footer. Thank you so much for the templates!
-Joshua
Joshua,
The footer looks fine to me. There’s no need for you to do anything, though I really appreciate the offer
Rochelle
Kay,
When you say photo, do you mean an actual picture, like you would take of your cat or dog? If so, you would follow the instructions above and paste your photo onto the image you create. Chances are good you will need to resize the photo after you have pasted it onto your image.
I hope that made sense. If not, let me know.
Rochelle
Hi Rochelle,
I just saw your reply. Yes, I want to put a an picture on content pages, and I’ve been so frustrated, since I can’t just upload it and insert it wherever I want to.
Thanks for the info…I’ll give it a try tonight.
Kay
Kay,
I suspect the problem may be that you can’t simply upload an image and have it where you want (well, you actually can but it takes a lot of work to get it where you want it and I think it would be more confusing than helpful to explain that).
The best way that I know of to work with an image is to create an image file that is the size you want and paste the photo to that image file. If you have no idea what I’m talking about then this might not be something you want to try. You can achieve this, though, with a photo editing program.
Please keep me posted on your progress.
Rochelle