WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I am using the Inuit Types theme for my new blog, 'New York Commonplace'. Is there a way of eliminating the grey border around images? This is a visually unappealing and unnecessary distraction (everyone automatically runs their cursor over images, nowadays), and makes it difficult to position the image satisfactorily. I have tried setting BORDER=0 in HTML but this doesn't work either. Any suggestions from long-time users?
The blog I need help with is nycommonplace.wordpress.com.
Hi! Try this instead (to be inserted inside your IMG tag)
<br />
style="border:none;"<br />
One more thing: that only works if there is no caption with your image.
Thank you for the suggestion, airodyssey. I tried it, but no luck I'm afraid. Darned grey border is still there, and no, there is no caption.
What's the URL of your new blog? http://oblecto.wordpress.com is not using the Inuit Types theme.
New blog is: nycommonplace.wordpress.com
OK... Sorry that didn't work. If anyone has other ideas, be my guest.
Since I'm not seeing any images on that blog, I can't work on it for you.
The editor here has apparently completely lost its mind and is doing whatever it wants. If you open the post in the editor, click on the image to highlight it, click on the image edit button (mountain) then click on the advanced tab and paste the following into the "style" field and then save the changes and then save the post, it should remove the border.
border-color: none; border-width: 0;
I'm not sure what the he** staff did to the editor, but it is seriously and completely busted. It won't even accept "border:none;" now.
Border-none alone doesn't work, because you need to change the image background too. See here:
http://wpbtips.wordpress.com/2009/12/24/unwanted-features-in-mistylook/
This is Inuit types, not Mistylook. The issue is that the editor changes border none to something else. It won't accept border none.
@Rich: that post gives the proper code, and says "The same trick can be used to get rid of the border around images in [...] Inuit Types, [...].
Well, the main issue is that border: none; works in the CSS which means if you add it to the image code, it should work there (it's just inline CSS). The issue is that the editor isn't accepting border: none; anymore in the style field in the advanced tab (it morphs it into a whole bunch of shit). I've used it tons of times in the past. It simply won't work anymore.
There is a new version of TinyMCE advanced that is being incorporated into the next version of wordpress core, and I suspect they installed it here about a week ago. I have a couple friends here that are now having all sorts of issues with the editor that they didn't a week ago, and there haven't been any browser updates for either of them.
I was going to put up a test post, but I can't even get into the editor in my test blog, and the media library show question marks for all my images I have loaded there, but the hell with it.
a) Yes, border:none works in the CSS. It works in the HTML editor too. But Inuit also has an f4f4f4 bg around images, so you need to remove that too (hence my background:transparent).
b) The equivalent of border:none in the advanced image settings of the visual editor is a plain 0 in the border field.
I'm having no problems whatsoever with the editor (Mac, Safari and Firefox).
But the hell with it.
Many thanks to thesacredpath<em/> and panaghiotisadam<em/> for their lively commentary. I did try the "border:none;background:transparent;" entry recommended in Getting rid of unwanted features in MistyLook<em/> but I am sorry to report that it did not do anything. When inserted into the image code, it is simply ignored by the html editor - it disappears from it after the 'update' button is used.
My attempt at using HTML in the preceding post was not too successful, was it? Perhaps I am just doing something very simple and very wrong?
Yes you're doing something very simple and very wrong: closing tags have a slash before the letters, not after:
</em>
As for the code, if it disappears when you click Update, then you're also making a mistake with it. To give you a concrete example, the HTML edit box of your latest box inclludes this:
<img class="alignright" style="border:0 none;" src="http://nycommonplace.files.wordpress.com/2010/10/ipcress-file.jpg?w=175&h=285" alt="" width="175" height="285" />
You should turn it to this:
<img class="alignright" style="border:none;background:transparent;" src="http://nycommonplace.files.wordpress.com/2010/10/ipcress-file.jpg?w=175&h=285" alt="Ipcress File" width="175" height="285" />
Check this too, by the way:
http://wpbtips.wordpress.com/2010/01/16/image-quality/
Thank you, panaghiotisadam, I shall most certainly try your suggestions and post the results here later today.
A tip of the Stetson to panaghiotisadam; your recommendations were absolutely correct. I have eliminated that pesky border, and I now know exactly how to deal with them in the future. I had noticed the deterioration in image quality on another blog (oblecto.wordpress.com) and although I didn't know that specifying height and width in the code added to the loss of quality, I do routinely use Photoshop to size images before using. The dimensions specified in 'Maximum displayed image width' (yours, I believe) will allow me to be more precise in this. I was forced to specify size on the 'Ipcress File' image due to difficulty in having it fit properly without unsightly gaps in the justification of the text. Once again, many thanks to you and all who responded.
After some experimentation I discovered a somewhat simpler method for eliminating the border around images in the 'Inuit Types' theme, and I offer it here for those who may not be inclined to muck about with HTML.
1. Open your Post or Page for editing; In the 'Visual' side of the Dashboard Editor place your cursor in the location where you would like the image to appear, then click on 'Add an Image', the first icon in the 'Upload/Insert' features.
2. Select an image from your Media Library and click 'Show'.
3. Select the appropriate size and alignment and click the 'Insert into Post' button.
4. The selected image now appears in the Editor. Click on the image; two icons will appear: 'Edit Image' (left) and 'Delete Image' (right). Select 'Edit Image'.
5. Click on the 'Advanced Settings' tab. In 'Advanced Image Settings', look at 'CSS Class'; a specification appears there (e.g., 'alignright size-medium wp-image-178'), delete everything except the alignment specification (i.e., 'alignright').
6. Below that, in 'Styles', enter (exactly as shown here): border: none; background: transparent;
7. Click update.
8. Now you can Preview or Update as usual to see results. Note that this will not work with images that you have added captions to. If you want borderless images with captions, you must add them to the image before uploading it into your Media Library.
Sacred Path
thanks this worked for me (after trying several CSS previews unsuccessfully) I also put 0 in the border field:
"If you open the post in the editor, click on the image to highlight it, click on the image edit button (mountain) then click on the advanced tab and paste the following into the "style" field and then save the changes and then save the post, it should remove the border.
border-color: none; border-width: 0;"
This topic has been closed to new replies.
oblecto
airodyssey
maureenheck