Template Engine (Theming)

[Bogdan]

It would be awesome, if you realize Template Engine (Theming) in UserSpice 5. The most popular PHP Template Engine is Smarty, but it hard to implement.

Why it's important: now if I want to change view of back-end and front-end I need to edit core files that will be updated with new version. There is some views, but they using only for header and footer.

I want something, like in WordPress - core files never edited, they easily updated without loss. Theme files are standalone and not depending from core updates. It called MVC pattern

[mudmin]

Hi! Thanks for the feedback. The version of the template engine we're working on is going to be primarily for the front end in the beginning. It allows you to use either bootstrap 3 or 4. It's pretty easy to implement. The only thing that gets a little complicated (with any template) is how you want to handle your menus. But we'll walk you through it. I expect at least an alpha by mid June. The bones are there.

Sorry for the delay in responding. We had some spam issues and things got lost in the middle.

[Jamezs]

Dear Bogan,

You can already change a lot with CSS if you use the usersc folder. It overwrites the standard styling from the users folder. This will prevent updates from overwriting your own CSS.

There will be a few templates in the new version to get some inspiration on how you could use themes in the new version of Userspice. Like different looking or working nav's or change the appearance or colors from bootstrap elements etc.

[Bogdan]

Hi! 

I know about usersc folder. 

When I say about theming I mean that:

• admin interface (back-end) build-ed on bootstrap from core and no need in changes.
  
• front-end has some file structure (header.php, footer.php etc) and store in themes\default folder.
  

Anyone can create new sub-folder in themes folder and create own theme based on default theme.


For best understanding look on AnchorCMS where it already released:
https://github.com/anchorcms/anchor-cms/...es/default
https://docs.anchorcms.com/theming/file-structure/

[Rob360]

Following.....

I've been trying to use front-end templates from wrapbootstrap.com on userspice but with no success..

It's taking me some time to understand the full structure of all the PHP includes and getting the wrapbootstrap menu and overall html structure incorporated.

Is there anyone out there who has done this successfully and willing to share some tips?!?

[Bogdan]

I see, that in new 4.4 version this future was released and we have something like \usersc\templates\simplex where simplex is a template name.
But I can't understand how it works. It seems that theming is still in development?

[mudmin]

It's still a little in development. Bascially if you want to make your own template, you can copy simplex to another folder and do a find-replace for simplex with your new foldername.

Then there are hooks to do pretty much anything you'd want to do. You can change the css/navigation/functions to your heart's content.

Navigation is complicated no matter what you do, so a lot depends on how many changes you want to make.

We've also separated the backend from the front. Which means your template will change things like the login, account. password reset screens but won't affect the backend dashboard etc.

[Bogdan]

It nice to hear that you separate back-end (admin panel) from user's front-end in versions.

I hope in feature it will be more separated and site templates will not be affected from admin templates. For example, admin panel built on Bootstrap 3 and main site on Bootstrap 4 and it works fine together.

I think now it's time to talk about theme engine. For example, if we using Smarty than navbar file may have a such structure:

PHP Code:

<ul>
{foreach from=$menus item="menu"} 
<li><a href="index.php?p={$menu.link}">{$menu.name} - {$menu.subMenu.link}</a> 
{if $menu.subMenus != ""} 
<ul> 
{foreach from=$menu.subMenus item="subMenu"} 
<li><a href="index.php?p={$subMenu.link}">{$subMenu.name}</a></li> 
{/foreach} 
</ul> 
{/if}</li>
{/foreach} 
<ul> 


So we can design our menu as we want without editing core files. I'm not sure that Smarty is a good engine, but many CMS using it (Prestashop, DLE). Here is the list of theme engines:
http://acmeextension.com/best-templating-engine/

[mudmin]

Right now themes do not affect the backend at all. Your front end theme doesn't need bootstrap at all.

I would definitely be interested in checking out smarty.

The problem with navigation (and bootstrap in general) is that there's not one particular way to do it.

Some boostrap themes wrap dropdowns in ul tags. Others have divs with custom classes. Stuff like that.

So although we can make a menu tree in the db, we can't auto render it without knowing what kind of format the template is looking for.

This is why we offer both db based and file based (just code your nav however you want it) navigation.

I will be the first to say that I don't like the interface of the db nav and I would definitely be open to changing it if there was a better way.

[Bogdan]

Many CMS rendering menu like Bootstrap (as <ul> list elements) - I think it universal solution.
Also, everyone is able to get menu from DB as php array and render it as want