tinyMCE: insert image css class

hello again!

i really hope i do not exaggerate the hospitality of this forum but since i’m so new to all of this i would be lost without you guys!

referring to this post
http://modxcms.com/forums/index.php/topic,11848.0.html
there is a way to create a css that modifies the appearance of an image that is inserted within the tinyMCE. right now when i insert a picture and align it to left it is way too close to the text.

so how can i add css classes to the dropdown menu in the appearance section so i can customize the margin?

guy’s! thank you very very much for your support!

best
firewireflow

Hi.

You can add the classes as described in the post you mentioned.
Go to Resources > Manage resources > Plugins > TinyMCE

Then go to the "Configuration" Tab and enter the class you wish to use (Advanced Image Styles).

If you want the styles to be visible inside the editor (not only your site), you need to specify a css file with the needed styles under Tools > Configuration > Interface & Features - "Path to CSS File"

Edit: Well.. i just tested this, sadly without the desired results. I don’t know the correct syntax for the Advanced Image Style parameter. Whatever i enter, i always get "undefined" as class.
But there is another option: Enter some selectors under Tools > Configuration > Interface & Features - "CSS selectors". You can then select the class from the "-Styles-" Dropdown in the Editor. This works fine.. the only drawback is that the class might be assigned not only to images. You can make the class only affect images by writing something like this in your css file though

Someone with a better understanding of TinyMCE will probably give you a method that will work automatically but, until then, you can go into raw HTML mode by clicking on the "HTML" button in TinyMCE and edit the image tag directly:


Then you can add the desired margins and/or padding in your .CSS file.

Bob

I’m still pretty new here, but I just dealt with this question and with help from others here.

I was able to use the Tools > Configuration > Interface & Features - "CSS selectors to add the styles to the pull down. The styles exit in the Style sheet used for your page. I created a set of classes in my CSS file to add padding to the images and to create colored text boxes that float left or right with text that flows around them. I did this because the settings in the image browser to set the image left or right uses an align "tag" rathter than "float" and IE didn’t wrap the text correctly around the images.

I also found that if I want to add a caption to appear on my page that floats with the image, I just added the caption right behind the image with a line break and then included both of them when I made the selection and applied the style.

Hope this helps.

.imgleft {padding: 10px 10px 10px 0px; float: left; text-align: center}
.imgright {padding: 10px 0px 10px 10px; float: right; text-align: center}
.textleft { font-style: oblique; padding: 10px 10px 10px 10px; width: 30%; float: left; font-size: 90%; background: #B6B9A4; color: #3C3E2F; margin-right: 10px; }
.textright { font-style: oblique; padding: 10px 10px 10px 10px; width: 30%; float: right; font-size: 90%; background: #B6B9A4; color: #3C3E2F; margin-right: 10px; }