Support Center

Customize Your Site Header/Footer

We know it's absolutely imperative that you have 100% freedom when it comes to giving your SocialEngine-powered site its own unique layout. Editing your site's global header/footer content is the best starting point, since this HTML appears at the top and bottom of every page. We've carefully designed our Layout Editor in SE4 to help you achieve this easily.

Suggested Method: Layout Editor

The best method for changing your site header/footer is to use the built-in “Layout Editor” in your SE admin panel.

  1. Log in to your SocialEngine admin panel.
  2. Switch your site into "Development Mode" on your admin panel dashboard. 

    Note that you would change back to live production mode by clicking “Production Mode”. 
  3. Navigate to Appearance > Layout Editor. 
  4. Click the "Editing: Homepage" link to open the page pull-down, and select “Site Header”.
  5. In the Layout Editor, you should now see a white space with a few widgets inside, most likely "Mini Menu", "Site Logo", and "Main Menu". Drag an HTML Block from the "Available Blocks" area to the right into your layout, and drop it above the "Mini Menu" widget.
  6. When you drop it, you'll be prompted to add a title and HTML. Leave the title blank, and insert any HTML you would like to have appear at the top of every page, then save your changes.
  7. Next, click "Editing: Site Header", and select your Site Footer. Drop an HTML Block into the white space, below the "Footer Menu" widget (by default). Insert the HTML code you would like to have appear at the bottom of every page.  (See image in step 6)
  8. If you need to make any changes to your global CSS file (to style your new header/footer), you can do so on the “Theme Editor” page in the “Appearance” menu. 
  9. Choose “theme.css” and scroll down to “HEADER” and/or “FOOTER”. Once done with your edits, click “Save Changes”. *Note: It is recommended to make a clone of default themes and edit your clone instead. This keeps the default code pristine in case of issues later that might require testing with unedited themes. 
  10. When you're satisfied with your changes, switch your site back to "Production Mode" on your admin panel dashboard. (Refer to the first image in this tutorial)

Alternative Method: Edit the global template directly

If you need even more control over your layout, you can edit the global template file directly. This is not a recommended method as it may interfere with any future updates as well as the SocialEngine support staff's ability to troubleshoot any problems that arise with your site. Edit this file at your own risk. The global template file can be found in your SE installation at the path: /application/modules/Core/layouts/scripts/default.tpl

Great work! Please feel free to contact us if you have any questions or need further tutorials. Visit our community to have more interactions with us and other clients or third party developers. We’d love to see you there!
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found