SocialEngine – Tweak the Comment and TinyMCE Input Sizes

ScriptTechs SocialEngine CSS Tutorial

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

SE Tinymce before

  1. In the Theme Editor, make sure your cloned or custom theme is set as the active theme. Click to edit the theme.css:SE edit theme
  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). SE popup code
  3. The first line of code there is the code we need. It’s around lines 973-977 if using an editor.
  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.

  5. At the bottom of the file, add the following code:

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

SE tinymce popup

Comment Input Box

SE comment box before

  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). SE comments css
  3. Scroll down until you see the following code (around line 1227 in an editor).
  4. Add the height with !important as so:

This is how it looks after:

SE comment input box 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.

Content Protection by