summaryrefslogtreecommitdiff
path: root/docs/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html
diff options
context:
space:
mode:
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.html448
1 files changed, 448 insertions, 0 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
new file mode 100644
index 0000000..cdcb2ae
--- /dev/null
+++ b/docs/posts/2019-05-05-Custom-Snowboard-Anemone-Theme.html
@@ -0,0 +1,448 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+ <link rel="stylesheet" href="/assets/main.css" />
+ <link rel="stylesheet" href="/assets/sakura.css" />
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Hey - Post</title>
+
+</head>
+<body>
+ <nav style="display: block;">
+|
+<a href="/">home</a> |
+<a href="/about/">about/links</a> |
+<a href="/posts/">posts</a> |
+<a href="/publications/">publications</a> |
+<a href="/repo/">iOS repo</a> |
+<a href="/feed.rss">RSS Feed</a> |
+</nav>
+
+<main>
+ <h1>Creating your own custom theme for Snowboard or Anemone</h1>
+
+<h3>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>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>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>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"&gt;
+ &lt;plist version="1.0"&gt;
+ &lt;dict&gt;
+ &lt;key&gt;PackageName&lt;/key&gt;
+ &lt;string&gt;ThemeName&lt;/string&gt;
+ &lt;key&gt;ThemeType&lt;/key&gt;
+ &lt;string&gt;Icons&lt;/string&gt;
+ &lt;/dict&gt;
+&lt;/plist&gt;
+</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 seperately 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>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>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&gt;IconBundles</code> as <code>bundleID-large.png</code></li>
+</ul>
+
+<h5>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>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>&lt;dict&gt;</code> and </dict></p>
+
+<pre><code>&lt;key&gt;IB-MaskIcons&lt;/key&gt;
+ &lt;true/&gt;
+</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>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>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>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>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>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>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 .. &amp;&amp; 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>
+
+</main>
+
+
+<script src="assets/manup.min.js"></script>
+<script src="/pwabuilder-sw-register.js"></script>
+</body>
+</html> \ No newline at end of file