SocialEngine – Tweak the Comment and TinyMCE Input Sizes

Need bigger a Comment and/or TinyMCE edit box for your SocialEngine site? This tutorial will show you how to tweak your SocialEngine 4.8.x and was written using SE 4.8.12.

For this tutorial, we recommend using a clone of one of the default themes, or using a custom theme. We don’t recommend editing a stock theme as those should be kept pristine for troubleshooting purposes should the need arise. We cloned the stock “Modern” theme.

TinyMCE popup edit box

1. In the Theme Editor, make sure your cloned or custom theme is set as the active theme. Click to edit the theme.css:
2. Scroll down and find the Popup Form code about a third of the way down the list (if you copy all of the css into an editor such as notepad++ or Netbeans, you can see this code around line 968). 
3. The first line of code there is the code we need. It’s around lines 973-977 if using an editor.
   
   .global_form_popup { padding: 10px 10px 10px 13px; overflow: hidden; }

   1 2 3 4 5 6

   .global_form_popup {   padding: 10px 10px 10px 13px;   overflow: hidden;    }

4. Add the height and width to it as shown, adjusting for how you want them to look. Noting that at a fixed width it will not be responsive.

   .global_form_popup { padding: 10px 10px 10px 13px; overflow: hidden; width: 900px; height: 700px; }

   1 2 3 4 5 6 7

   .global_form_popup { padding: 10px 10px 10px 13px; overflow: hidden; width: 900px; height: 700px; }

5. At the bottom of the file, add the following code:
   /*this will make the site wide tinymce bigger*/ div.mce-edit-area {     height: 500px; } iframe#body_ifr { height: 500px !important; }

   1 2 3 4 5 6 7 8 9 10

   /*this will make the site wide tinymce bigger*/   div.mce-edit-area {       height: 500px;   } iframe#body_ifr {     height: 500px !important; }

Here’s what it looks like after (we made the height smaller to fit the image here):

Comment Input Box

1. Follow step one above to get into the theme.css for your custom theme.
2. Find the Comments css about halfway down the list (if using an editor, it will start around line 1112). 
3. Scroll down until you see the following code (around line 1227 in an editor).
   
   .comments > form > textarea {   width: 100%; }

   1 2 3 4 5 6 7

   .comments > form > textarea   {     width: 100%;   }

4. Add the height with !important as so:

   .comments > form > textarea {   width: 100%; height: 50px !important; }

   1 2 3 4 5 6 7 8 9

   .comments > form > textarea   {     width: 100%;   height: 50px !important;   }

This is how it looks after:

Once done making the changes, make sure you click to “Save Changes”.
**TIP: You might want to clear your site cache and browser cache after making CSS changes.

Questions? No problem! Ask at our official ScriptTechs forum.