nupplaPhil/help
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
help/developer/themes/index.html
Friendica Robot db3e579467 d58f62838e
2022-07-27 21:01:35 +00:00

3757 lines
93 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Friendica is a decentralised communications platform that integrates social communication. Our platform links to independent social projects and corporate services.">
<meta name="author" content="The Friendica project">
<link rel="canonical" href="https://friendi.ca/developer/themes/">
<link rel="icon" href="../../assets/images/friendica-32.png">
<meta name="generator" content="mkdocs-1.3.0, mkdocs-material-8.3.8">
<title>Themes - Friendica documentation</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.1d29e8d0.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.cbb835fc.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../assets/stylesheets/friendica.css">
<script>__md_scope=new URL("../..",location),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="" data-md-color-primary="none" data-md-color-accent="none">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#themes" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="https://friendi.ca" title="Friendica documentation" class="md-header__button md-logo" aria-label="Friendica documentation" data-md-component="logo">
<img src="../../assets/images/friendica.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Friendica documentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Themes
</span>
</div>
</div>
</div>
<div class="md-header__option">
<div class="md-select">
<button class="md-header__button md-icon" aria-label="Select language">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7 1.62-4.33L19.12 17h-3.24Z"/></svg>
</button>
<div class="md-select__inner">
<ul class="md-select__list">
<li class="md-select__item">
<a href="./" hreflang="en" class="md-select__link">
English
</a>
</li>
<li class="md-select__item">
<a href="../../de/developer/themes/" hreflang="de" class="md-select__link">
Deutsch
</a>
</li>
</ul>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/friendica/friendica" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</div>
<div class="md-source__repository">
friendica/friendica
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-tabs__inner md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../user/account-basics/" class="md-tabs__link">
User
</a>
</li>
<li class="md-tabs__item">
<a href="../../admin/install/" class="md-tabs__link">
Admin
</a>
</li>
<li class="md-tabs__item">
<a href="../" class="md-tabs__link md-tabs__link--active">
Developer
</a>
</li>
<li class="md-tabs__item">
<a href="../../bugs-and-issues/" class="md-tabs__link">
Bugs and Issues
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="https://friendi.ca" title="Friendica documentation" class="md-nav__button md-logo" aria-label="Friendica documentation" data-md-component="logo">
<img src="../../assets/images/friendica.svg" alt="logo">
</a>
Friendica documentation
</label>
<div class="md-nav__source">
<a href="https://github.com/friendica/friendica" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</div>
<div class="md-source__repository">
friendica/friendica
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
Home
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2">
User
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="User" data-md-level="1">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
User
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_1" type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2_1">
First Steps
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="First Steps" data-md-level="2">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
First Steps
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../user/account-basics/" class="md-nav__link">
Account Basics
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_1_2" type="checkbox" id="__nav_2_1_2" >
<label class="md-nav__link" for="__nav_2_1_2">
Quick Start
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Quick Start" data-md-level="3">
<label class="md-nav__title" for="__nav_2_1_2">
<span class="md-nav__icon md-icon"></span>
Quick Start
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../user/quick-start/guide/" class="md-nav__link">
Start
</a>
</li>
<li class="md-nav__item">
<a href="../../user/quick-start/network/" class="md-nav__link">
Network
</a>
</li>
<li class="md-nav__item">
<a href="../../user/quick-start/groups-and-pages/" class="md-nav__link">
Groups & Pages
</a>
</li>
<li class="md-nav__item">
<a href="../../user/quick-start/making-new-friends/" class="md-nav__link">
Making new friends
</a>
</li>
<li class="md-nav__item">
<a href="../../user/quick-start/finally/" class="md-nav__link">
Finally
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../user/text-editor/" class="md-nav__link">
Text editor
</a>
</li>
<li class="md-nav__item">
<a href="../../user/bbcode/" class="md-nav__link">
BBCode
</a>
</li>
<li class="md-nav__item">
<a href="../../user/text-comment/" class="md-nav__link">
Comments
</a>
</li>
<li class="md-nav__item">
<a href="../../user/accesskeys/" class="md-nav__link">
Accesskeys
</a>
</li>
<li class="md-nav__item">
<a href="../../user/events/" class="md-nav__link">
Events
</a>
</li>
<li class="md-nav__item">
<a href="../../user/keyboard-shortcuts/" class="md-nav__link">
Shortcuts
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_2" type="checkbox" id="__nav_2_2" >
<label class="md-nav__link" for="__nav_2_2">
You and other users
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="You and other users" data-md-level="2">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
You and other users
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../user/connectors/" class="md-nav__link">
Connectors
</a>
</li>
<li class="md-nav__item">
<a href="../../user/making-friends/" class="md-nav__link">
Making friends
</a>
</li>
<li class="md-nav__item">
<a href="../../user/groups-and-privacy/" class="md-nav__link">
Groups & Privacy
</a>
</li>
<li class="md-nav__item">
<a href="../../user/tags-and-mentions/" class="md-nav__link">
Tags & Mentions
</a>
</li>
<li class="md-nav__item">
<a href="../../user/forums/" class="md-nav__link">
Forums
</a>
</li>
<li class="md-nav__item">
<a href="../../user/chats/" class="md-nav__link">
Chats
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_3" type="checkbox" id="__nav_2_3" >
<label class="md-nav__link" for="__nav_2_3">
Further information
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Further information" data-md-level="2">
<label class="md-nav__title" for="__nav_2_3">
<span class="md-nav__icon md-icon"></span>
Further information
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../user/move-account/" class="md-nav__link">
Move account
</a>
</li>
<li class="md-nav__item">
<a href="../../user/export-import-contacts/" class="md-nav__link">
Import / Export Contacts
</a>
</li>
<li class="md-nav__item">
<a href="../../user/remove-account/" class="md-nav__link">
Remove account
</a>
</li>
<li class="md-nav__item">
<a href="../../user/two-factor-authentication/" class="md-nav__link">
2FA
</a>
</li>
<li class="md-nav__item">
<a href="../../user/faq/" class="md-nav__link">
FAQ
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3">
Admin
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Admin" data-md-level="1">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Admin
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3_1" type="checkbox" id="__nav_3_1" >
<label class="md-nav__link" for="__nav_3_1">
Installation
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Installation" data-md-level="2">
<label class="md-nav__title" for="__nav_3_1">
<span class="md-nav__icon md-icon"></span>
Installation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../admin/install/" class="md-nav__link">
Installation
</a>
</li>
<li class="md-nav__item">
<a href="../../admin/update/" class="md-nav__link">
Update
</a>
</li>
<li class="md-nav__item">
<a href="../../admin/migrate/" class="md-nav__link">
Migrate
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3_2" type="checkbox" id="__nav_3_2" >
<label class="md-nav__link" for="__nav_3_2">
Configuration
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Configuration" data-md-level="2">
<label class="md-nav__title" for="__nav_3_2">
<span class="md-nav__icon md-icon"></span>
Configuration
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../admin/settings/" class="md-nav__link">
Settings
</a>
</li>
<li class="md-nav__item">
<a href="../../admin/config/" class="md-nav__link">
Config Values
</a>
</li>
<li class="md-nav__item">
<a href="../../admin/ssl/" class="md-nav__link">
SSL
</a>
</li>
<li class="md-nav__item">
<a href="../../admin/improve-performance/" class="md-nav__link">
Improve Performance
</a>
</li>
<li class="md-nav__item">
<a href="../../admin/tools/" class="md-nav__link">
Tools
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3_3" type="checkbox" id="__nav_3_3" >
<label class="md-nav__link" for="__nav_3_3">
Third Party
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Third Party" data-md-level="2">
<label class="md-nav__title" for="__nav_3_3">
<span class="md-nav__icon md-icon"></span>
Third Party
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../admin/installing-connectors/" class="md-nav__link">
Connectors
</a>
</li>
<li class="md-nav__item">
<a href="../../admin/install-ejabberd/" class="md-nav__link">
Install ejabberd
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../admin/faq/" class="md-nav__link">
FAQ
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4">
Developer
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Developer" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Developer
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../" class="md-nav__link">
Get Started
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" >
<label class="md-nav__link" for="__nav_4_2">
Set Up
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Set Up" data-md-level="2">
<label class="md-nav__title" for="__nav_4_2">
<span class="md-nav__icon md-icon"></span>
Set Up
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../github/" class="md-nav__link">
GitHub
</a>
</li>
<li class="md-nav__item">
<a href="../vagrant/" class="md-nav__link">
Vagrant
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" checked>
<label class="md-nav__link" for="__nav_4_3">
Code structure
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Code structure" data-md-level="2">
<label class="md-nav__title" for="__nav_4_3">
<span class="md-nav__icon md-icon"></span>
Code structure
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../domain-driven-design/" class="md-nav__link">
DDD
</a>
</li>
<li class="md-nav__item">
<a href="../addons/" class="md-nav__link">
Addons
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
Themes
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
Themes
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#styling" class="md-nav__link">
Styling
</a>
</li>
<li class="md-nav__item">
<a href="#templates" class="md-nav__link">
Templates
</a>
</li>
<li class="md-nav__item">
<a href="#javascript" class="md-nav__link">
Javascript
</a>
</li>
<li class="md-nav__item">
<a href="#expand-an-existing-theme" class="md-nav__link">
Expand an existing Theme
</a>
<nav class="md-nav" aria-label="Expand an existing Theme">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#theme-variations" class="md-nav__link">
Theme Variations
</a>
</li>
<li class="md-nav__item">
<a href="#inheritance" class="md-nav__link">
Inheritance
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#creating-a-theme-from-scratch" class="md-nav__link">
Creating a Theme from Scratch
</a>
</li>
<li class="md-nav__item">
<a href="#special-files" class="md-nav__link">
Special Files
</a>
<nav class="md-nav" aria-label="Special Files">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#unsupported" class="md-nav__link">
unsupported
</a>
</li>
<li class="md-nav__item">
<a href="#readmemd" class="md-nav__link">
README(.md)
</a>
</li>
<li class="md-nav__item">
<a href="#screenshotpngjpg" class="md-nav__link">
screenshot.[png|jpg]
</a>
</li>
<li class="md-nav__item">
<a href="#themephp" class="md-nav__link">
theme.php
</a>
</li>
<li class="md-nav__item">
<a href="#defaultphp" class="md-nav__link">
default.php
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../smarty3-templates/" class="md-nav__link">
Smarty3
</a>
</li>
<li class="md-nav__item">
<a href="../addon-storage-backend/" class="md-nav__link">
Addon Storage Backend
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_4" type="checkbox" id="__nav_4_4" >
<label class="md-nav__link" for="__nav_4_4">
How To
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="How To" data-md-level="2">
<label class="md-nav__title" for="__nav_4_4">
<span class="md-nav__icon md-icon"></span>
How To
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../translations/" class="md-nav__link">
Translations
</a>
</li>
<li class="md-nav__item">
<a href="../composer/" class="md-nav__link">
Composer
</a>
</li>
<li class="md-nav__item">
<a href="../how-to-move-classes-to-src/" class="md-nav__link">
src Migration
</a>
</li>
<li class="md-nav__item">
<a href="../tests/" class="md-nav__link">
Tests
</a>
</li>
<li class="md-nav__item">
<a href="../autoloader/" class="md-nav__link">
Autoloader
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_5" type="checkbox" id="__nav_4_5" >
<label class="md-nav__link" for="__nav_4_5">
Specification
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Specification" data-md-level="2">
<label class="md-nav__title" for="__nav_4_5">
<span class="md-nav__icon md-icon"></span>
Specification
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_5_1" type="checkbox" id="__nav_4_5_1" >
<label class="md-nav__link" for="__nav_4_5_1">
API
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="API" data-md-level="3">
<label class="md-nav__title" for="__nav_4_5_1">
<span class="md-nav__icon md-icon"></span>
API
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../spec/api/" class="md-nav__link">
Usage
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/api/entities/" class="md-nav__link">
Entities
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/api/friendica/" class="md-nav__link">
Friendica
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/api/mastodon/" class="md-nav__link">
Mastodon
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/api/twitter/" class="md-nav__link">
Twitter
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/api/gnu-social/" class="md-nav__link">
GNU Social
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_5_2" type="checkbox" id="__nav_4_5_2" >
<label class="md-nav__link" for="__nav_4_5_2">
Database
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Database" data-md-level="3">
<label class="md-nav__title" for="__nav_4_5_2">
<span class="md-nav__icon md-icon"></span>
Database
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../spec/database/" class="md-nav__link">
Database Tables
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_2fa_app_specific_password/" class="md-nav__link">
2fa_app_specific_password
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_2fa_recovery_codes/" class="md-nav__link">
2fa_recovery_codes
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_2fa_trusted_browser/" class="md-nav__link">
2fa_trusted_browser
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_addon/" class="md-nav__link">
addon
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_apcontact/" class="md-nav__link">
apcontact
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_application/" class="md-nav__link">
application
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_application-marker/" class="md-nav__link">
application-marker
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_application-token/" class="md-nav__link">
application-token
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_attach/" class="md-nav__link">
attach
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_cache/" class="md-nav__link">
cache
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_config/" class="md-nav__link">
config
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_contact/" class="md-nav__link">
contact
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_contact-relation/" class="md-nav__link">
contact-relation
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_conv/" class="md-nav__link">
conv
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_conversation/" class="md-nav__link">
conversation
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_delayed-post/" class="md-nav__link">
delayed-post
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_diaspora-interaction/" class="md-nav__link">
diaspora-interaction
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_endpoint/" class="md-nav__link">
endpoint
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_event/" class="md-nav__link">
event
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_fcontact/" class="md-nav__link">
fcontact
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_fsuggest/" class="md-nav__link">
fsuggest
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_group/" class="md-nav__link">
group
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_group_member/" class="md-nav__link">
group_member
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_gserver/" class="md-nav__link">
gserver
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_gserver-tag/" class="md-nav__link">
gserver-tag
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_hook/" class="md-nav__link">
hook
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_inbox-entry/" class="md-nav__link">
inbox-entry
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_inbox-entry-receiver/" class="md-nav__link">
inbox-entry-receiver
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_inbox-status/" class="md-nav__link">
inbox-status
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_intro/" class="md-nav__link">
intro
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_item-uri/" class="md-nav__link">
item-uri
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_locks/" class="md-nav__link">
locks
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_mail/" class="md-nav__link">
mail
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_mailacct/" class="md-nav__link">
mailacct
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_manage/" class="md-nav__link">
manage
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_notification/" class="md-nav__link">
notification
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_notify/" class="md-nav__link">
notify
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_notify-threads/" class="md-nav__link">
notify-threads
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_oembed/" class="md-nav__link">
oembed
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_openwebauth-token/" class="md-nav__link">
openwebauth-token
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_parsed_url/" class="md-nav__link">
parsed_url
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_pconfig/" class="md-nav__link">
pconfig
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_permissionset/" class="md-nav__link">
permissionset
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_photo/" class="md-nav__link">
photo
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post/" class="md-nav__link">
post
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-category/" class="md-nav__link">
post-category
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-collection/" class="md-nav__link">
post-collection
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-content/" class="md-nav__link">
post-content
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-delivery/" class="md-nav__link">
post-delivery
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-delivery-data/" class="md-nav__link">
post-delivery-data
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-history/" class="md-nav__link">
post-history
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-link/" class="md-nav__link">
post-link
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-media/" class="md-nav__link">
post-media
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-question/" class="md-nav__link">
post-question
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-question-option/" class="md-nav__link">
post-question-option
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-tag/" class="md-nav__link">
post-tag
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-thread/" class="md-nav__link">
post-thread
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-thread-user/" class="md-nav__link">
post-thread-user
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-user/" class="md-nav__link">
post-user
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_post-user-notification/" class="md-nav__link">
post-user-notification
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_process/" class="md-nav__link">
process
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_profile/" class="md-nav__link">
profile
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_profile_field/" class="md-nav__link">
profile_field
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_push_subscriber/" class="md-nav__link">
push_subscriber
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_register/" class="md-nav__link">
register
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_search/" class="md-nav__link">
search
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_session/" class="md-nav__link">
session
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_storage/" class="md-nav__link">
storage
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_subscription/" class="md-nav__link">
subscription
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_tag/" class="md-nav__link">
tag
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_user/" class="md-nav__link">
user
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_user-contact/" class="md-nav__link">
user-contact
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_userd/" class="md-nav__link">
userd
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_verb/" class="md-nav__link">
verb
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_worker-ipc/" class="md-nav__link">
worker-ipc
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/database/db_workerqueue/" class="md-nav__link">
workerqueue
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_5_3" type="checkbox" id="__nav_4_5_3" >
<label class="md-nav__link" for="__nav_4_5_3">
Protocol
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Protocol" data-md-level="3">
<label class="md-nav__title" for="__nav_4_5_3">
<span class="md-nav__icon md-icon"></span>
Protocol
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../spec/protocol/protocol/" class="md-nav__link">
Protocols
</a>
</li>
<li class="md-nav__item">
<a href="../../spec/protocol/message-flow/" class="md-nav__link">
Message Flow
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../bugs-and-issues/" class="md-nav__link">
Bugs and Issues
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#styling" class="md-nav__link">
Styling
</a>
</li>
<li class="md-nav__item">
<a href="#templates" class="md-nav__link">
Templates
</a>
</li>
<li class="md-nav__item">
<a href="#javascript" class="md-nav__link">
Javascript
</a>
</li>
<li class="md-nav__item">
<a href="#expand-an-existing-theme" class="md-nav__link">
Expand an existing Theme
</a>
<nav class="md-nav" aria-label="Expand an existing Theme">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#theme-variations" class="md-nav__link">
Theme Variations
</a>
</li>
<li class="md-nav__item">
<a href="#inheritance" class="md-nav__link">
Inheritance
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#creating-a-theme-from-scratch" class="md-nav__link">
Creating a Theme from Scratch
</a>
</li>
<li class="md-nav__item">
<a href="#special-files" class="md-nav__link">
Special Files
</a>
<nav class="md-nav" aria-label="Special Files">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#unsupported" class="md-nav__link">
unsupported
</a>
</li>
<li class="md-nav__item">
<a href="#readmemd" class="md-nav__link">
README(.md)
</a>
</li>
<li class="md-nav__item">
<a href="#screenshotpngjpg" class="md-nav__link">
screenshot.[png|jpg]
</a>
</li>
<li class="md-nav__item">
<a href="#themephp" class="md-nav__link">
theme.php
</a>
</li>
<li class="md-nav__item">
<a href="#defaultphp" class="md-nav__link">
default.php
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/friendica/friendica/edit/develop/doc/developer/themes.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"/></svg>
</a>
<nav class="md-tags" >
<span class="md-tag">developer</span>
<span class="md-tag">themes</span>
<span class="md-tag">templates</span>
</nav>
<h1 id="themes">Themes<a class="headerlink" href="#themes" title="Permanent link">#</a></h1>
<p>To change the look of friendica you have to touch the themes.
The current default theme is <a href="https://github.com/friendica/friendica/tree/stable/view/theme/vier">Vier</a> but there are numerous others.
Have a look at <a href="https://github.com/bkil/friendica-themes">github.com/bkil/friendica-themes</a> for an overview of the existing themes.
In case none of them suits your needs, there are several ways to change a theme.</p>
<p>So, how to work on the UI of friendica.</p>
<p>You can either directly edit an existing theme.
But you might lose your changes when the theme is updated by the friendica team.</p>
<p>If you are almost happy with an existing theme, the easiest way to cover your needs is to create a new theme, inheritance most of the properties of the parent theme and change just minor stuff.
The below for a more detailed description of theme heritage.</p>
<p>Some themes also allow users to select <em>variants</em> of the theme.
Those theme variants most often contain an additional <a href="https://en.wikipedia.org/wiki/CSS">CSS</a> file to override some styling of the default theme values.
From the themes in the main repository <em>duepunto zero</em> and <em>vier</em> are using these methods for variations.
Quattro is using a slightly different approach.</p>
<p>Third you can start your theme from scratch.
Which is the most complex way to change friendicas look.
But it leaves you the most freedom.
So below for a <em>detailed</em> description and the meaning of some special files.</p>
<h2 id="styling">Styling<a class="headerlink" href="#styling" title="Permanent link">#</a></h2>
<p>If you want to change the styling of a theme, have a look at the themes CSS file.
In most cases, you can find these in</p>
<div class="highlight"><pre><span></span><code>/view/theme/**your-theme-name**/style.css
</code></pre></div>
<p>sometimes, there is also a file called style.php in the theme directory.
This is only needed if the theme allows the user to change certain things of the theme dynamically.
Say the font size or set a background image.</p>
<h2 id="templates">Templates<a class="headerlink" href="#templates" title="Permanent link">#</a></h2>
<p>If you want to change the structure of the theme, you need to change the templates used by the theme.
Friendica themes are using <a href="http://www.smarty.net/">SMARTY3</a> for templating.
The default template can be found in</p>
<div class="highlight"><pre><span></span><code>/view/templates
</code></pre></div>
<p>if you want to override any template within your theme create your version of the template in</p>
<div class="highlight"><pre><span></span><code>/view/theme/**your-theme-name**/templates
</code></pre></div>
<p>any template that exists there will be used instead of the default one.</p>
<h2 id="javascript">Javascript<a class="headerlink" href="#javascript" title="Permanent link">#</a></h2>
<p>The same rule applies to the JavaScript files found in</p>
<div class="highlight"><pre><span></span><code>/js
</code></pre></div>
<p>they will be overwritten by files in</p>
<div class="highlight"><pre><span></span><code>/view/theme/**your-theme-name**/js.
</code></pre></div>
<h2 id="expand-an-existing-theme">Expand an existing Theme<a class="headerlink" href="#expand-an-existing-theme" title="Permanent link">#</a></h2>
<h3 id="theme-variations">Theme Variations<a class="headerlink" href="#theme-variations" title="Permanent link">#</a></h3>
<p>Many themes are more <em>theme families</em> than only one theme.
<em>duepunto zero</em> and <em>vier</em> allow easily to add new theme variation.
We will go through the process of creating a new variation for <em>duepunto zero</em>.
The same (well almost, some names change) procedure applies to the <em>vier</em> theme.
And similar steps are needed for <em>quattro</em> but this theme is using <a href="http://lesscss.org/#docs">lesscss</a> to maintain the CSS files.</p>
<p>In</p>
<div class="highlight"><pre><span></span><code>/view/theme/duepuntozero/deriv
</code></pre></div>
<p>you find a couple of CSS files that define color derivations from the duepunto theme.
These resemble some now as unsupported marked themes, that were inherited by the duepunto theme.
Darkzero and Easter Bunny for example.</p>
<p>The selection of the colorset is done in a combination of a template for a new form in the settings and some functions in the theme.php file.
The template (theme_settings.tpl)</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>{{ &#39;{{include file=&quot;field_select.tpl&quot; field=$colorset}}&#39; }}
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;settings-submit-wrapper&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> {{ &#39;<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;submit&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;{{$submit}}&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;settings-submit&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;duepuntozero-settings-submit&quot;</span> <span class="p">/&gt;</span>&#39; }}
<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div>
<p>defines a formular consisting of a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select">select</a> pull-down which contains all available variants and s submit button.
See the documentation about <a href="../smarty3-templates/">SMARTY3 templates</a> 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.</p>
<p>The template alone won't work though.
You make friendica aware of its existence and tell it how to use the template file, by defining a config.php file.
It needs to define at least the following functions</p>
<ul>
<li>theme_content</li>
<li>theme_post</li>
</ul>
<p>and may also define functions for the admin interface</p>
<ul>
<li>theme_admin</li>
<li>theme_admin_post.</li>
</ul>
<p>theme_content and theme_admin are used to make the form available in the settings, respectively the admin panel.
The _post functions handle the processing of the send-form, in this case they save to selected variant in friendicas database.</p>
<p>To make your own variation appear in the menu, all you need to do is to create a new CSS file in the deriv-directory and include it in the array in the config.php:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="x">$colorset = array(</span>
<a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="x"> &#39;default&#39;=&gt;DI::l10n()-&gt;t(&#39;default&#39;),</span>
<a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a><span class="x"> &#39;greenzero&#39;=&gt;DI::l10n()-&gt;t(&#39;greenzero&#39;),</span>
<a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a><span class="x"> &#39;purplezero&#39;=&gt;DI::l10n()-&gt;t(&#39;purplezero&#39;),</span>
<a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a><span class="x"> &#39;easterbunny&#39;=&gt;DI::l10n()-&gt;t(&#39;easterbunny&#39;),</span>
<a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a><span class="x"> &#39;darkzero&#39;=&gt;DI::l10n()-&gt;t(&#39;darkzero&#39;),</span>
<a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a><span class="x"> &#39;comix&#39;=&gt;DI::l10n()-&gt;t(&#39;comix&#39;),</span>
<a id="__codelineno-1-8" name="__codelineno-1-8" href="#__codelineno-1-8"></a><span class="x"> &#39;slackr&#39;=&gt;DI::l10n()-&gt;t(&#39;slackr&#39;),</span>
<a id="__codelineno-1-9" name="__codelineno-1-9" href="#__codelineno-1-9"></a><span class="x">);</span>
<a id="__codelineno-1-10" name="__codelineno-1-10" href="#__codelineno-1-10"></a><span class="x"> ```</span>
<a id="__codelineno-1-11" name="__codelineno-1-11" href="#__codelineno-1-11"></a>
<a id="__codelineno-1-12" name="__codelineno-1-12" href="#__codelineno-1-12"></a><span class="x">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.</span>
<a id="__codelineno-1-13" name="__codelineno-1-13" href="#__codelineno-1-13"></a><span class="x">Calling the DI::l10n()-&gt;t() function with the common name makes the string translatable.</span>
<a id="__codelineno-1-14" name="__codelineno-1-14" href="#__codelineno-1-14"></a><span class="x">The selected 1st part will be saved in the database by the theme_post function.</span>
<a id="__codelineno-1-15" name="__codelineno-1-15" href="#__codelineno-1-15"></a>
<a id="__codelineno-1-16" name="__codelineno-1-16" href="#__codelineno-1-16"></a><span class="x">```php</span>
<a id="__codelineno-1-17" name="__codelineno-1-17" href="#__codelineno-1-17"></a><span class="cp">&lt;?php</span>
<a id="__codelineno-1-18" name="__codelineno-1-18" href="#__codelineno-1-18"></a><span class="k">function</span> <span class="nf">theme_post</span><span class="p">(</span><span class="nx">App</span> <span class="nv">$a</span><span class="p">){</span>
<a id="__codelineno-1-19" name="__codelineno-1-19" href="#__codelineno-1-19"></a> <span class="c1">// non-local users shall not pass</span>
<a id="__codelineno-1-20" name="__codelineno-1-20" href="#__codelineno-1-20"></a> <span class="k">if</span> <span class="p">(</span><span class="o">!</span> <span class="nx">local_user</span><span class="p">())</span> <span class="p">{</span>
<a id="__codelineno-1-21" name="__codelineno-1-21" href="#__codelineno-1-21"></a> <span class="k">return</span><span class="p">;</span>
<a id="__codelineno-1-22" name="__codelineno-1-22" href="#__codelineno-1-22"></a> <span class="p">}</span>
<a id="__codelineno-1-23" name="__codelineno-1-23" href="#__codelineno-1-23"></a> <span class="c1">// if the one specific submit button was pressed then proceed</span>
<a id="__codelineno-1-24" name="__codelineno-1-24" href="#__codelineno-1-24"></a> <span class="k">if</span> <span class="p">(</span><span class="nb">isset</span><span class="p">(</span><span class="nv">$_POST</span><span class="p">[</span><span class="s1">&#39;duepuntozero-settings-submit&#39;</span><span class="p">])){</span>
<a id="__codelineno-1-25" name="__codelineno-1-25" href="#__codelineno-1-25"></a> <span class="c1">// and save the selection key into the personal config of the user</span>
<a id="__codelineno-1-26" name="__codelineno-1-26" href="#__codelineno-1-26"></a> <span class="nx">DI</span><span class="o">::</span><span class="na">pConfig</span><span class="p">()</span><span class="o">-&gt;</span><span class="na">set</span><span class="p">(</span><span class="nx">local_user</span><span class="p">(),</span> <span class="s1">&#39;duepuntozero&#39;</span><span class="p">,</span> <span class="s1">&#39;colorset&#39;</span><span class="p">,</span> <span class="nv">$_POST</span><span class="p">[</span><span class="s1">&#39;duepuntozero_colorset&#39;</span><span class="p">]);</span>
<a id="__codelineno-1-27" name="__codelineno-1-27" href="#__codelineno-1-27"></a> <span class="p">}</span>
<a id="__codelineno-1-28" name="__codelineno-1-28" href="#__codelineno-1-28"></a><span class="p">}</span>
</code></pre></div>
<p>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 <em>duepunto zero</em>.
There you'll find something alike</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="cp">&lt;?php</span>
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="nv">$colorset</span> <span class="o">=</span> <span class="nx">DI</span><span class="o">::</span><span class="na">pConfig</span><span class="p">()</span><span class="o">-&gt;</span><span class="na">get</span><span class="p">(</span> <span class="nx">local_user</span><span class="p">(),</span> <span class="s1">&#39;duepuntozero&#39;</span><span class="p">,</span><span class="s1">&#39;colorset&#39;</span><span class="p">);</span>
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nv">$colorset</span><span class="p">)</span>
<a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a> <span class="nv">$colorset</span> <span class="o">=</span> <span class="nx">DI</span><span class="o">::</span><span class="na">config</span><span class="p">()</span><span class="o">-&gt;</span><span class="na">get</span><span class="p">(</span><span class="s1">&#39;duepuntozero&#39;</span><span class="p">,</span> <span class="s1">&#39;colorset&#39;</span><span class="p">);</span>
<a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a><span class="k">if</span> <span class="p">(</span><span class="nv">$colorset</span><span class="p">)</span> <span class="p">{</span>
<a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a> <span class="k">if</span> <span class="p">(</span><span class="nv">$colorset</span> <span class="o">==</span> <span class="s1">&#39;greenzero&#39;</span><span class="p">)</span>
<a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a> <span class="nx">DI</span><span class="o">::</span><span class="na">page</span><span class="p">()[</span><span class="s1">&#39;htmlhead&#39;</span><span class="p">]</span> <span class="o">.=</span> <span class="s1">&#39;&lt;link rel=&quot;stylesheet&quot; href=&quot;view/theme/duepuntozero/deriv/greenzero.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;&#39;</span><span class="o">.</span><span class="s2">&quot;</span><span class="se">\n</span><span class="s2">&quot;</span><span class="p">;</span>
<a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a> <span class="cm">/* some more variants */</span>
<a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a><span class="p">}</span>
</code></pre></div>
<p>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 an if selection, fitting your variant keyword and link to the CSS file of it.</p>
<p>Done.
Now you can use the variant on your system.
But remember once the theme.php or the config.php you have to re-add your variant to them.
If you think your color variation could be beneficial for other friendica users as well, feel free to generate a pull request at GitHub, so we can include your work into the repository.</p>
<h3 id="inheritance">Inheritance<a class="headerlink" href="#inheritance" title="Permanent link">#</a></h3>
<p>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.</p>
<p>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</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="cp">&lt;?php</span>
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="cm">/* meta information for the theme, see below */</span>
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="k">use</span> <span class="nx">Friendica\App</span><span class="p">;</span>
<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a>
<a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a><span class="k">function</span> <span class="nf">duepuntozero_lr_init</span><span class="p">(</span><span class="nx">App</span> <span class="nv">$a</span><span class="p">)</span> <span class="p">{</span>
<a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a> <span class="nv">$a</span><span class="o">-&gt;</span><span class="na">setThemeInfoValue</span><span class="p">(</span><span class="s1">&#39;extends&#39;</span><span class="p">,</span> <span class="s1">&#39;duepuntozero&#39;</span><span class="p">);</span>
<a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a>
<a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a> <span class="nv">$a</span><span class="o">-&gt;</span><span class="na">set_template_engine</span><span class="p">(</span><span class="s1">&#39;smarty3&#39;</span><span class="p">);</span>
<a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a> <span class="cm">/* and more stuff e.g. the JavaScript function for the header */</span>
<a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a><span class="p">}</span>
</code></pre></div>
<p>Next take the default.php file found in the /view directory and exchange the aside and right_aside elements.
So the central part of the file now looks like this:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a> <span class="cp">&lt;?php if(!empty($page[&#39;nav&#39;])) echo $page[&#39;nav&#39;]; ?&gt;</span>
<a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a> <span class="p">&lt;</span><span class="nt">aside</span><span class="p">&gt;</span><span class="cp">&lt;?php if(!empty($page[&#39;right_aside&#39;])) echo $page[&#39;right_aside&#39;]; ?&gt;</span><span class="p">&lt;/</span><span class="nt">aside</span><span class="p">&gt;</span>
<a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a> <span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span><span class="cp">&lt;?php if(!empty($page[&#39;content&#39;])) echo $page[&#39;content&#39;]; ?&gt;</span>
<a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;page-footer&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a> <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a> <span class="p">&lt;</span><span class="nt">right_aside</span><span class="p">&gt;</span><span class="cp">&lt;?php if(!empty($page[&#39;aside&#39;])) echo $page[&#39;aside&#39;]; ?&gt;</span><span class="p">&lt;/</span><span class="nt">right_aside</span><span class="p">&gt;</span>
<a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a> <span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span><span class="cp">&lt;?php if(!empty($page[&#39;footer&#39;])) echo $page[&#39;footer&#39;]; ?&gt;</span><span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span>
<a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></div>
<p>Finally, we need a style.css file, inheriting the definitions from the parent theme and containing out changes for the new theme.
<strong><em>Note</em></strong>:You need to create the style.css and at lest import the base CSS file from the parent theme.</p>
<div class="highlight"><pre><span></span><code>@import url(&#39;../duepuntozero/style.css&#39;);
</code></pre></div>
<p>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.</p>
<h2 id="creating-a-theme-from-scratch">Creating a Theme from Scratch<a class="headerlink" href="#creating-a-theme-from-scratch" title="Permanent link">#</a></h2>
<p>Keep patient.
Basically what you have to do is identify which template you have to change, so it looks more like what you want.
Adopt the CSS of the theme accordingly.
And iterate the process until you have the theme the way you want it.</p>
<p><em>Use the source Luke.</em> and don't hesitate to ask in @<a href="https://forum.friendi.ca/profile/developers">developers</a> or @<a href="https://forum.friendi.ca/profile/helpers">helpers</a>.</p>
<h2 id="special-files">Special Files<a class="headerlink" href="#special-files" title="Permanent link">#</a></h2>
<h3 id="unsupported">unsupported<a class="headerlink" href="#unsupported" title="Permanent link">#</a></h3>
<p>If a file with this name (which might be empty) exists in the theme directory, the theme is marked as <em>unsupported</em>.
An unsupported theme may not be selected by a user in the settings.
Users who are already using it won't notice anything.</p>
<h3 id="readmemd">README(.md)<a class="headerlink" href="#readmemd" title="Permanent link">#</a></h3>
<p>The contents of this file, with or without the .md which indicates <a href="https://daringfireball.net/projects/markdown/">Markdown</a> syntax, will be displayed at most repository hosting services and in the theme page within the admin panel of friendica.</p>
<p>This file should contain information you want to let others know about your theme.</p>
<h3 id="screenshotpngjpg">screenshot.[png|jpg]<a class="headerlink" href="#screenshotpngjpg" title="Permanent link">#</a></h3>
<p>If you want to have a preview image of your theme displayed in the settings you should take a screenshot and save it with this name.
Supported formats are PNG and JPEG.</p>
<h3 id="themephp">theme.php<a class="headerlink" href="#themephp" title="Permanent link">#</a></h3>
<p>This is the main definition file of the theme.
In the header of that file, some meta information is stored.
For example, have a look at the theme.php of the <em>quattro</em> theme:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="cp">&lt;?php</span>
<a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a><span class="sd">/**</span>
<a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a><span class="sd"> * Name: Quattro</span>
<a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="sd"> * Version: 0.6</span>
<a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a><span class="sd"> * Author: Fabio &lt;https://kirgroup.com/profile/fabrixxm&gt;</span>
<a id="__codelineno-5-6" name="__codelineno-5-6" href="#__codelineno-5-6"></a><span class="sd"> * Maintainer: Fabio &lt;https://kirgroup.com/profile/fabrixxm&gt;</span>
<a id="__codelineno-5-7" name="__codelineno-5-7" href="#__codelineno-5-7"></a><span class="sd"> * Maintainer: Tobias &lt;https://f.diekershoff.de/profile/tobias&gt;</span>
<a id="__codelineno-5-8" name="__codelineno-5-8" href="#__codelineno-5-8"></a><span class="sd"> */</span>
<a id="__codelineno-5-9" name="__codelineno-5-9" href="#__codelineno-5-9"></a> <span class="sb">```</span>
<a id="__codelineno-5-10" name="__codelineno-5-10" href="#__codelineno-5-10"></a>
<a id="__codelineno-5-11" name="__codelineno-5-11" href="#__codelineno-5-11"></a><span class="sb">You see the definition of the theme&#39;s name, it&#39;s version and the initial author of the theme.</span>
<a id="__codelineno-5-12" name="__codelineno-5-12" href="#__codelineno-5-12"></a><span class="sb">These three pieces of information should be listed.</span>
<a id="__codelineno-5-13" name="__codelineno-5-13" href="#__codelineno-5-13"></a><span class="sb">If the original author is no longer working on the theme, but a maintainer has taken over, the maintainer should be listed as well.</span>
<a id="__codelineno-5-14" name="__codelineno-5-14" href="#__codelineno-5-14"></a><span class="sb">The information from the theme header will be displayed in the admin panel.</span>
<a id="__codelineno-5-15" name="__codelineno-5-15" href="#__codelineno-5-15"></a>
<a id="__codelineno-5-16" name="__codelineno-5-16" href="#__codelineno-5-16"></a><span class="sb">The first thing in file is to import the `</span><span class="nx">App</span><span class="sb">` class from `</span><span class="nx">\Friendica\</span><span class="sb">` namespace.</span>
<a id="__codelineno-5-17" name="__codelineno-5-17" href="#__codelineno-5-17"></a>
<a id="__codelineno-5-18" name="__codelineno-5-18" href="#__codelineno-5-18"></a><span class="sb">```</span><span class="nx">php</span>
<a id="__codelineno-5-19" name="__codelineno-5-19" href="#__codelineno-5-19"></a><span class="k">use</span> <span class="nx">Friendica\App</span><span class="p">;</span>
</code></pre></div>
<p>This will make our job a little easier, as we don't have to specify the full name every time we need to use the <code>App</code> class.</p>
<p>The next crucial part of the theme.php file is a definition of an init function.
The name of the function is <theme-name>_init.
So in the case of quattro it is</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="cp">&lt;?php</span>
<a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a><span class="k">function</span> <span class="nf">quattro_init</span><span class="p">(</span><span class="nx">App</span> <span class="nv">$a</span><span class="p">)</span> <span class="p">{</span>
<a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a> <span class="nv">$a</span><span class="o">-&gt;</span><span class="na">theme_info</span> <span class="o">=</span> <span class="k">array</span><span class="p">();</span>
<a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a> <span class="nv">$a</span><span class="o">-&gt;</span><span class="na">set_template_engine</span><span class="p">(</span><span class="s1">&#39;smarty3&#39;</span><span class="p">);</span>
<a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="p">}</span>
</code></pre></div>
<p>Here we have set the basic theme information, in this case they are empty.
But the array needs to be set.
And we have set the template engine that should be used by friendica for this theme.
At the moment you should use the <em>smarty3</em> engine.
There once was a friendica specific templating engine as well but that is not used anymore.
If you like to use another templating engine, please implement it.</p>
<p>When you want to inherit stuff from another theme you have to <em>announce</em> this in the theme_info:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="x">$a-&gt;setThemeInfoValue(&#39;extends&#39;, &#39;duepuntozero&#39;);</span>
</code></pre></div>
<p>which declares <em>duepuntozero</em> as parent of the theme.</p>
<p>If you want to add something to the HTML header of the theme, one way to do so is by adding it to the theme.php file.
To do so, add something alike</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="x">DI::page()[&#39;htmlhead&#39;] .= &lt;&lt;&lt; EOT</span>
<a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a><span class="x">/* stuff you want to add to the header */</span>
<a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a><span class="x">EOT;</span>
</code></pre></div>
<p>The $a variable holds the friendica application.
So you can access the properties of this friendica session from the theme.php file as well.</p>
<h3 id="defaultphp">default.php<a class="headerlink" href="#defaultphp" title="Permanent link">#</a></h3>
<p>This file covers the structure of the underlying HTML layout.
The default file is in</p>
<div class="highlight"><pre><span></span><code>/view/default.php
</code></pre></div>
<p>if you want to change it, say adding a 4th column for banners of your favourite FLOSS projects, place a new default.php file in your theme directory.
As with the theme.php file, you can use the properties of the $a variable with holds the friendica application to decide what content is displayed.</p>
</article>
</div>
</div>
<a href="#" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
Back to top
</a>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../addons/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Addons" rel="prev">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Previous
</span>
Addons
</div>
</div>
</a>
<a href="../smarty3-templates/" class="md-footer__link md-footer__link--next" aria-label="Next: Smarty3" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
Smarty3
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2010-2022, the Friendica project
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["content.code.annotate", "content.tooltips", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../assets/javascripts/workers/search.b97dbffb.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.0238f547.min.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink