Forum     

Go Back   Digit Technology Discussion Forum > Community > Tutorials
Register FAQ Calendar Mark Forums Read

Tutorials This section offers tutorials and How to's on just about anything related to computers and IT. Note: All tutorials are courtesy the posters and not verified by Digit


Closed Thread
 
LinkBack Thread Tools Display Modes
Old 24-01-2008, 05:07 PM   #1 (permalink)
Dreamweaver
 
Gigacore's Avatar
 
Join Date: Aug 2006
Location: Bangalore
Posts: 3,904
Arrow Adding border for images in your wordpress blog.


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 :

Code:
img {
border: none;
}
… and replace it with this:

Code:
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:


This ends the tut and enjoy the PICTURE

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

Via: My Blog
__________________
Today's noobs are tomorrow's geeks. Don't make fun of them.. encourage them. - Gigacore

Follow me on twitter.com/gigacore

Last edited by Gigacore; 19-02-2008 at 05:40 PM.
Gigacore is offline  
Advertisements. Register and be a member of the community to get rid of them.
Advertisement

Old 24-01-2008, 05:15 PM   #2 (permalink)
vaibhavtek
Guest
 
Posts: n/a
Default Re: Adding border for images in your wordpress blog.

nice gigacore..
 
Old 24-01-2008, 05:32 PM   #3 (permalink)
Dreamweaver
 
Gigacore's Avatar
 
Join Date: Aug 2006
Location: Bangalore
Posts: 3,904
Default Re: Adding border for images in your wordpress blog.

he he.. thanks
__________________
Today's noobs are tomorrow's geeks. Don't make fun of them.. encourage them. - Gigacore

Follow me on twitter.com/gigacore
Gigacore is offline  
Old 24-01-2008, 08:21 PM   #4 (permalink)
is NOT a PC/Mac
 
debsuvra's Avatar
 
Join Date: Sep 2006
Location: Pondicherry
Posts: 974
Cool Re: Adding border for images in your wordpress blog.

Thanks Gigacore for this nice tuto here. I also use Wordpress and will implement the trick there.
debsuvra is offline  
Old 24-01-2008, 08:23 PM   #5 (permalink)
-----ATi-----
 
nvidia's Avatar
 
Join Date: May 2007
Location: Bangalore
Posts: 2,322
Default Re: Adding border for images in your wordpress blog.

Great work Gigacore!
now the pics in my blog will look better....
__________________
http://twitter.com/akshayms
nvidia is offline  
Old 24-01-2008, 08:28 PM   #6 (permalink)
Dreamweaver
 
Gigacore's Avatar
 
Join Date: Aug 2006
Location: Bangalore
Posts: 3,904
Default Re: Adding border for images in your wordpress blog.

good to see it as useful..
__________________
Today's noobs are tomorrow's geeks. Don't make fun of them.. encourage them. - Gigacore

Follow me on twitter.com/gigacore
Gigacore is offline  
Old 24-01-2008, 08:43 PM   #7 (permalink)
Elevating Humanity
 
The Conqueror's Avatar
 
Join Date: Sep 2007
Location: Now on Earth
Posts: 1,957
Default Re: Adding border for images in your wordpress blog.

WOW! nice tut


btw nice avatar
__________________
Regards,
The Conqueror
The Conqueror is offline  
Old 24-01-2008, 09:10 PM   #8 (permalink)
Dreamweaver
 
Gigacore's Avatar
 
Join Date: Aug 2006
Location: Bangalore
Posts: 3,904
Default Re: Adding border for images in your wordpress blog.

^ thanks
__________________
Today's noobs are tomorrow's geeks. Don't make fun of them.. encourage them. - Gigacore

Follow me on twitter.com/gigacore
Gigacore is offline  
Old 24-01-2008, 09:47 PM   #9 (permalink)
ico
.
 
ico's Avatar
 
Join Date: Jun 2007
Location: New Delhi
Posts: 8,936
Default Re: Adding border for images in your wordpress blog.

thanks a lot........
__________________
.
ico is offline  
Old 26-01-2008, 12:05 PM   #10 (permalink)
Another Brick in the Wall
 
drgrudge's Avatar
 
Join Date: Jul 2004
Location: Dubai/Chennai
Posts: 3,027
Default Re: Adding border for images in your wordpress blog.

Always wanted to do this... thanks.

Btw, you know how to do like in this blog: http://veerle.duoh.com/blog/comments...photoshop_cs2/
__________________
I Love Photography. I Love Aperture. I Love Mac.
drgrudge is offline  
Old 26-01-2008, 12:43 PM   #11 (permalink)
Dreamweaver
 
