Create New Theme for Sngine

Making new changes in Sngine to change the look and feel of your website/network is very simple, We divided this tutorial to 2 parts.

Part 1: Change Colors (CSS changes only)

For minor edits like change colors you can start with admin panel -> design where you can change some colors and add your own CSS

After any new updates or releases you will never lose these changes so it’s totally recommended for edit the default theme colors or CSS without the headache of migration your edits after each new release.

Now I want to edit some CSS but where I can find the class name?

The best way is using the browser dev tools like Chrome Dev tools and inspect element to know the class name

Check this to learn more about Chrome Dev Tools:

https://developer.chrome.com/devtools

For Example:

Change the post container background color from white to something else

After inspect element the class name is “.post“, But where I can edit the background? You can edit the style.css file located in the theme folder (Not Recommended) located here “content\themes\default\css

But the best from the admin panel -> design add you own CSS to override the default CSS like this


Part 2: Change Structure (HTML changes)

Sngine using Smarty PHP template engine which is the best way to separate the HTML code (The view) from the PHP code (The Control)

Smarty is a template engine for PHP, facilitating the separation of presentation (HTML/CSS) from application logic. This implies that PHP code is application logic, and is separated from the presentation

You can learn more about it from here:

https://www.smarty.net/about_smarty

Now back to Sngine to create a new theme for Sngine you have 2 ways.

1- Edit the default theme

2- Add a new one (Recommended)

It’s better to clone the default theme and start from there, but How?

Go to “content\themes” and make a copy from the “default” folder and name it as you want (with no spaces of special characters) for exmaple “my_theme” or “flat” or “material” … etc

Note: Don’t forget after make a copy for your theme to empty both folders “cache” & “templates_compiled” to not copy the default theme cached files

Now you will go to the admin panel and add a new theme and mark it as default theme and the name must be the same as you folder name for exmaple “my_theme” or “flat” or “material” … etc

By doing this, with every new release or update you will just need to migrate your theme with the new changes in the default theme.

You can use something like this app for migration. https://www.araxis.com/merge/

Lets see the theme folder structure

  • “cache” – For caching the CSS for better performance (DON’T EDIT)
  • “css” – All theme styles or CSS files (YOU CAN EDIT)
  • “images” – All theme images located here (YOU CAN EDIT)
  • “templates” – All Sngine templates located here (YOU CAN EDIT)
  • “templates_compiled”  – For caching the templates for better performance (DON’T EDIT)

Templates ended with “.tpl” for example the home page template located here “templates/index.tpl” and contain the HTML code that you can edit with any editor as you want.

templates can contain other templates like “_header.tpl” & “_footer.tpl”

You can open the templates and start trace the code with yourself and it’s very easy to follow and understand and If you or your developer have any questions related to our code structure or Sngine database schema we will answer you with no problem.

For any help you can open support ticket here and our team will help you: https://www.zamblek.com/support

Also you can check this blog post to learn how to add new page:

https://blog.sngine.com/how-to-create-new-pages-in-sngine/

That’s it.

Happy Sngine 😉