Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Problem centering images.

SevMCSevMC
edited May 2012 in Vanilla 2.0 - 2.8

Hello!

Im using vanilla 2.0.18.4, but I also had this problem with the 2.0.18.3 version.

When I try to center images using CLE editor or Tinymce (they use

<

div align="center"> ) everything is correctly aligned at the editor frame, but when I post the discussion shows it in the left.

Is there any way to fix it?

Thanks.

site: www.makeitsound.org

Best Answer

  • 422422 Developer MVP
    Answer ✓

    No idea. Im not a lover of inline styling, cleditor is so dated. Try buttonbar, because i am sure all inserts are handled using .this css

    There was an error rendering this rich post.

«1

Answers

  • 422422 Developer MVP

    If you know some code, you could wrap a dynamic class around the image, you would need to edit editor files. Then in css, give the class a width that fits your forum, and further set margin:0px auto;

    That should work

    There was an error rendering this rich post.

  • SevMCSevMC
    edited May 2012

    thanks, well I'm prety bad coding anything more than css or html, but maybe I can change the <div align="center"> to <center> in the editor.

  • 422422 Developer MVP

    Center is deprecated. Can you post the actual editor you are using ?

    There was an error rendering this rich post.

  • CLE editor

  • 422422 Developer MVP

    Is it still downloadable as a plugin? If so please post link, i will be in office in twenty mins.

    There was an error rendering this rich post.

  • 422422 Developer MVP

    for curiosity sake ( as cleditor handles all functions within js ) can you post a example post with an image in it that isnt aligned properly.

    There was an error rendering this rich post.

  • sure:

  • 422422 Developer MVP

    Yer just on there now playing .. I tried this in css:

    .Message {width:680px;}
    then
    .Message img {margin:0px auto;}

    But not having much luck.. css seems to be the way to go.

    You have at moment < div style="text-align: center;"> for the image wrap.

    Is that by you or via cleditor

    There was an error rendering this rich post.

  • via cleditor

  • 422422 Developer MVP

    Well ive gone thru cleditor code, it could be added programatically, but I dont see how it is appending div style = text-align:center to an image.

    There was an error rendering this rich post.

  • I was playing with the css and i found that the #body is the one affecting the alignement with the tag text-align: left; but if i dissable ir, the layout crash.

  • Maybe we can reset the align of the .message img css

  • 422422 Developer MVP

    Ive tried that, the issue seems to be how is it doing the inline style, and where is it appending it from. If we can change that we can make it all work.

    There was an error rendering this rich post.

  • 422422 Developer MVP

    Ive tried that, the issue seems to be how is it doing the inline style, and where is it appending it from. If we can change that we can make it all work.

    There was an error rendering this rich post.

  • Any idea?

  • 422422 Developer MVP
    Answer ✓

    No idea. Im not a lover of inline styling, cleditor is so dated. Try buttonbar, because i am sure all inserts are handled using .this css

    There was an error rendering this rich post.

  • will, but I think is kind of limited for the use I'm trying to give the editor, I will try to fix it, If I don't I will use buttonbar.

    Thank you very much for your help and time :)

  • SevMCSevMC
    edited May 2012

    Well, maybe the best way to fix this is change the output from div align="center" to style="text-align:center;".
    Does someone know how to do this?

  • peregrineperegrine MVP
    edited May 2012

    you have to identify the element to change in the selector - but this should give you an idea.

    jQuery('img .Message').css('text-align','center');

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Sign In or Register to comment.