Gigacore's Avatar
 
Join Date: Aug 2006
Location: Bangalore
Posts: 3,904
Default Re: Adding border for images in your wordpress blog.

^ u mean the border ?
__________________
Today's noobs are tomorrow's geeks. Don't make fun of them.. encourage them. - Gigacore

Follow me on twitter.com/gigacore
Gigacore is offline  
Old 26-01-2008, 01:43 PM   #12 (permalink)
Another Brick in the Wall
 
drgrudge's Avatar
 
Join Date: Jul 2004
Location: Dubai/Chennai
Posts: 3,027
Default Re: Adding border for images in your wordpress blog.

Yes, the dotted one.
__________________
I Love Photography. I Love Aperture. I Love Mac.
drgrudge is offline  
Old 26-01-2008, 02:10 PM   #13 (permalink)
Dreamweaver
 
Gigacore's Avatar
 
Join Date: Aug 2006
Location: Bangalore
Posts: 3,904
Default Re: Adding border for images in your wordpress blog.

just change "solid" to "dashed"

Quote:
2. You can have “Dashed” border style. To do this, replace “solid” with “dashed” in both the lines.
ok.. here is the ready made.

Code:
img {
border:#cc9 1px dashed;
padding:3px;
}
a img {
border-bottom: #000000 1px dashed;
}
__________________
Today's noobs are tomorrow's geeks. Don't make fun of them.. encourage them. - Gigacore

Follow me on twitter.com/gigacore
Gigacore is offline  
Old 26-01-2008, 02:56 PM   #14 (permalink)
Alpha Geek
 
napster007's Avatar
 
Join Date: Mar 2007
Posts: 763
Default Re: Adding border for images in your wordpress blog.

thanks man
napster007 is offline  
Old 30-01-2008, 04:19 PM   #15 (permalink)
ax3
Cool as a CUCUMBAR ! ! !
 
ax3's Avatar
 
Join Date: Dec 2003
Posts: 5,052
Default Re: Adding border for images in your wordpress blog.

giga bhai .... giga bhai ....... aap toh BHAI nik le ......

bole toh = solid hai .....
__________________
... W H O T ...
ax3 is offline  
Old 30-01-2008, 04:40 PM   #16 (permalink)
Dreamweaver
 
Gigacore's Avatar
 
Join Date: Aug 2006
Location: Bangalore
Posts: 3,904
Default Re: Adding border for images in your wordpress blog.

^ lol man.. thanks
__________________
Today's noobs are tomorrow's geeks. Don't make fun of them.. encourage them. - Gigacore

Follow me on twitter.com/gigacore
Gigacore is offline  
Old 02-02-2008, 08:25 PM   #17 (permalink)
Fast 'N' Furious
 
topgear's Avatar
 
Join Date: Jul 2006
Location: Geek's Heaven
Posts: 11,169
Default Re: Adding border for images in your wordpress blog.

Nice work Mr. Gigacore. Really very Useful. My Regards.
__________________
ToPsPeEeD = FaSt BuT StEaDy

AMD Radeon HD 6850 OverClocked to 1 Ghz !!!

Blog : http://topgeartopspeed.wordpress.com/
----------------------------------------------------
Never buy viewsonic products : http://tinyurl.com/ykwx4oa
topgear is offline  
Old 02-02-2008, 08:33 PM   #18 (permalink)
Dreamweaver
 
Gigacore's Avatar
 
Join Date: Aug 2006
Location: Bangalore
Posts: 3,904
Default Re: Adding border for images in your wordpress blog.

my pleasure..
__________________
Today's noobs are tomorrow's geeks. Don't make fun of them.. encourage them. - Gigacore

Follow me on twitter.com/gigacore
Gigacore is offline  
Closed Thread

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
image size in wordpress blog shreyadr Software Q&A 6 19-05-2008 03:44 PM
Import Wordpress Blog posts to Blogger hard_rock Software Q&A 6 02-11-2006 07:20 PM
How to GeoTag a Wordpress blog? effyouseakay Software Q&A 2 20-02-2006 02:28 AM
Wordpress Blog Problem navjotjsingh Software Q&A 14 19-06-2005 09:04 AM
Adding Google AdSense Ads on my Tripod Blog devilhead_satish Audio 2 17-05-2005 11:46 AM

 
Latest Threads
- by chris
- by icebags
- by Tenida

Advertisement




All times are GMT +5.5. The time now is 01:30 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2012, vBulletin Solutions, Inc.

Search Engine Optimization by vBSEO 3.3.2