Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Borders around images


  #1  
Old Feb 13, 2009, 10:23 AM
upscho's Avatar
upscho
 
30 posts · Feb 2009
Hello,

I like the borders around images that I've put into several (static) pages. Seems to me as good old fashioned paper pictures.

I noticed that at least with jpg files this border reduces the width and height: Firefox properties of a picture show for example: "size: 400px x 266px (scaled to 394px x 262px)". Another example: "300px x 199px (scaled to 298px x 197px)". With another picture (GIF file) there is no "scaled to..." hint.

Where does this scaling come from? Is it because of the borders? If yes: Is it possible to add the borders around the picture so that the whole pixel size is a bit larger (e. g. 406px x 270px)?

My problem with scaling is that I fear it reduces image quality and it costs time.

Can anybody help me?

Best regards,
upscho
  #2  
Old Feb 13, 2009, 11:38 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
That's probably caused by the img max-width in style.css round line 1420
HTML Code:
.post img.size-full {
	/*max-width: 100% auto;*/
	max-width: 96%;


change to 100% or delete it, or put it into /* ... */
  #3  
Old Feb 13, 2009, 07:57 PM
MacMyDay's Avatar
MacMyDay
 
23 posts · Feb 2009
I'd like to ask one thing about borders around images. I too like to use these 90% of the time. But there are some times where I'm using a floating image or one with a drop shadow shot on a white background. In those cases it would be good to "turn off" the border, only for a single post.

So, can I disable or override the default of a border around an image on a post or image basis?

I use "ecto" to post to my WP blog.
  #4  
Old Feb 14, 2009, 04:10 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
You can add an inline style to an image which will override CSS from the header or external files

After you added the image, add, in HTML mode
HTML Code:
<img style="border: 0;" class="......
You would just add the style="...." part. You can add more than just one property:value pair

HTML Code:
 <img style="border: 0; padding: 0; margin: 10px 20px;" class="......
  #5  
Old Feb 14, 2009, 07:46 AM
upscho's Avatar
upscho
 
30 posts · Feb 2009
Hi Flynn,

I commented out the line with 96 % and removed the comment for the line with "100% auto;" (so it became active) and it works perfectly for me! Thank you very much.

Best regards,
upscho
  #6  
Old Feb 14, 2009, 12:17 PM
MacMyDay's Avatar
MacMyDay
 
23 posts · Feb 2009
Quote:
Originally Posted by Flynn
You can add an inline style to an image which will override CSS from the header or external files

After you added the image, add, in HTML mode
HTML Code:
<img style="border: 0;" class="......
You would just add the style="...." part. You can add more than just one property:value pair

HTML Code:
 <img style="border: 0; padding: 0; margin: 10px 20px;" class="......
Okay Flynn, I think I got you but let me run this by you. Since I use Ecto to post to the WP blog, my IMG tag for the thumbnail looks like this:

Quote:
<img src="http://blog.digitaltavern.com/wp-content/uploads/2009/02/photosp900-tm.jpg" width="220" height="284" alt="p900.jpg" name="photosp900-tm.jpg" style="" />
So then should I simply add the "border: within this tag such as this:

Quote:
<img src="http://blog.digitaltavern.com/wp-content/uploads/2009/02/photosp900-tm.jpg" border="0" width="220" height="284" alt="p900.jpg" name="photosp900-tm.jpg" style="" />
Or do I just add the entire tag as you've noted here like this:


Quote:
<img style="border: 0;" class=""><img src="http://blog.digitaltavern.com/wp-content/uploads/2009/02/photosp900-tm.jpg" width="220" height="284" alt="p900.jpg" name="photosp900-tm.jpg" style="" />
??
  #7  
Old Feb 14, 2009, 01:22 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
You already have an empty style="" at the end of your image tag, use that one
HTML Code:
<img src="http://blog.digitaltavern.com/wp-content/uploads/2009/02/photosp900-tm.jpg" 
width="220" height="284" alt="p900.jpg" name="photosp900-tm.jpg" style="border: 0;" />
Doesn't matter whether it is at the beginning or the end or in between other img properties such as src/width/height etc...
  #8  
Old Feb 17, 2009, 01:03 AM
MacMyDay's Avatar
MacMyDay
 
23 posts · Feb 2009
Hey Flynn or anyone else that knows these things. I've tried to drop the border which is defaulted on my website to no border with this code:

Code:
http://blog.digitaltavern.com/wp-content/uploads/2009/02/photos200902161815-tm.jpg" width="100" height="76" alt="200902161815.jpg" style="float:left;border:0;"
But the post still seems to ignore my "0" border and places a border around the image as in this post

Wacky, but the behaviour in Safari is still a border.

thanks
  #9  
Old Feb 17, 2009, 02:48 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
That's a background-color and padding what you're still seeing. Just setting the padding to 0 should suffice
HTML Code:
padding: 0;
  #10  
Old Feb 17, 2009, 12:50 PM
MacMyDay's Avatar
MacMyDay
 
23 posts · Feb 2009
okay Flynn. I must be a bit brain dead... but thanks for the look and clarity!

Done!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Adding borders to sides of blog with blog centred in middle of page rhymes Page & Category Menu Bars 1 May 15, 2009 11:38 PM
iframes have borders, how to correct tekdiver500ft Atahualpa 3 Wordpress theme 2 Mar 23, 2009 08:53 PM
several tiny problems: justfiy, colors, borders pltrace Post-Kicker, -Byline & -Footer 1 Mar 2, 2009 02:21 PM
The striped borders in Atahualpa ochocho Atahualpa 3 Wordpress theme 1 Feb 24, 2009 09:41 AM
Can Atahualpa's image borders be applied to only some images? leslamb Atahualpa 3 Wordpress theme 2 Feb 20, 2009 06:53 AM


All times are GMT -6. The time now is 11:47 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.