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 » Sidebars & Widgets »

[SOLVED] How to remove border from an image?


  #1  
Old Mar 24, 2009, 05:59 AM
Nefeli
 
18 posts · Feb 2009
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!
  #2  
Old Mar 26, 2009, 11:05 AM
Nefeli
 
18 posts · Feb 2009
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!
  #3  
Old Mar 26, 2009, 01:38 PM
Shepherd Jim's Avatar
Shepherd Jim
 
301 posts · Feb 2009
Bristol, midcoast Maine USA
Quote:
Originally Posted by Nefeli
...<snip>...

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

...<snip>...
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
  #4  
Old Apr 3, 2009, 01:44 AM
aliasfreq
 
5 posts · Apr 2009
Sydney
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!
  #5  
Old Apr 3, 2009, 06:44 AM
Shepherd Jim's Avatar
Shepherd Jim
 
301 posts · Feb 2009
Bristol, midcoast Maine USA
Quote:
Originally Posted by aliasfreq
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??
  #6  
Old Apr 3, 2009, 10:00 AM
bcorrigan
 
85 posts · Feb 2009
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.
  #7  
Old Apr 3, 2009, 07:10 PM
aliasfreq
 
5 posts · Apr 2009
Sydney
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;
}

Last edited by aliasfreq; Apr 3, 2009 at 07:56 PM.
  #8  
Old Apr 12, 2009, 02:05 AM
nselegzi
 
5 posts · Mar 2009
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
  #9  
Old Apr 12, 2009, 08:38 AM
Shepherd Jim's Avatar
Shepherd Jim
 
301 posts · Feb 2009
Bristol, midcoast Maine USA
Quote:
Originally Posted by nselegzi
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. ...<snip>
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
  #10  
Old Apr 12, 2009, 09:14 AM
nselegzi
 
5 posts · Mar 2009
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
  #11  
Old Apr 12, 2009, 10:32 AM
Shepherd Jim's Avatar
Shepherd Jim
 
301 posts · Feb 2009
Bristol, midcoast Maine USA
Quote:
Originally Posted by nselegzi
...<snip>
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
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
  #12  
Old Sep 13, 2009, 11:56 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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?
  #13  
Old Sep 14, 2009, 03:46 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version of Atahualpa, WP and PHP?
what's the url?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Sep 14, 2009, 08:54 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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.
  #15  
Old Sep 14, 2009, 10:34 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Sep 14, 2009, 10:37 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Ahh, that would explain it then.

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

Thanks for looking into it.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Rounded sidebar with border? ssoszka Sidebars & Widgets 14 Nov 27, 2009 07:04 PM
Image border causing page not to validate... Tarzanna77 Atahualpa 3 Wordpress theme 1 Jun 26, 2009 05:02 PM
Remove blog title text add image benw Header configuration & styling 4 Apr 28, 2009 03:50 PM
how to remove header image from homepage only? SoftDux Header configuration & styling 1 Mar 30, 2009 07:26 AM
How to remove rotating image area? joe hark Header configuration & styling 3 Mar 17, 2009 03:45 PM


All times are GMT -6. The time now is 10:09 AM.


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