[SOLVED] How to remove border from an image?
 

I've been adding images mainly .jpg - photos, an image of hand written signature, and also animated .gif flags.

My problem is that a grey border outline is showing up which I really don't want. These same images work fine in normal html page so why not on WP?

I'm sure I read somewhere here in the forum about putting borders around images but cannot find the thread - there are so many of them!

Help please!

:)Well, I managed to solve the problem all on my own.

With the help of firebug - you should all be using it - I was able to see the code related to the image and realized I'd seen these details before. I then went to Appearances>At.theme options>images and lo and behold there was formatting there for images in posts etc. Once removed my problems was solved and now the images are showing as they should.

You really need to keep going back time and again through the different options to learn what you can and can't do.

Great theme!

WOW! Thank you! I must admit that I'd convinced myself that those "paper print photo"-like borders were being applied somewhere in WordPress as some sort of WP default standard and that modifying or removing them was going to be a big php-amending project. Like you, I'd either missed or just skimmed over the "Images" option button amongst Atahualpa's options

Gotta say, Nefeli, you are becoming quite the WP/Atahualpa expert!! :) ;)

TTFN Jim

Is there a way to remove the border from a single image? I tried style="border: 0pt none;" but it didn't work.

What I'd also like is to be able to remove the border from page images, but keep the border on post images. Perhaps this is possible via a CSS insert?

Thanks to anyone who can help!

I'm still working on adjusting things on "single" images.

And I was going to tell you that WP Dashboard: Appearance/Atahualpa Theme Options/Images would solve your second problem, but you're right, only "Posts" are mentioned though the formatting choices made there also affect images on Pages.

Flynn??

At the risk of bringing "divititis" to your site,

you can create some special CSS for your posts, put them in the HTML/CSS inserts,

then in your posts, edit them in HTML Mode and add div tags to wrap the content. Here's some snippets of how I am using this:

in my posts, I put this wrapper:
<div class="bioContent">
--- post content here ---
</div>

in the html/css inserts, I put:

.bioContent H3 {
color:#666;

}

.bioContent table{
border-collapse: collapse;
width: auto;
margin-left: 1em;
}

table .education {
width: 50em;
}

etc.

so you could stylize your images this way.

That seems to be a good way to do it - thanks! I don't know how good my code is, but this seems to have worked:

<div class="customImage">
--- post content here ---
</div>

CSS insert:

/* Optional images with no borders */
.customImage img {
padding: 0px;
border: none;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

I tried adding CSS insert Aliasfreq suggested and then placing the post content within the division, but I still get the frame. I generally like the border, and would like to keep it as a default, but there are images where it doesn't work for me. Here's a post with an image that I'd like to remove the frame from. Here's a post where I tried to remove the border to no avail:

http://www.noelsblog.org/content/330

Hey Noel/nselegzi: The coding suggested by aliasfreq is working for me: http://www.shepherdjim.com/quirky/colorful-eggs

By the sound of it, you already added aliasfreq's css to Atahualpa's "CSS Inserts". If not, go do that. Don't forget to click "Save Changes" after pasting

/* Optional images with no borders */
.customImage img {
padding: 0px;
border: none;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

into the little CSS window.

Now, get into the WP Dashboard and load your "Back Home!" post into "Edit Post". Click the little "HTML" tab at the upper righthand corner of the editor window.

I'm no expert at this stuff, but it looks like your bunny pic is "contained" in a paragraph that starts out <div id="attachment_332" ...the end will be </div>

Put your cursor just after that ending </div> and hit "Enter" a few time to give yourself some room to work, Paste in aliasfreq's code:

<div class="customImage">
--- post content here ---
</div>

Now paste your bunny's html <img src="http://www.noelsblog.org/wp-content/uploads/2009/04/easter-bunny.gif"/> into the above ...I'd suggest leaving the "--- post content here ---" at first, tho you can delete it once everything's working as intended.

Now, click on the "Visual" tab and you should see the bunny withOUT the frame appearing just below the bunny WITH the frame. Click "Update Post". Click back into "HTML" view and delete that entire <div id="attachment_332" ...ending with </div>, click "Update Post" and go look at the post in your browser -- don't forget to reload/refresh the page to make sure you're not looking at a cached page.

Happy Easter! Jim

Hi Jim,

The problem, I discovered, is with the caption. The code works when I don't have a caption, but when I add a caption it won't. Here's what I have put in the HTML box of the edit screen:

<div class="customImage">[caption align="aligncenter" width="300" caption="Happy Easter!!"]<a href="http://www.noelsblog.org/wp-content/uploads/2009/04/easter-bunny.gif"><img title="easter-bunny" src="http://www.noelsblog.org/wp-content/uploads/2009/04/easter-bunny.gif" alt="Happy Easter!!" width="300" height="300" /></a>[/caption]</div>

When I save and view the source of the page (http://www.noelsblog.org/content/330), here's what I get:

<div class="customImage"><div class="wp-caption aligncenter" style="width: 310px"><a href="http://www.noelsblog.org/wp-content/uploads/2009/04/easter-bunny.gif"><img title="easter-bunny" src="http://www.noelsblog.org/wp-content/uploads/2009/04/easter-bunny.gif" alt="Happy Easter!!" width="300" height="300" /></a><p class="wp-caption-text">Happy Easter!!</p></div></div>

I am assuming the problem is that WP or the theme (not sure which controls this) adds the <class="wp-caption aligncenter" after the <div class="customImage">. I took out the caption and it works fine.

The caption isn't that big a deal, but I think it would be better if the theme would not override the image controls that you get when you right-click on the image in the visual edit box. The advanced setting seem to want to let you control the border of the image, but nothing you put there seems to work. This is a great them, so this is only a quibble.

Noel


Noel

First, the current version of your post looks sOOper with the blue italicy "caption" you've inserted under the drawing.

I'm with you re being just a bit disappointed with the current state of image editing and placement. The WP editor works okay as long as you're not trying to be too fancy with having too many images being placed too close together. I'm guessing it all started out as "..just want to put a picture into my blogpost..." and has been moving "up" from there. My non-tech wife is often moved to screams and tears when she starts adding pics to her posts.

My secret for success so far is to avoid the "Visual" tab as much as possible -- have you ever tried to drag an image and had the caption and the image separate and fly off in different directions!? Nasty!

I guess you/me/us are about set for now. The only suggestion I'd make is that, in the interest of maintaining better css, you should maybe use a plain <p> for your "caption" rather than a <h1>. You'd have to crank up the font size along with coloring it, etc in your <span>. The "style folks" like to keep the heading "h"s (h1, h2, h3, etc) AS headings and ordered by importance like outline headings -- h1 is most important, h2 is next ....

well, I've done enough damge here ...hiho Silver ...and away!

Jim

The aliasfreq code works perfectly for my site except when you view it in Safari.

Does anyone have any idea as to what would be needed to make this CSS insert compatible with Safari?

What version of Atahualpa, WP and PHP?
what's the url?

Atahualpa 3.4.2 and WP 2.8.4.

See the headings inserted as images (Ratings, Videos, Pictures, Latest Comments) here:

http://roadreview.net/roads/united-s...ifornia/stunt/

Not sure about the PHP, although I believe I have the latest.

ahh, those are not borders that are part of Atahualpa or Wordpress, they are part of the image. You need to edit the image and remove the border using something like photoshop.

Ahh, that would explain it then. :p

My friend made them, I'll have to have him fix it.

Thanks for looking into it. :)