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 | 448 |
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><?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 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>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><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>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 .. && 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 |