Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   Borders around images (http://forum.bytesforall.com/showthread.php?t=372)

upscho Feb 13, 2009 11:23 AM

Borders around images
 
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

Flynn Feb 13, 2009 12:38 PM

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 /* ... */

MacMyDay Feb 13, 2009 08:57 PM

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.

Flynn Feb 14, 2009 05:10 AM

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="......

upscho Feb 14, 2009 08:46 AM

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

MacMyDay Feb 14, 2009 01:17 PM

Quote:

Originally Posted by Flynn (Post 1431)
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="" />
??

Flynn Feb 14, 2009 02:22 PM

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...

MacMyDay Feb 17, 2009 02:03 AM

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

Flynn Feb 17, 2009 03:48 AM

That's a background-color and padding what you're still seeing. Just setting the padding to 0 should suffice
HTML Code:

padding: 0;

MacMyDay Feb 17, 2009 01:50 PM

okay Flynn. I must be a bit brain dead... but thanks for the look and clarity!

Done!


All times are GMT -6. The time now is 07:44 AM.

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