Announcement

Collapse
No announcement yet.

How to change editor size

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to change editor size

    First, go to /js/ckeditor-rollup-500.js

    Find
    Code:
    CKEDITOR.config.height="100px";CKEDITOR.config.width="100%";
    Change height and/or width.

    Then to prevent reflow, go to
    Code:
    admincp > styles manager > edit templates > CSS Templates > css_global.css
    Find
    Code:
    .content-entry-box .ckeditor-bare-box.entry-field
    In that code block, you will find height defined already. Change the value to your desired number to set the height.

    If you want to change width, add
    Code:
    width: 400px;
    Make sure you set height/width in here a little more than you did in the js file. Needs to match up with exact padding values.

    Important

    If you change width, you must make this change also:
    After making the above width change, scroll below a bit and find:
    Code:
    .content-entry-box .cke_editor_ckeditor-bare,
    
    .content-entry-box .cke_editor_ckeditor-bare-video,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-link,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-video-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-link-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-gallery,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-gallery-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-poll,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-poll-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-mediavideo,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-mediagallery,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-mediagallery-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-advanced,
    
    
    #editSignatureDialog .cke_editor_ckeditor-signature {
    
    
    margin-bottom:20px;
    
    
    padding:0;
    
    
    width:99.9% !important;
    
    
    border: {vb:stylevar form_field_border};
    
    
    background: {vb:stylevar form_field_background};
    
    
    -moz-border-radius: 3px;
    
    
    -webkit-border-radius: 3px;
    
    
    border-radius: 3px;
    
    }
    Remove the width: 99.9% !important; line.


    Please let me know if this is not working or if you need to enhance it in some other way.
    Last edited by Riasat; Thu 28th Mar '13, 9:03am.

  • #2
    Thanks.. this works; however you have a type-o:

    Set height.
    Add


    Code:



    width: 400px;

    should be
    height: 400px;


    Comment


    • #3
      It wasn't a typo but I have edited it for clarity. Thanks for the feedback.

      Comment

      Related Topics

      Collapse

      Working...
      X