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
- In the Theme Editor, make sure your cloned or custom theme is set as the active theme. Click to edit the theme.css:
- 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).
- The first line of code there is the code we need. It’s around lines 973-977 if using an editor.
123456.global_form_popup{padding: 10px 10px 10px 13px;overflow: hidden;} -
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.
1234567.global_form_popup{padding: 10px 10px 10px 13px;overflow: hidden;width: 900px;height: 700px;} - At the bottom of the file, add the following code:
12345678910/*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
- Follow step one above to get into the theme.css for your custom theme.
- Find the Comments css about halfway down the list (if using an editor, it will start around line 1112).
- Scroll down until you see the following code (around line 1227 in an editor).
1234567.comments > form > textarea{width: 100%;} -
Add the height with !important as so:
123456789.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.