# Adding border for images in your wordpress blog.



## Gigacore (Jan 24, 2008)

*Picture without a frame is not a picture, its just an image. Adding borders to the images in your wordpress blog will enhance the look of your theme.*

Not all the wordpress themes come with image borders by default. You need to add few lines of code to get the image border.

This tutor tells you on how to add a image border to the images in your wordpress theme. You can follow this tutorial only if your theme doesn’t come with default border for images.

*To add the border, follow this steps:*

1. Go to your wordpress Admin CP.
2. Click on Presentation and the select the theme for which you want to add image border.
3. Click on “Theme Editor”
4. Open “Stylesheet” or “style.css” whatever from the right hand list.
5. Now you must be able see the CSS codes.

Find this :


```
img {
border: none;
}
```

… and replace it with this:


```
img {
border:#cc9 1px solid;
padding:3px;
}
a img {
border-bottom: #b8860b 1px solid;
}
```

And click on “Update File”

Now you must be able to see a border around the images in your blog.

*You can customize the border in the way you want. Here are few quick customization you can do:*

1. To change the distance between the border and the image, increase or decrease the number in “*padding*”. For example, in the code above the padding is 3, you can increase it to 4, if you want more gap between the image and the border.

2. You can have “Dashed” border style. To do this, replace “*solid*” with “*dashed*” in both the lines.

3. To change the color of the border line, you need to change the color code (HEX) value with the valid CSS/HTML color code.

For example, in the above code, the color code is “*#b8860b*”, which is light brown in color. If you want to have a black border line, you can change it to “*#000000*″

Click Here for a list of all the valid HTML and CSS Color codes.

*And now finally your images will appear with a border and looks like this:*

*farm3.static.flickr.com/2368/2215762299_9602a2bba8_o.jpg​
This ends the tut and enjoy the PICTURE

*P.S*: Adding image border will increase indexing effeciency for Search Engines

Via: My Blog


----------



## vaibhavtek (Jan 24, 2008)

nice gigacore..*gigasmilies.googlepages.com/6.gif*gigasmilies.googlepages.com/6.gif


----------



## Gigacore (Jan 24, 2008)

he he.. thanks


----------



## debsuvra (Jan 24, 2008)

Thanks Gigacore for this nice tuto here. I also use Wordpress and will implement the trick there.


----------



## nvidia (Jan 24, 2008)

Great work Gigacore!
now the pics in my blog will look better....


----------



## Gigacore (Jan 24, 2008)

good to see it as useful..


----------



## The Conqueror (Jan 24, 2008)

WOW! nice tut


btw nice avatar


----------



## Gigacore (Jan 24, 2008)

^ thanks


----------



## ico (Jan 24, 2008)

thanks a lot........


----------



## drgrudge (Jan 26, 2008)

Always wanted to do this... thanks. 

Btw, you know how to do like in this blog: *veerle.duoh.com/blog/comments/creating_patterns_in_photoshop_cs2/


----------



## Gigacore (Jan 26, 2008)

^ u mean the border ?


----------



## drgrudge (Jan 26, 2008)

Yes, the dotted one.


----------



## Gigacore (Jan 26, 2008)

just change "solid" to "dashed"



> 2. You can have “Dashed” border style. To do this, replace “solid” with “dashed” in both the lines.



ok.. here is the ready made.


```
img {
border:#cc9 1px dashed;
padding:3px;
}
a img {
border-bottom: #000000 1px dashed;
}
```


----------



## napster007 (Jan 26, 2008)

thanks man


----------



## Gigacore (Jan 30, 2008)

^ lol man.. thanks


----------



## topgear (Feb 2, 2008)

Nice work Mr. Gigacore. Really very Useful. My Regards.


----------



## Gigacore (Feb 2, 2008)

my pleasure..


----------

