telegram-crawler/data/corefork.telegram.org/themes.html

144 lines
8.6 KiB
HTML
Raw Normal View History

2022-02-23 06:45:45 +01:00
<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title>Creating Custom Cloud Themes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Official Telegram apps support custom cloud themes as of version 5.11. Everyone is welcome to create and share their themes.…">
<meta property="og:title" content="Creating Custom Cloud Themes">
<meta property="og:image" content="">
<meta property="og:description" content="Official Telegram apps support custom cloud themes as of version 5.11. Everyone is welcome to create and share their themes.…">
<link rel="shortcut icon" href="/favicon.ico?4" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
2022-03-18 20:48:38 +01:00
<link href="/css/telegram.css?224" rel="stylesheet" media="screen">
2022-02-23 06:45:45 +01:00
<style>
</style>
</head>
<body class="preload">
<div class="dev_page_wrap">
<div class="dev_page_head navbar navbar-static-top navbar-tg">
<div class="navbar-inner">
<div class="container clearfix">
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
<ul class="nav navbar-nav">
<li><a href="//telegram.org/">Home</a></li>
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
<li class=""><a href="/api">API</a></li>
<li class=""><a href="/mtproto">Protocol</a></li>
<li class=""><a href="/schema">Schema</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="dev_page">
<div id="dev_page_content_wrap" class=" ">
<div class="dev_page_bread_crumbs"></div>
<h1 id="dev_page_title">Creating Custom Cloud Themes</h1>
<div id="dev_page_content"><p>Official Telegram apps support <a href="https://telegram.org/blog/scheduled-reminders-themes#custom-cloud-themes">custom cloud themes</a> as of version <strong>5.11</strong>. Everyone is welcome to create and share their themes.</p>
<h3><a class="anchor" name="creating-a-theme" href="#creating-a-theme"><i class="anchor-icon"></i></a>Creating a theme</h3>
<p>You can use the <a href="https://themes.contest.com/"><strong>Online Theme Editor</strong></a> (use a <strong>VPN</strong> if it is blocked in your country) to create new Telegram themes from scratch or edit existing ones. Simply log in with your Telegram account and pick a platform to start <strong>editing</strong> the relevant theme file or <strong>import</strong> an existing theme.</p>
<ul>
<li>Set a <strong>name</strong> for your theme using the <code>name</code> attribute</li>
<li>Set colors for elements using <strong>hex codes</strong> or the <strong>color picker</strong></li>
<li>Press Save and apply theme to <strong>push changes</strong> to all users of your theme</li>
</ul>
<h3><a class="anchor" name="checking-your-theme-in-app" href="#checking-your-theme-in-app"><i class="anchor-icon"></i></a>Checking your theme in-app</h3>
<p>Once you have <strong>saved</strong> a theme for the first time, Telegram will send you a message with its <a href="#publishing-your-theme">sharing link</a>. Open the link in the app to switch to your theme.</p>
<p>You can always switch to your theme in <em>Settings &gt; Chat Settings</em>. On iOS and MacOS native app <em>Settings &gt; Appearance</em>.</p>
<h3><a class="anchor" name="publishing-your-theme" href="#publishing-your-theme"><i class="anchor-icon"></i></a>Publishing your theme</h3>
<p>Each theme has a <code>t.me/addtheme</code> <strong>link</strong> which people can use to switch to your theme. You can choose a beautiful short link (e.g., <a href="https://t.me/addtheme/desert"><a href="https://t.me/addtheme/desert">https://t.me/addtheme/desert</a></a>) by changing the <code>shortname</code> attribute. If you add support for multiple platforms, the same link can be used for setting your theme on <strong>all</strong> of them.</p>
<h3><a class="anchor" name="updating-your-theme" href="#updating-your-theme"><i class="anchor-icon"></i></a>Updating your theme</h3>
<p>Your theme gets <strong>updated automatically</strong> for all its users whenever you save and apply changes.</p>
<h3><a class="anchor" name="including-a-chat-background" href="#including-a-chat-background"><i class="anchor-icon"></i></a>Including a chat background</h3>
<p>Your themes can include a <a href="https://telegram.org/blog/backgrounds-2-0">custom wallpaper</a>. To do this, simply go to <em>Settings &gt; Chat Settings &gt; Chat Background</em>. On iOS and MacOS native app <em>Settings &gt; Appearance &gt; Chat Background</em>.</p>
<p>Open any background and tap the sharing button in the top right corner, then copy its <code>t.me/bg/...</code> link. In the theme file, set this link as the value of the <code>wallpaper</code> attribute.</p>
<p>For Telegram Desktop, if you want to make the background <strong>tiled</strong>, add <code>?mode=tiled</code> at the end of the link. For example:</p>
<pre><code>wallpaper: t.me/bg/-jI7lnO3DFABAAAA1vXcFaZP_Vo?mode=tiled</code></pre>
<h3><a class="anchor" name="creating-themes-in-app" href="#creating-themes-in-app"><i class="anchor-icon"></i></a>Creating themes in-app</h3>
<p>If you prefer a more WYSIWYG approach, try creating themes using the in-app tools for customizing appearance. Telegram for <a href="https://telegra.ph/Create-Theme-Android-FAQ">Android</a> and <a href="https://telegra.ph/Create-Theme-Desktop-FAQ">Telegram Desktop</a> have advanced in-app theme editors. Telegram for iOS and MacOS allow choosing a custom accent color from the color wheel and a background, then saving the result as a custom theme.</p>
<p>Once you have saved a new theme in any of the apps, it also becomes accessible in the <a href="https://themes.contest.com/">online editor</a>.</p>
<p><strong>Read more</strong></p>
<ul>
<li><a href="https://telegra.ph/Create-Theme-Android-FAQ">Android Theme Editor</a></li>
<li><a href="https://telegra.ph/Create-Theme-Desktop-FAQ">Telegram Desktop Theme Editor</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer_wrap">
<div class="footer_columns_wrap footer_desktop">
<div class="footer_column footer_column_telegram">
<h5>Telegram</h5>
<div class="footer_telegram_description"></div>
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
</div>
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
<ul>
<li><a href="//telegram.org/faq">FAQ</a></li>
<li><a href="//telegram.org/blog">Blog</a></li>
<li><a href="//telegram.org/jobs">Jobs</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
<ul>
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
<li><a href="//telegram.org/dl/android">Android</a></li>
<li><a href="//telegram.org/dl/wp">Windows Phone</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
<ul>
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
<li><a href="//macos.telegram.org/">macOS</a></li>
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
</ul>
</div>
<div class="footer_column footer_column_platform">
<h5><a href="//core.telegram.org/">Platform</a></h5>
<ul>
<li><a href="//core.telegram.org/api">API</a></li>
<li><a href="//translations.telegram.org/">Translations</a></li>
<li><a href="//instantview.telegram.org/">Instant View</a></li>
</ul>
</div>
</div>
<div class="footer_columns_wrap footer_mobile">
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/blog">Blog</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps">Apps</a></h5>
</div>
<div class="footer_column">
<h5><a href="//core.telegram.org/">Platform</a></h5>
</div>
<div class="footer_column">
<h5><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)">Twitter</a></h5>
</div>
</div>
</div>
</div>
2022-04-05 00:30:58 +02:00
<script src="/js/main.js?44"></script>
2022-02-23 06:45:45 +01:00
<script>backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>