add padding to images in editor

you could hack the stylesheet for the admin area manually to style the images, but I don’t know of a plugin that will do it for you.

yep i know that but the problem is that i use both image float left and right so modifying css sheet is not acceptable…

however thanks for the reply

…i use both image float left and right so modifying css sheet is not acceptable…

Why it is not acceptable? Just add the styles to the admin .CSS file, and what is floated letf and right in your theme, will be floated left and right in the admin area as well:)

Shoulddn’t be so hard; if you need specific advice or want to show us an example, whould be nice:)

Cheers!

… when i select “left floating” from image popup box it changes the code by adding << align=”left” >> in img code proprerties i don’t think i can add a rule in css stylesheet that point to that property… it is neither an id or a style… and i don’t want to affect everything modifying img{….} property

what i want is an image left padding (when aligning right) and an image right padding (when aligning left)
if its possible….

OK, maybe can be done (maybe not), send URL please to a post at your blog with two images, one with left and one with right alignment ??

Also, why don’t you use classes instead? It’ll be much easier for you:)

Here’s a CSS excerpt from the default theme:

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}

Using standard classes like these ones will give you the flexibility of aligning images left / or right, with custom padding, both in the WP admin area editor and in your theme (whatever theme that is).

You’ll just need to copy the above styles (or similar styles from your theme) to the admin CSS file, and this’ll do the trick:)

Hope this helps, report back later, so we can know what happened:)

before i change anything… and i can very simply cause the teme is self made…

https://gx3.netsons.org/wpress

but… this sounds like i have to add manually in the code box, inside img tag << class=”alignleft” >> and not automatically by image property box…

or maybe i’m wrong (meaning that WP automatically applies img.alignleft and img.alignright classes when present in style.css)?

oh thanks for the help ??

You should add the class manually, yes, because WP can’t do it automatically for you (unless you ‘hack’ it or create some plugin for this purpose, of course;-)

If you can live with that (manual adding of the left/right classes), then it’s ok for you, and you’ll have your nicely floated left/or right images (and custom paddings) both in wp-admin and in the blog itself:)

At least, this is how I’d do it… if not having access to a special plugin or something of the sort:)

I’d stop using the Visual Rich editor. Use the WordPress quicktags that are default, and you can add buttons to your liking easily, or just manually add stuff in.

For the record, the Visual Rich editor is TinyMCE – an outside script. If you go to the TinyMCE website, you might find out how to add additional buttons that you want in their script.

@doodlebee:

Good advice! I guess, you can even create custom buttons for aligning images left and right, the buttons will assign classes to the images, and then you can style the classes as you wish them to be styled:)

It’ll involve some work, but could do the trick pretty nicely, I think:)

It’ll involve some work,

Actually, it doesn’t require much. You just add the custom buttons you want in the wp-admin/js/quicktags.js file. Right there at the top, you can see the buttons that are already there. Just add what you need, no biggie.

Thank you, that’s an advice I may try myself, too, one of these days!

Cheers! ??

PS wp-includes/js/quicktags.js ??

Thanks for that correction! It is the includes – sorry ’bout that.

hey tanks so much !!
i’m about to look at those things ??

It’s OK:)

Here I found good tips from you, doodlebee, which I might explore, too, that’s the important thing:)))

Just wanted to follow up this, I have tried to edit the Javascript file (wp-includes/js/quicktags.js) and it doesn’t change the buttons on the visual editor.

I have also gone to the TinyMCE support forum and can’t get the answer, although the same question seems to have been asked a lot.

Can anyone tell me in laymans terms how to change the buttons on the Visual Editor so they will add class=”left” instead of align=”left”?

Cheers