-## Expand an existing Theme
-
-### Theme Variations
-
-Many themes are more *theme families* than only one theme.
-*duepunto zero* and *vier* allow easily to add new theme variation.
-We will go through the process of creating a new variation for *duepunto zero*.
-The same (well almost, some names change) procedure applies to the *vier* theme.
-And similar steps are needed for *quattro* but this theme is using [lesscss](http://lesscss.org/#docs) to maintain the CSS files..
-
-In
-
- /view/theme/duepuntozero/deriv
-
-you find a couple of CSS files that define color derivations from the duepunto theme.
-These resemble some of the now as unsupported marked themes, that were inherited by the duepunto theme.
-Darkzero and Easter Bunny for example.
-
-The selection of the colorset is done in a combination of a template for a new form in the settings and aome functions in the theme.php file.
-The template (theme_settings.tpl)
-
- {{include file="field_select.tpl" field=$colorset}}
- <div class="settings-submit-wrapper">
- <input type="submit" value="{{$submit}}" class="settings-submit" name="duepuntozero-settings-submit" />
- </div>
-
-defines a formular consisting of a [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) pull-down which contains all aviable variants and s submit button.
-See the documentation about [SMARTY3 templates](/help/snarty3-templates.md) for a summary of friendica specific blocks other than the select element.
-But we don't really need to change anything at the template itself.
-
-The template alone wont work though.
-You make friendica aware of its existance and tell it how to use the template file, by defining a config.php file.
-It needs to define at least the following functions
-
-* theme_content
-* theme_post
-
-and may also define functions for the admin interface
-
-* theme_admin
-* theme_admin_post.
-
-theme_content and theme_admin are used to make the form available in the settings, repectively the admin panel.
-The _post functions handle the processing of the send form, in this case they save to selected variand in friendicas database.
-
-To make your own variation appear in the menu, all you need to do is to create a new CSS file in the deriv directoy and include it in the array in the config.php:
-
- $colorset = array(
- 'default'=>DI::l10n()->t('default'),
- 'greenzero'=>DI::l10n()->t('greenzero'),
- 'purplezero'=>DI::l10n()->t('purplezero'),
- 'easterbunny'=>DI::l10n()->t('easterbunny'),
- 'darkzero'=>DI::l10n()->t('darkzero'),
- 'comix'=>DI::l10n()->t('comix'),
- 'slackr'=>DI::l10n()->t('slackr'),
- );
-
-the 1st part of the line is the name of the CSS file (without the .css) the 2nd part is the common name of the variant.
-Calling the DI::l10n()->t() function with the common name makes the string translateable.
-The selected 1st part will be saved in the database by the theme_post function.
-
- function theme_post(App $a){
- // non local users shall not pass
- if (! local_user()) {
- return;
- }
- // if the one specific submit button was pressed then proceed
- if (isset($_POST['duepuntozero-settings-submit'])){
- // and save the selection key into the personal config of the user
- DI::pConfig()->set(local_user(), 'duepuntozero', 'colorset', $_POST['duepuntozero_colorset']);
- }
- }
-
-Now that this information is set in the database, what should friendica do with it?
-For this, have a look at the theme.php file of the *duepunto zero*.
-There you'll find somethink alike
-
- $colorset = DI::pConfig()->get( local_user(), 'duepuntozero','colorset');
- if (!$colorset)
- $colorset = DI::config()->get('duepuntozero', 'colorset');
- if ($colorset) {
- if ($colorset == 'greenzero')
- DI::page()['htmlhead'] .= '<link rel="stylesheet" href="view/theme/duepuntozero/deriv/greenzero.css" type="text/css" media="screen" />'."\n";
- /* some more variants */
- }
-
-which tells friendica to get the personal config of a user.
-Check if it is set and if not look for the global config.
-And finally if a config for the colorset was found, apply it by adding a link to the CSS file into the HTML header of the page.
-So you'll just need to add a if selection, fitting your variant keyword and link to the CSS file of it.
-
-Done.
-Now you can use the variant on your system.
-But remember once the theme.php or the config.php you have to readd your variant to them.
-If you think your color variation could be benifical for other friendica users as well, feel free to generate a pull request at github so we can include your work into the repository.
-
-### Inheritation
-
-Say, you like the duepuntozero but you want to have the content of the outer columns left and right exchanged.
-That would be not a color variation as shown above.
-Instead we will create a new theme, duepuntozero_lr, inherit the properties of duepuntozero and make small changes to the underlying php files.
-
-So create a directory called duepunto_lr and create a file called theme.php with your favorite text editor.
-The content of this file should be something like
-
- <?php
- /* meta informations for the theme, see below */
- use Friendica\App;
-
- function duepuntozero_lr_init(App $a) {
- $a->setThemeInfoValue('extends', 'duepuntozero');
-
- $a->set_template_engine('smarty3');
- /* and more stuff e.g. the JavaScript function for the header */
- }
-
-Next take the default.php file found in the /view direcotry and exchange the aside and right_aside elements.
-So the central part of the file now looks like this:
-
- <body>
- <?php if(!empty($page['nav'])) echo $page['nav']; ?>
- <aside><?php if(!empty($page['right_aside'])) echo $page['right_aside']; ?></aside>
- <section><?php if(!empty($page['content'])) echo $page['content']; ?>
- <div id="page-footer"></div>
- </section>
- <right_aside><?php if(!empty($page['aside'])) echo $page['aside']; ?></right_aside>
- <footer><?php if(!empty($page['footer'])) echo $page['footer']; ?></footer>
- </body>
-
-Finally we need a style.css file, inheriting the definitions from the parent theme and containing out changes for the new theme.
-***Note***:You need to create the style.css and at lest import the base CSS file from the parent theme.
-
- @import url('../duepuntozero/style.css');
-
-Done.
-But I agree it is not really useful at this state.
-Nevertheless, to use it, you just need to activate in the admin panel.
-That done, you can select it in the settings like any other activated theme.
-