Creating a theme based on ZikulaBootstrapTheme
(Core-3.0.0 note: It is easier to use the ExtensionMaker to quickly generate a theme structure. But the information below is still useful if you would rather start with a working theme.)
If you want to create your own theme, the starting point of reusing the ZikulaBoostrapTheme is a good idea. This example is based on the ZikulaBoostrapTheme of Zikula 1.4.5
- First create a new vendor folder inside the extensions folder. It should start with a capital letter. For our example we should start with
Company
. - In this folder we will now create a theme folder. Let us name it
PaulaTheme
. So we now have the following:/src/extensions/Company/PaulaTheme
. - Copy all the files and folder of the folder ZikulaBootstrapTheme into the folder
PaulaTheme
. - Rename
Company/PaulaTheme/ZikulaBootstrapTheme.php
toCompany/PaulaTheme/CompanyPaulaTheme.php
. - Change the content as follows:
namespace Company\PaulaTheme;
use Zikula\ExtensionsModule\AbstractTheme;
class CompanyPaulaTheme extends AbstractTheme
{
}
- Next the
composer.json
file must be changed. It is also located inside the theme root. It should look like:
{
"name": "company/paula-theme",
"version": "1.0.0",
"description": "Our fancy Bootstrap based theme",
"type": "zikula-theme",
"license": "LGPL-3.0+",
"authors": [
{
"name": "Company",
"homepage": "http://company.tld/"
}
],
"autoload": {
"psr-4": { "Company\\PaulaTheme\\": "" }
},
"require": {
"php": ">=5.4.1"
},
"extra": {
"zikula" : {
"core-compatibility": ">=1.4.5",
"class": "Company\\PaulaTheme\\CompanyPaulaTheme",
"displayname": "Paula",
"capabilities": {
"user": {
"theme": true
},
"admin": {
"theme": true,
"icon": "fab fa-bootstrap"
}
}
}
}
}
- In
home.html.twig
,master.html.twig
andadmin.html.twig
you have to change all instance of@ZikulaBoostrapTheme
to@CompanyPaulaTheme
. They are located in/src/extensions/Company/PaulaTheme/Resources/views
- Do the same in
header.html.twig
which is located in/src/extensions/Company/PaulaTheme/Resources/views/include
- Next change
{{ knp_menu_render('ZikulaBootstrapTheme:AdminMenu:menu') }}
with{{ knp_menu_render('CompanyPaulaTheme:AdminMenu:menu') }}
- There is a file named
AdminMenu
in the/Menu
directory. Inside this file you will find the namespace. You have to adjust this accordingly:namespace Company\PaulaTheme\Menu;
- at the end you have to adjust the bootstrap css file. It is located inside
config/theme.yaml
. Normally it looks likebootstrapPath: "@ZikulaBootstrapTheme:css/cerulean.min.css"
. It should get the right path:bootstrapPath: "@CompanyPaulaTheme:css/cerulean.min.css
Now you should be able to activate your theme.