Create Theme in SocialEngine

Creating Your Own Theme

Themes are skins that can help you apply a face-lift to your site without having to modify anything inside SocialEngine's core. Along with the layout editor in the admin, 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, so all you need is some basic CSS knowledge and you can start tweaking your site right away.

Creating the files for your new theme

Duplication method via the Theme Editor

Go to Admin->Theme Editor, and click the 'clone' button
Fill in the information as you'd like and pick the theme you want to use as the starting point and continue
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 access to your server, you can simply 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 structure of these files. A constants.css file and an images directory are optional.

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.

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

Editing your theme

The first thing you should do is put your site in Development mode by logging in to your site's Admin area and selecting this option on the main dashboard page. 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 Manger. 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 sprinkle 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 like 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, so the themes were designed to make changes to them easily without having to hunt them down. Many styles that control basic display functionality like lists, content grouping, and drop-downs, are already pre-defined in the core to make theme creation easier; styles that control stuff like 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 any default 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.

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

These lines load the default core styles, and should not be removed.
Constants are referenced by putting the "$" character in front of the constants name.
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 information on how to use cssScaffold, see https://github.com/balupton/CSScaffold

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

My Article