How to edit CSS in the Insert/Edit Image pop-up with default styles

Hello,

I am wondering how I go about editing the default css in the Insert/Edit Image pop-up box, on the appearance tab.

So for example, when an image is inserted into a paragraph of text, I can see how it gets aligned left (by using the set up on the attached image), but I would like to be able to add to the default CSS so that I can add margins, borders etc depending on the option that is chosen, i.e. left or right.

I have tried looking in system settings, but cant see that corresponds to this. Also tried looking for a CSS file that might adjust this but nothing.

Any help appreciated. I don't really want to ask the client to add in "margin-right: 15px" every time they align an image left for example.

Thanks
John

Assuming you're using tinyMCE...

In your css file, add a class and your chosen styles for classes such as .imageLeft and .imageRight. Then you can add the class to the list of classes in the tinyMCE settings found in System Settings.

You can then instruct the editor/client not to add styles when they insert an image, but rather to apply your pre-specified classes by using the "Style" dropdown in tinyMCE.

You can also specify an entire CSS file to be used in the settings. This setting must be an absolute url for it to work properly and even then, it's possible that some of your styles will not come through as desired. As far as I have found, only single classes come through. No IDs, or combined classes will show in tinyMCE.