Support Center

Creating Your Own Theme

Themes control the look of your site. With the right theme, you can make your site stand out among the competition and really give your members a great experience. Themes can be thought of as skins that can help you transform your site without having to modify anything inside SocialEngine's core. With the Theme Editor in the Admin Panel, you can customize your site quite a bit without having to touch any PHP or HTML files.

Themes only affect the styling part of your site. All you need is some basic CSS or LESS knowledge and you can start tweaking your site right away.

Creating the files for your new theme

Duplication method via the Theme Editor

  1. In your Admin Panel navigate to Appearance >Theme Editor. 
  2. Click the “Clone” button.
  3. Fill in the information how you want it, choose the Theme that you want to clone and click “Clone”.
  4. You'll be taken back to the Theme Editor and your newly copied Theme will be available. Activate the Theme in order to start editing it.

Creating files directly

If you have access to your server, you can duplicate an existing theme directory, or create a new theme directory with the name of your choice. Inside your theme directory, you'll need two files: a “theme.css” file and a “manifest.php” file. You can look at some of the other default themes for the structure of these files. A “constants.css” file and an “images” directory are optional. Below, our screenshot shows the default “modern” Theme files.

Your “manifest.php” must define a unique name that is different from the other themes installed on your server. Other data such as “version,” “description,” etc. can also be edited to whatever you want. Below, we show the “modern” theme’s “manifest.php” file.

Make sure to change the permissions on all the files in your theme to 777 if you want to edit your themes via the Theme Editor.

Editing your theme

The first thing you should do before editing your theme is to put your site in Development mode. This will cause SocialEngine to stop caching your CSS files so you can see the effects of your editing.

Your theme contains two primary files, a “theme.css” file and a “constants file”, which you can edit from the Theme Manager. You can also edit them directly if you have access to the files on your server. They are found in your SocialEngine installation in application/themes/yournewtheme.

What constants.css does

Defines site-wide settings for many CSS styles that are used frequently throughout your site.

SocialEngine uses CSScaffold, a library that sprinkles some programmable goodies into CSS that are common to other programming languages, such as variables, functions, and mixins.

The “constants.css” file defines commonly used values such as “color” and “font-sizes” in one place so that they can be re-used and changed easily.

How to edit constants.css

You can define any new constants, functions, etc. you want and use them in your Theme file. Anything that's allowed by CSScaffold is legal.

The “constants.css” file will override the constants found at application/settings/constants.xml with your own definitions. Keep in mind that deleting a definition in your Theme's constants file won't get rid of the style since it's already in the core. The best way to clear out a constant is to set it to a value that doesn't have any impact on your layout (i.e. theme_border = none;)

What theme.css does

Overrides any styles defined in the core with your own styles. Stylesheets can be found extensively throughout the core. Themes were designed to allow changes to be made to them easily without having to hunt things down. Many styles that control basic display functionality such as lists, content grouping, and drop-downs, are already pre-defined in the core to make Theme creation easier; styles that control stuff such as layout, fonts, and colors are usually found in a Theme. You can choose any styles you would like to re-define.

How to edit theme.css

The “theme.css” file is augmented by CSScaffold's library which allows you to use the constants and functions defined in your theme's “constants.css” file in addition to normal CSS styles. At the top of the “theme.css” file you'll notice these lines:

@include "constants.css";
@include "~/application/modules/Core/externals/styles/main.css";
@scan "application/modules" "externals/styles/main.css" "Core";

You'll need to keep this import rule if you have a constants file that defines anything that you'll be using in your “theme.css” file. If you reference anything in your “theme.css” file that doesn't exist in the constants file, your CSS won't be loaded. Note: you can use the @include directive to include any number of user-created CSS files in your theme directory this way.

These lines load the default core styles, and should not be removed:

@include "~/application/modules/Core/externals/styles/main.css"; 
@scan "application/modules" "externals/styles/main.css" "Core";

Constants are referenced by putting the "$" character in front of the constants name:

Example from the “Modern” theme.css: background-color:
$theme_body_background_color;

Mixins can be added to a CSS style definition by putting a "+" character in front of its name. Functions are also called in the same way, with optional parameters being sent inside a pair of parentheses afterwards.

For example, lines 270-272 of the “Modern” theme.css has the following:
.layout_core_menu_main > ul > li a

{
  +noselect;

For information on how to use cssScaffold, see https://github.com/balupton/CSScaffold

Using LESS

Versions 4.9.4 and up include LESS parser support. More information on using LESS in themes can be found here.

Once you're done editing themes, don't forget to put your site back in Production mode so that your site will run efficiently. You can do this from the Admin dashboard.

Custom <head></head> Elements

Note: This requires SEPHP Version 4.9.3 or greater.

From your web server navigate over to application/themes/yournewtheme and create a new file called head.tpl. Whatever is added in this file will be injected into the site's HTML <head></head> element. PHP is supported in this file.

Custom HTML Layout

Note: This requires SEPHP Version 4.9.3 or greater.

The core HTML layout is controlled internally by widgets. Most of what you need to accomplish can be done with just CSS, however if you want full control over the HTML layout navigate over to the folder application/themes/yournewtheme on your web server and create a file called default.tpl. Anything you add in here will replace the site's <body></body> content. PHP is supported here.

Here is an example of how this file can look with information on what PHP class properties can be used.


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!

support@socialengine.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete?b_id=14386