diff options
Diffstat (limited to 'docs/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html')
| -rw-r--r-- | docs/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html | 508 |
1 files changed, 0 insertions, 508 deletions
diff --git a/docs/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html b/docs/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html deleted file mode 100644 index a18fd44..0000000 --- a/docs/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html +++ /dev/null @@ -1,508 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta http-equiv="content-type" content="text/html; charset=utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta name="theme-color" content="#6a9fb5"> - - <title>Creating your own custom theme for Snowboard or Anemone</title> - - <!-- - <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" /> - --> - - <link rel="stylesheet" href="/assets/c-hyde.css"> - - <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface"> - <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700"> - - <link rel="stylesheet" href="/assets/main.css"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta name="og:site_name" content="Navan Chauhan"> - <link rel="canonical" href="https://web.navan.dev/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html"> - <meta name="twitter:url" content="https://web.navan.dev/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html"> - <meta name="og:url" content="https://web.navan.dev/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html"> - <meta name="twitter:title" content="Creating your own custom theme for Snowboard or Anemone"> - <meta name="og:title" content="Creating your own custom theme for Snowboard or Anemone"> - <meta name="description" content="Tutorial on creating your own custom theme for Snowboard or Anemone"> - <meta name="twitter:description" content="Tutorial on creating your own custom theme for Snowboard or Anemone"> - <meta name="og:description" content="Tutorial on creating your own custom theme for Snowboard or Anemone"> - <meta name="twitter:card" content="summary_large_image"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="shortcut icon" href="/images/favicon.png" type="image/png"> - <link href="/feed.rss" type="application/atom+xml" rel="alternate" title="Sitewide Atom feed"> - <meta name="twitter:image" content="https://web.navan.dev/images/opengraph/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.png"> - <meta name="og:image" content="https://web.navan.dev/images/opengraph/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.png"> - <meta name="google-site-verification" content="LVeSZxz-QskhbEjHxOi7-BM5dDxTg53x2TwrjFxfL0k"> - <script data-goatcounter="https://navanchauhan.goatcounter.com/count" - async src="//gc.zgo.at/count.js"></script> - <script defer data-domain="web.navan.dev" src="https://plausible.io/js/plausible.js"></script> - <link rel="manifest" href="/manifest.json"> - -</head> -<body class="theme-base-0d"> - <div class="sidebar"> - <div class="container sidebar-sticky"> - <div class="sidebar-about"> - <h1><a href="/">Navan</a></h1> - <p class="lead" id="random-lead">Alea iacta est.</p> - </div> - - <ul class="sidebar-nav"> - <li><a class="sidebar-nav-item" href="/about/">about/links</a></li> - <li><a class="sidebar-nav-item" href="/posts/">posts</a></li> - <li><a class="sidebar-nav-item" href="/3D-Designs/">3D designs</a></li> - <li><a class="sidebar-nav-item" href="/feed.rss">RSS Feed</a></li> - <li><a class="sidebar-nav-item" href="/colophon/">colophon</a></li> - </ul> - <div class="copyright"><p>© 2019-2024. Navan Chauhan <br> <a href="/feed.rss">RSS</a></p></div> - </div> -</div> - -<script> -let phrases = [ - "Something Funny", "Veni, vidi, vici", "Alea iacta est", "In vino veritas", "Acta, non verba", "Castigat ridendo mores", - "Cui bono?", "Memento vivere", "अहम् ब्रह्मास्मि", "अनुगच्छतु प्रवाहं", "चरन्मार्गान्विजानाति", "coq de cheval", "我愛啤酒" - ]; - -let new_phrase = phrases[Math.floor(Math.random()*phrases.length)]; - -let lead = document.getElementById("random-lead"); -lead.innerText = new_phrase; -</script> - <div class="content container"> - - <div class="post"> - <h1 id="creating-your-own-custom-theme-for-snowboard-or-anemone">Creating your own custom theme for Snowboard or Anemone</h1> - -<h3 id="contents">Contents</h3> - -<ul> -<li>Getting Started</li> -<li>Theme Configuration</li> -<li>Creating Icons</li> -<li>Exporting Icons</li> -<li>Icon Masks</li> -<li>Packaging</li> -<li>Building the DEB</li> -</ul> - -<h2 id="getting-started">Getting Started</h2> - -<p><strong>Note: Without the proper folder structure, your theme may not show up!</strong></p> - -<ul> -<li>Create a new folder called <code>themeName.theme</code> (Replace themeName with your desired theme name)</li> -<li>Within <code>themeName.theme</code> folder, create another folder called <code>IconBundles</code> (<strong>You cannot change this name</strong>)</li> -</ul> - -<h2 id="theme-configuration">Theme Configuration</h2> - -<ul> -<li>Now, inside the <code>themeName.theme</code> folder, create a file called <code>Info.plist</code> and paste the following</li> -</ul> - -<pre><code><?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> - <plist version="1.0"> - <dict> - <key>PackageName</key> - <string>ThemeName</string> - <key>ThemeType</key> - <string>Icons</string> - </dict> -</plist> -</code></pre> - -<ul> -<li>Replace <code>PackageName</code> with the name of the Package and replace <code>ThemeName</code> with the Theme Name</li> -</ul> - -<p>Now, you might ask what is the difference between <code>PackageName</code> and <code>ThemeName</code>?</p> - -<p>Well, if for example you want to publish two variants of your icons, one dark and one white but you do not want the user to separately install them. -Then, you would name the package <code>MyTheme</code> and include two themes <code>Blackie</code> and <code>White</code> thus creating two entries. More about this in the end</p> - -<h2 id="creating-icons">Creating Icons</h2> - -<ul> -<li>Open up the Image Editor of your choice and create a new file having a resolution of 512x512</li> -</ul> - -<p><strong>Note: Due to IconBundles, we just need to create the icons in one size and they get resized automatically</strong> :ghost:</p> - -<p><strong>Want to create rounded icons?</strong> -Create them squared only, we will learn how to apply masks!</p> - -<h2 id="exporting-icons">Exporting Icons</h2> - -<p><strong>Note: All icons must be saved as <code>*.png</code> (Tip: This means you can even create partially transparent icons!)</strong></p> - -<ul> -<li>All Icons must be saved in <code>themeName.theme>IconBundles</code> as <code>bundleID-large.png</code></li> -</ul> - -<h5 id="finding-bundleids">Finding BundleIDs</h5> - -<p><strong>Stock Application BundleIDs</strong></p> - -<table> -<thead> -<tr> - <th>Name</th> - <th>BundleID</th> -</tr> -</thead> -<tbody> -<tr> - <td>App Store</td> - <td>com.apple.AppStore</td> -</tr> -<tr> - <td>Apple Watch</td> - <td>com.apple.Bridge</td> -</tr> -<tr> - <td>Calculator</td> - <td>com.apple.calculator</td> -</tr> -<tr> - <td>Calendar</td> - <td>com.apple.mobilecal</td> -</tr> -<tr> - <td>Camera</td> - <td>com.apple.camera</td> -</tr> -<tr> - <td>Classroom</td> - <td>com.apple.classroom</td> -</tr> -<tr> - <td>Clock</td> - <td>com.apple.mobiletimer</td> -</tr> -<tr> - <td>Compass</td> - <td>com.apple.compass</td> -</tr> -<tr> - <td>FaceTime</td> - <td>com.apple.facetime</td> -</tr> -<tr> - <td>Files</td> - <td>com.apple.DocumentsApp</td> -</tr> -<tr> - <td>Game Center</td> - <td>com.apple.gamecenter</td> -</tr> -<tr> - <td>Health</td> - <td>com.apple.Health</td> -</tr> -<tr> - <td>Home</td> - <td>com.apple.Home</td> -</tr> -<tr> - <td>iBooks</td> - <td>com.apple.iBooks</td> -</tr> -<tr> - <td>iTunes Store</td> - <td>com.apple.MobileStore</td> -</tr> -<tr> - <td>Mail</td> - <td>com.apple.mobilemail</td> -</tr> -<tr> - <td>Maps</td> - <td>com.apple.Maps</td> -</tr> -<tr> - <td>Measure</td> - <td>com.apple.measure</td> -</tr> -<tr> - <td>Messages</td> - <td>com.apple.MobileSMS</td> -</tr> -<tr> - <td>Music</td> - <td>com.apple.Music</td> -</tr> -<tr> - <td>News</td> - <td>com.apple.news</td> -</tr> -<tr> - <td>Notes</td> - <td>com.apple.mobilenotes</td> -</tr> -<tr> - <td>Phone</td> - <td>com.apple.mobilephone</td> -</tr> -<tr> - <td>Photo Booth</td> - <td>com.apple.Photo-Booth</td> -</tr> -<tr> - <td>Photos</td> - <td>com.apple.mobileslideshow</td> -</tr> -<tr> - <td>Playgrounds</td> - <td>come.apple.Playgrounds</td> -</tr> -<tr> - <td>Podcasts</td> - <td>com.apple.podcasts</td> -</tr> -<tr> - <td>Reminders</td> - <td>com.apple.reminders</td> -</tr> -<tr> - <td>Safari</td> - <td>com.apple.mobilesafari</td> -</tr> -<tr> - <td>Settings</td> - <td>com.apple.Preferences</td> -</tr> -<tr> - <td>Stocks</td> - <td>com.apple.stocks</td> -</tr> -<tr> - <td>Tips</td> - <td>com.apple.tips</td> -</tr> -<tr> - <td>TV</td> - <td>com.apple.tv</td> -</tr> -<tr> - <td>Videos</td> - <td>com.apple.videos</td> -</tr> -<tr> - <td>Voice Memos</td> - <td>com.apple.VoiceMemos</td> -</tr> -<tr> - <td>Wallet</td> - <td>com.apple.Passbook</td> -</tr> -<tr> - <td>Weather</td> - <td>com.apple.weather</td> -</tr> -</tbody> -</table> - -<p><strong>3rd Party Applications BundleID</strong> -Click <a rel="noopener" target="_blank" href="http://offcornerdev.com/bundleid.html">here</a></p> - -<h3 id="icon-masks">Icon Masks</h3> - -<ul> -<li>Getting the Classic Rounded Rectangle Masks</li> -</ul> - -<p>In your <code>Info.plist</code> file add the following value between <code><dict></code> and </dict></p> - -<pre><code><key>IB-MaskIcons</key> - <true/> -</code></pre> - -<ul> -<li>Custom Icon Masks</li> -</ul> - -<p><strong>NOTE: This is an optional step, if you do not want Icon Masks, skip this step</strong></p> - -<ul> -<li>Inside your <code>themeName.theme</code> folder, create another folder called 'Bundles' -<ul> -<li>Inside <code>Bundles</code> create another folder called <code>com.apple.mobileicons.framework</code></li> -</ul></li> -</ul> - -<h4 id="designing-masks">Designing Masks</h4> - -<p><strong>Masking does not support IconBundles, therefore you need to save the masks for each of the following</strong></p> - -<table> -<thead> -<tr> - <th>File</th> - <th>Resolution</th> -</tr> -</thead> -<tbody> -<tr> - <td>AppIconMask@2x~ipad.png</td> - <td>152x512</td> -</tr> -<tr> - <td>AppIconMask@2x~iphone.png</td> - <td>120x120</td> -</tr> -<tr> - <td>AppIconMask@3x~ipad.png</td> - <td>180x180</td> -</tr> -<tr> - <td>AppIconMask@3x~iphone.png</td> - <td>180x180</td> -</tr> -<tr> - <td>AppIconMask~ipad.png</td> - <td>76x76</td> -</tr> -<tr> - <td>DocumentBadgeMask-20@2x.png</td> - <td>40x40</td> -</tr> -<tr> - <td>DocumentBadgeMask-145@2x.png</td> - <td>145x145</td> -</tr> -<tr> - <td>GameAppIconMask@2x.png</td> - <td>84x84</td> -</tr> -<tr> - <td>NotificationAppIconMask@2x.png</td> - <td>40x40</td> -</tr> -<tr> - <td>NotificationAppIconMask@3x.png</td> - <td>60x60</td> -</tr> -<tr> - <td>SpotlightAppIconMask@2x.png</td> - <td>80x80</td> -</tr> -<tr> - <td>SpotlightAppIconMask@3x.png</td> - <td>120x120</td> -</tr> -<tr> - <td>TableIconMask@2x.png</td> - <td>58x58</td> -</tr> -<tr> - <td>TableIconOutline@2x.png</td> - <td>58x58</td> -</tr> -</tbody> -</table> - -<ul> -<li>While creating the mask, make sure that the background is not a solid colour and is transparent</li> -<li>Whichever area you want to make visible, it should be coloured in black</li> -</ul> - -<p>Example (Credits: Pinpal):</p> - -<p><img src="https://pinpal.github.io/assets/theme-guide/mask-demo.png" alt="Credit: Pinpal" /></p> - -<p>would result in</p> - -<p><img src="https://pinpal.github.io/assets/theme-guide/mask-result.png" alt="Credit: Pinpal" /></p> - -<h3 id="packaging">Packaging</h3> - -<ul> -<li>Create a new folder outside <code>themeName.theme</code> with the name you want to be shown on Cydia, e.g <code>themeNameForCydia</code></li> -<li>Create another folder called <code>DEBIAN</code> in <code>themeNameForCydia</code> (It needs to be uppercase)</li> -<li>In <code>DEBIAN</code> create an extension-less file called <code>control</code> and edit it using your favourite text editor</li> -</ul> - -<p>Paste the following in it, replacing <code>yourname</code>, <code>themename</code>, <code>Theme Name</code>, <code>A theme with beautiful icons!</code> and <code>Your Name</code> with your details:</p> - -<pre><code>Package: com.yourname.themename -Name: Theme Name -Version: 1.0 -Architecture: iphoneos-arm -Description: A theme with beautiful icons! -Author: Your Name -Maintainer: Your Name -Section: Themes -</code></pre> - -<ul> -<li><p>Important Notes:</p> - -<ul> -<li>The package field <strong>MUST</strong> be lower case!</li> -<li>The version field <strong>MUST</strong> be changed every-time you update your theme!</li> -<li>The control file <strong>MUST</strong> have an extra blank line at the bottom!</li> -</ul></li> -<li><p>Now, Create another folder called <code>Library</code> in <code>themeNameForCydia</code></p></li> -<li>In <code>Library</code> create another folder called <code>Themes</code></li> -<li>Finally, copy <code>themeName.theme</code> to the <code>Themes</code> folder (<strong>Copy the entire folder, not just the contents</strong>)</li> -</ul> - -<h3 id="building-the-deb">Building the DEB</h3> - -<p><strong>For building the deb you need a <code>*nix</code> system, otherwise you can build it using your iPhones</strong></p> - -<h5 id="pre-requisite-for-macos-users">Pre-Requisite for MacOS users</h5> - -<p>1) Install Homenbrew <code>/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</code> (Run this in the terminal) -2) Install dpkg, by running <code>brew install dpkg</code></p> - -<p><strong>There is a terrible thing called .DS_Store which if not removed, will cause a problem during either build or installation</strong></p> - -<ul> -<li><p>To remove this we first need to open the folder in the terminal</p></li> -<li><p>Launch the Terminal and then drag-and-drop the 'themeNameForCydia' folder on the Terminal icon in the dock</p></li> -<li>Now, run <code>find . -name "*.DS_Store" -type f -delete</code></li> -</ul> - -<h5 id="pre-requisite-for-windows-users">Pre-Requisite for Windows Users</h5> - -<ul> -<li>SSH into your iPhone and drag and drop the <code>themeNameForCyia</code> folder on the terminal</li> -</ul> - -<h5 id="common-instructions">Common Instructions</h5> - -<ul> -<li>You should be at the root of the folder in the terminal, i.e Inside <code>themeNameForCydia</code></li> -<li>running <code>ls</code> should show the following output</li> -</ul> - -<pre><code>DEBIAN Library -</code></pre> - -<ul> -<li>Now, in the terminal enter the following <code>cd .. && dpkg -b themeNameForCydia</code></li> -</ul> - -<p><strong>Now you will have the <code>themeNameForCydia.deb</code> in the same directory</strong></p> - -<p>You can share this with your friends :+1:</p> - - </div> - <blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote> - <script data-isso="https://comments.navan.dev/" - src="https://comments.navan.dev/js/embed.min.js"></script> - <div id="isso-thread"> - <noscript>Javascript needs to be activated to view comments.</noscript> - </div> - - </div> - <script src="assets/manup.min.js"></script> - <script src="/pwabuilder-sw-register.js"></script> -</body> -</html>
\ No newline at end of file |