mirror of
https://framagit.org/hubzilla/core.git
synced 2026-06-21 00:52:33 -04:00
Add 'extends' attribute to theme info
To create a derived (or child) theme, the array held in `App::$theme_info` must contain a key `extends` that contains the name of the parent theme as a value. The derived theme tutorial would suggest adding the key in the `themename_init()` function, however this does not work. The theme info is repopulated from the theme info file after the theme init function has run, and so the `extends` key disappears. This patch adds `extends` as a first class attribute for themes, so that it can be specified directly in the theme info in the top file comment block. It also updates the derived theme tutorial to reflect this change.
This commit is contained in:
Harald Eilertsen
@@ -1,96 +1,89 @@
|
||||
### Creating a Derived Theme
|
||||
## Creating a Derived Theme
|
||||
|
||||
**Lesson 1**
|
||||
### Lesson 1 – Getting started
|
||||
|
||||
A derived theme takes most of the settings from its "parent" theme and lets you change a few things to your liking without creating an entire theme package.
|
||||
A derived theme takes most of the settings from its "parent" theme and lets you change a few things to your liking without creating an entire theme package.
|
||||
|
||||
|
||||
To create a derived theme, first choose a name. For our example we'll call our theme 'mytheme'. Hopefully you'll be a bit more creative. But throughout this document, wherever you see 'mytheme', replace that with the name you chose.
|
||||
|
||||
**Directory Structure**
|
||||
#### Directory Structure
|
||||
|
||||
First you need to create a theme directory structure. We'll keep it simple. We need a php directory and a css directory. Here are the Unix/Linux commands to do this. Assume that 'mywebsite' is your top level hubzilla folder.
|
||||
First you need to create a theme directory structure. We'll keep it simple. We need a php directory and a css directory. Here are the Unix/Linux commands to do this. Assume that 'mywebsite' is your top level hubzilla folder.
|
||||
|
||||
|
||||
cd mywebsite
|
||||
mkdir view/theme/mytheme
|
||||
mkdir view/theme/mytheme/css
|
||||
mkdir view/theme/mytheme/php
|
||||
```
|
||||
$ cd mywebsite
|
||||
$ mkdir view/theme/mytheme
|
||||
$ mkdir view/theme/mytheme/css
|
||||
$ mkdir view/theme/mytheme/php
|
||||
```
|
||||
|
||||
#### The Theme Info file
|
||||
|
||||
Great. Now we need a couple of files. The first one is your theme info file, which describes the theme.
|
||||
|
||||
It will be called view/theme/mytheme/php/theme.php (clever name huh?)
|
||||
It will be called `view/theme/mytheme/php/theme.php` (clever name huh?)
|
||||
|
||||
Inside it, put the following information - edit as needed
|
||||
|
||||
<?php
|
||||
|
||||
/**
|
||||
* * Name: Mytheme
|
||||
* * Description: Sample Derived theme
|
||||
* * Version: 1.0
|
||||
* * Author: Your Name
|
||||
* * Compat: Red [*]
|
||||
*
|
||||
*/
|
||||
|
||||
function mytheme_init(&$a) {
|
||||
|
||||
App::$theme_info['extends'] = 'redbasic';
|
||||
```php
|
||||
<?php
|
||||
/*
|
||||
* Name: Mytheme
|
||||
* Description: Sample Derived theme
|
||||
* Version: 1.0
|
||||
* Author: Your Name <your fedi handle (optional)>
|
||||
* Extends: redbasic
|
||||
*/
|
||||
```
|
||||
|
||||
Remember to rename the `mytheme_init` function with your theme name. In this case we will be extending the theme 'redbasic'.
|
||||
|
||||
}
|
||||
|
||||
|
||||
Remember to rename the mytheme_init function with your theme name. In this case we will be extending the theme 'redbasic'.
|
||||
|
||||
#### The PCSS file and style.css
|
||||
|
||||
Now create another file. We call this a PCSS file, but it's really a PHP file.
|
||||
|
||||
The file is called view/theme/mytheme/php/style.php
|
||||
The file is called `view/theme/mytheme/php/style.php`.
|
||||
|
||||
In it, put the following:
|
||||
|
||||
<?php
|
||||
|
||||
require_once('view/theme/redbasic/php/style.php');
|
||||
|
||||
echo @file_get_contents('view/theme/mytheme/css/style.css');
|
||||
```php
|
||||
<?php
|
||||
|
||||
define('MY_THEME_ROOT', dirname(__DIR__));
|
||||
define('PROJECT_THEME_ROOT', PROJECT_BASE . '/view/theme');
|
||||
|
||||
require_once(PROJECT_THEME_ROOT . '/redbasic/php/style.php');
|
||||
echo file_get_contents(MY_THEME_ROOT . '/css/style.css');
|
||||
```
|
||||
|
||||
That's it. This tells the software to read the PCSS information for the redbasic theme first, and then read our CSS file which will just consist of changes we want to make from our parent theme (redbasic).
|
||||
That's it. This tells the software to read the PCSS information for the redbasic theme first, and then read our CSS file which will just consist of changes we want to make from our parent theme (redbasic).
|
||||
|
||||
Now create the actual CSS file for your theme. Put it in view/theme/mytheme/css/style.css (where we just told the software to look for it). For our example, we'll just change the body background color so you can see that it works. You can use any CSS you'd like.
|
||||
Now create the actual CSS file for your theme. Put it in `view/theme/mytheme/css/style.css` (where we just told the software to look for it). For our example, we'll just change the body background color so you can see that it works. You can use any CSS you'd like.
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: #DDD;
|
||||
}
|
||||
```
|
||||
|
||||
body {
|
||||
background-color: #DDD;
|
||||
}
|
||||
You've just successfully created a derived theme. This needs to be enabled in the admin "themes" panel, and then anybody on the site can use it by selecting it in Settings->Display Settings as their default theme.
|
||||
|
||||
#### Theme configuration and schemas
|
||||
|
||||
You've just successfully created a derived theme. This needs to be enabled in the admin "themes" panel, and then anybody on the site can use it by selecting it in Settings->Display Settings as their default theme.
|
||||
If you want to keep the various configuration options for the derived theme, you have to add a configuration class for your child theme.
|
||||
|
||||
**Lesson 2**
|
||||
Add another file, this time in `view/theme/mytheme/php/config.php`. Add the following content to it:
|
||||
|
||||
If you want to use the redbasic schemas for your derived theme, you have to do a bit more.
|
||||
```php
|
||||
<?php
|
||||
namespace Zotlabs\Theme;
|
||||
|
||||
Do everything as above, but don't create view/theme/mytheme/php/style.php, but copy instead view/theme/redbasic/php/style.php to view/theme/mytheme/php/style.php. Modify that file and remove (or comment out) these two lines:
|
||||
require_once 'view/theme/redbasic/php/config.php';
|
||||
|
||||
if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'redbasic')
|
||||
set_pconfig(local_channel(), 'redbasic', 'schema', '---');
|
||||
class MythemeConfig extends RedbasicConfig {
|
||||
}
|
||||
```
|
||||
|
||||
Also add this line at the bottom:
|
||||
|
||||
echo @file_get_contents('view/theme/mytheme/css/style.css');
|
||||
|
||||
To show the schema selector you have to copy view/theme/redbasic/tpl/theme_settings.tpl to view/theme/mytheme/tpl/theme_settings.tpl. Modify that file and replace the lines:
|
||||
|
||||
{{if $theme == redbasic}}
|
||||
{{include file="field_select.tpl" field=$schema}}
|
||||
{{/if}}
|
||||
|
||||
with:
|
||||
|
||||
{{include file="field_select.tpl" field=$schema}}
|
||||
We leave the class itself empty, so that it will simply inherit the configuration and settings from the parent theme, in this case Redbasic. This will automatically make the settings and scheme selection from Redbasic available to your child theme as well.
|
||||
|
||||
Reference in New Issue
Block a user