From 308380fe523e45fae595d315d54688e74e97a431 Mon Sep 17 00:00:00 2001 From: Harald Eilertsen Date: Sun, 20 Jul 2025 16:36:48 +0200 Subject: [PATCH 1/3] 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. --- doc/en/tutorials/DerivedTheme1.md | 111 ++++++++++++++---------------- include/plugin.php | 10 +-- 2 files changed, 58 insertions(+), 63 deletions(-) diff --git a/doc/en/tutorials/DerivedTheme1.md b/doc/en/tutorials/DerivedTheme1.md index 3858a335f..00d43e535 100644 --- a/doc/en/tutorials/DerivedTheme1.md +++ b/doc/en/tutorials/DerivedTheme1.md @@ -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 - + * 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: - 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 + false, 'unsupported' => false, 'theme_color' => '', - 'background_color' => '' + 'background_color' => '', + 'extends' => '', ); if(file_exists("view/theme/$theme/experimental")) @@ -1077,10 +1078,11 @@ function theme_include($file, $root = '') { $root = $root . '/'; $theme_info = App::$theme_info; - if(array_key_exists('extends',$theme_info)) - $parent = $theme_info['extends']; - else + if(empty($theme_info['extends'])) { $parent = 'NOPATH'; + } else { + $parent = $theme_info['extends']; + } $theme = Zotlabs\Render\Theme::current(); $thname = $theme[0]; From ae77ab7f20dcc96f5246592dc09c7751f5d3ecc6 Mon Sep 17 00:00:00 2001 From: Harald Eilertsen Date: Sun, 20 Jul 2025 20:28:39 +0200 Subject: [PATCH 2/3] Add derived theme tutorial to help index --- doc/en/toc.html | 1 + 1 file changed, 1 insertion(+) diff --git a/doc/en/toc.html b/doc/en/toc.html index e9ef86fbc..c0d6af459 100644 --- a/doc/en/toc.html +++ b/doc/en/toc.html @@ -79,6 +79,7 @@ From 88227b9155e7fbd4c127958157b7f0cf84af20f2 Mon Sep 17 00:00:00 2001 From: Harald Eilertsen Date: Sun, 20 Jul 2025 20:33:18 +0200 Subject: [PATCH 3/3] Rename derived theme tutorial file --- doc/en/toc.html | 2 +- doc/en/tutorials/{DerivedTheme1.md => derived_theme.md} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename doc/en/tutorials/{DerivedTheme1.md => derived_theme.md} (100%) diff --git a/doc/en/toc.html b/doc/en/toc.html index c0d6af459..84a5e88f9 100644 --- a/doc/en/toc.html +++ b/doc/en/toc.html @@ -79,7 +79,7 @@ diff --git a/doc/en/tutorials/DerivedTheme1.md b/doc/en/tutorials/derived_theme.md similarity index 100% rename from doc/en/tutorials/DerivedTheme1.md rename to doc/en/tutorials/derived_theme.md