]> code.delx.au - refind/blob - docs/refind/themes.html
Version 0.6.7 release.
[refind] / docs / refind / themes.html
1 <?xml version="1.0" encoding="utf-8" standalone="no"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head>
7 <title>The rEFInd Boot Manager: Theming rEFInd</title>
8 <link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
9 </head>
10
11 <body>
12 <h1>The rEFInd Boot Manager:<br />Theming rEFInd</h1>
13
14 <p class="subhead">by Roderick W. Smith, <a
15 href="mailto:rodsmith@rodsbooks.com">rodsmith@rodsbooks.com</a></p>
16
17 <p>Originally written: 4/19/2012; last Web page update:
18 2/3/2013, referencing rEFInd 0.6.7</p>
19
20
21 <p>I'm a technical writer and consultant specializing in Linux technologies. This Web page is provided free of charge and with no annoying outside ads; however, I did take time to prepare it, and Web hosting does cost money. If you find this Web page useful, please consider making a small donation to help keep this site up and running. Thanks!</p>
22
23 <table border="1">
24 <tr>
25 <td>Donate $1.00</td>
26 <td>Donate $2.50</td>
27 <td>Donate $5.00</td>
28 <td>Donate $10.00</td>
29 <td>Donate another value</td>
30 </tr>
31 <tr>
32 <td><form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
33 <input type="hidden" name="cmd" value="_xclick">
34 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
35 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
36 <input type="hidden" name="currency_code" value="USD">
37 <input type="hidden" name="amount" value="1.00">
38 <input type="image" src="http://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
39 </form>
40
41 </td>
42 <td><form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
43 <input type="hidden" name="cmd" value="_xclick">
44 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
45 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
46 <input type="hidden" name="currency_code" value="USD">
47 <input type="hidden" name="amount" value="2.50">
48 <input type="image" src="http://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
49 </form>
50
51 </td>
52 <td><form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
53 <input type="hidden" name="cmd" value="_xclick">
54 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
55 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
56 <input type="hidden" name="currency_code" value="USD">
57 <input type="hidden" name="amount" value="5.00">
58 <input type="image" src="http://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
59 </form>
60
61 </td>
62 <td><form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
63 <input type="hidden" name="cmd" value="_xclick">
64 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
65 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
66 <input type="hidden" name="currency_code" value="USD">
67 <input type="hidden" name="amount" value="10.00">
68 <input type="image" src="http://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
69 </form>
70
71 </td>
72 <td>
73 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
74 <input type="hidden" name="cmd" value="_donations">
75 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
76 <input type="hidden" name="lc" value="US">
77 <input type="hidden" name="no_note" value="0">
78 <input type="hidden" name="currency_code" value="USD">
79 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
80 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
81 <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
82 <img alt="Donate with PayPal" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
83 </form>
84 </td></tr>
85 </table>
86
87 <hr />
88
89 <p>This page is part of the documentation for the rEFInd boot manager. If a Web search has brought you here, you may want to start at the <a href="index.html">main page.</a></p>
90
91 <hr />
92
93 <div style="float:right; width:55%">
94
95 <p>rEFInd relies on both built-in and external graphical elements in its user interface, and all of these elements can be replaced by user-specified files. This fact makes rEFInd's "look and feel" highly adjustable even by non-programmers. This page will help you get started in making such changes to each of the major sets of features: banners and backgrounds, icons, and fonts. I conclude this page with pointers to a few themes that users have created for rEFInd.</p>
96
97 </div>
98
99 <div class="navbar">
100
101 <h4 class="tight">Contents</h4>
102
103 <ul>
104
105 <li class="tight"><a href="#basics">Theming Basics</li>
106
107 <li class="tight"><a href="#banners">Banner and Backgrounds</a></li>
108
109 <li class="tight"><a href="#icons">Icons</a></li>
110
111 <li class="tight"><a href="#icon_backgrounds">Icon Selection Backgrounds</a></li>
112
113 <li class="tight"><a href="#fonts">Fonts</a></li>
114
115 <li class="tight"><a href="#known_themes">Known Themes</a></li>
116
117 </ul>
118
119 </div>
120
121 <a name="basics">
122 <h2>Theming Basics</h2>
123 </a>
124
125 <p>Broadly speaking, rEFInd's graphical elements fall into four categories:</p>
126
127 <ul>
128
129 <li><b>Banners and backgrounds</b>&mdash;A <i>banner</i> is a logo or small graphical element that rEFInd displays horizontally centered in the top half of the screen. The rest of the screen is filled with a solid color derived from the color used in the top-left pixel of the banner image. rEFInd includes a built-in banner image that's used if you don't specify another image with the <tt>banner</tt> token in <tt>refind.conf</tt>. A <i>background</i> is simply a banner image that fills the screen.</li>
130
131 <li><b>Icons</b>&mdash;rEFInd uses icons for its OSes and utilities. The vast majority of these icons are loaded from disk files and so are easily replaced without adjusting the <tt>refind.conf</tt> file. Alternatively, you can specify a new icons directory with the <tt>icons_dir</tt> token in <tt>refind.conf</tt>.</li>
132
133 <li><b>Icon selection backgrounds</b>&mdash;When an icon is selected, it's merged with a slightly larger selection icon, which you can change by specifying a new file with the <tt>selection_big</tt> and <tt>selection_small</tt> tokens in <tt>refind.conf</tt>.</li>
134
135 <li><b>fonts</b>&mdash;rEFInd uses a 14-point monospaced serif font by default. If you don't like this font, you can change it to another monospaced font by using the <tt>font</tt> token in <tt>refind.conf</tt>; however, the font file is a simple PNG image of the font's characters, which limits rEFInd's font capabilities.</li>
136
137 </ul>
138
139 <p>Of course, not all of these elements are likely to be included in all themes. You might want to change just one or two elements&mdash;say, to add an icon for your OS or to change the banner or background.</p>
140
141 <p><b>Note:</b> If you'd like to design a banner logo for rEFInd, please do so! I lack the sort of artistic talent required for creating logos, so I just used plain text. I'd like to have something more eye-catching, though. I don't promise to use the first logo I'm given, but if you have some ideas, or would like to discuss some ideas, feel free to <a href="mailto:rodsmith@rodsbooks.com">e-mail me.</a> I'm currently distributing one proposed alternative in the <tt>banners</tt> subdirectory.</p>
142
143 <a name="banners">
144 <h2>Banners and Backgrounds</h2>
145 </a>
146
147 <p>You can create a new background image and logo by placing a PNG or BMP file in rEFInd's main directory and passing its filename to rEFInd with the <tt>banner</tt> option in <tt>refind.conf</tt>. If the image is smaller than the screen, the color in the top-left pixel of the image will be used for the rest of the display. This pixel's color is also used as the background color for submenu text, even for full-screen backgrounds. Using a full-screen background image can produce a dramatically different "look" for rEFInd:</p>
148
149 <br /><center><img src="refind-background.png" align="center"
150 width="750" height="472" alt="rEFInd provides extensive theming
151 options." border=2> </center><br />
152
153 <p>Note that in this example, the text immediately below the icons is white, whereas the hint text at the bottom of the screen is black. The text color is determined by the brightness of the background; rEFInd uses black text against light backgrounds and light text against dark backgrounds. This adjustment is done on a line-by-line basis, so it copes better with horizontal lines than with vertical lines.</p>
154
155 <p>If you want to use a full-screen background but also include the rEFInd logo, you can merge the two in a graphics editor by including the <tt>refind_banner-alpha.png</tt> image from the <tt>banners</tt> subdirectory of the rEFInd package in your background.</p>
156
157 <a name="icons">
158 <h2>Icons</h2>
159 </a>
160
161 <p>As described on various other pages of this document, rEFInd relies on icon files located in its <tt>icons</tt> subdirectory, and occasionally elsewhere, to define its overall appearance. You can adjust rEFInd's icons in a few ways:</p>
162
163 <ul>
164
165 <li>You can create new icons, place them in a subdirectory of rEFInd's main directory, and tell the program to use the new icons by setting the <tt>icons_dir</tt> token in <tt>refind.conf</tt>. This will affect the appearance of the OS tags, the utility tags, and so on. The names of these icons should match those in the <tt>icons</tt> subdirectory, and are fairly self-explanatory. OS tags should be 128x128 pixels, while tags for 2nd-row utilities should be 48x48 pixels. If an icon is missing from the directory specified by <tt>icons_dir</tt>, rEFInd falls back to the icon from the standard <tt>icons</tt> subdirectory; thus, you can replace just a subset of the standard icons. rEFInd can use icons in either Apple's <a href="http://en.wikipedia.org/wiki/Apple_Icon_Image">icon image (ICNS)</a> or <a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">Portable Network Graphics (PNG)</a> format. PNG files are easier to generate on most platforms. You can generate ICNS files in various Apple programs or by using the <a href="http://icns.sourceforge.net/">libicns</a> library (and in particular its <tt>png2icns</tt> program) in Linux.</li>
166
167 <li>You can do as above, but place your new icons in the default <tt>icons</tt> subdirectory. This method is discouraged because using the <tt>install.sh</tt> script to upgrade rEFInd will replace your customized icons.</li>
168
169 <li>You can customize the appearance of an individual boot loader by placing an ICNS or PNG file in its directory with the same name as the boot loader but with a <tt>.icns</tt> or <tt>.png</tt> extension. For instance, if your boot loader program is <tt>elilo.efi</tt>, you can create a custom icon by naming it <tt>elilo.png</tt>.</li>
170
171 <li>You can provide an icon for boot loaders stored in the root directory of a filesystem by placing a file called <tt>.VolumeIcon.icns</tt> or <tt>.VolumeIcon.png</tt> in that volume's root.</li>
172
173 <li>You can set a custom badge (the 48x48-pixel icon that identifies the disk type) by creating a file called <tt>.VolumeBadge.icns</tt> or <tt>.VolumeBadge.png</tt> in that volume's root. This setting applies to all the boot loaders found on this volume, even if they're in subdirectories.</li>
174
175 </ul>
176
177 <a name="icon_backgrounds">
178 <h2>Icon Selection Backgrounds</h2>
179 </a>
180
181 <p>rEFInd identifies the current selection by displaying a partially-transparent icon "between" the OS or tool icon and the background image. The default icon works reasonably well on both solid and image backgrounds, but if you like, you can customize it by creating new icons in PNG or in Microsoft's <a href="http://en.wikipedia.org/wiki/BMP_file_format">BMP format</a>. You should create both 144x144 and 64x64 images and tell rEFInd about them by using the <tt>selection_big</tt> and <tt>selection_small</tt> tokens, respectively, in <tt>refind.conf</tt>. If you omit the large icon, rEFInd will stretch the small icon to fit the larger space; if you omit the small icon, rEFInd will use the default small icon. Because BMP doesn't support transparency (alpha channels), you must use the PNG format if you want your selection background to show the underlying image beneath it. (You can create the illusion of transparency on a solid background by matching the colors, though.)</p>
182
183 <a name="fonts">
184 <h2>Fonts</h2>
185 </a>
186
187 <p>rEFInd's default font is a 14-point (12-point in 0.6.5 and earlier) serif monospaced font. I also include a handful of alternatives in the <tt>fonts</tt> subdirectory. rEFInd's font support is extremely rudimentary, though; it reads a PNG file that holds the glyphs from ASCII 32 (space) through ASCII 126 (tilde, <tt>~</tt>), plus a glyph that's displayed for all characters outside of this range. Thus, rEFInd can't currently display non-ASCII characters or use proportional (variable-width) fonts. You can change the font from one monospaced font to another and change the font size, though.</p>
188
189 <p>If you want to create your own fonts, you can do so. If you're using Linux, the <tt>mkfont.sh</tt> script in the <tt>fonts</tt> subdirectory will convert an installed <i>monospace</i> font into a suitable format. You can use it like this:</p>
190
191 <pre class="listing">
192 $ <tt class="userinput">./mkfont.sh Liberation-Mono-Italic 14 -1 liberation-mono-italic-14.png</tt>
193 </pre>
194
195 <p>The result is a PNG file, <tt>liberation-mono-italic-14.png</tt>, that you can copy to your rEFInd directory and load with the <tt>font</tt> token in <tt>refind.conf</tt>, as in:</p>
196
197 <pre class="listing">font liberation-mono-italic-14.png</pre>
198
199 <p>The <tt>mkfont.sh</tt> script takes four arguments:</p>
200
201 <ul>
202
203 <li><b>The font name</b>&mdash;Type <tt class="userinput">convert -list font | less</tt> to obtain a list of fonts available on your computer. Note, however, that rEFInd requires <i>monospaced</i> (fixed-width) fonts, and most of the fonts installed on most computers are variable-width.</li>
204
205 <li><b>The font size in points</b></li>
206
207 <li><b>A y offset</b>&mdash;Many fonts require an adjustment up (negative values), or occasionally down (positive values) to fit in the PNG image area. You'll have to use trial and error to get this to work.</li>
208
209 <li><b>The output filename</b></li>
210
211 </ul>
212
213 <p>I recommend checking the PNG file in a graphics program like <tt>eog</tt> before using it. Note that the font files should have an alpha layer, which many graphics programs display as a gray-and-white checkered background.</p>
214
215 <p>If you're not using Linux, or if you want to use some other method of
216 generating fonts, you can do so. The font files must be in PNG format (the
217 BMP format doesn't support an alpha layer, which is required for proper
218 transparency). They must contain glyphs for the 95 characters between ASCII
219 32 (space) and ASCII 126 (tilde, ~), inclusive, plus a 96th glyph that
220 rEFInd displays for out-of-range characters. To work properly, the
221 characters must be evenly spaced and the PNG image must be a multiple
222 of 96 pixels wide, with divisions at appropriate points. In theory, you
223 should be able to take a screen shot of a program displaying the relevant
224 characters and then crop it to suit your needs. In practice, this is likely
225 to be tedious.</p>
226
227 <a name="known_themes">
228 <h2>Known Themes</h2>
229 </a>
230
231 <p>I used icons from the Oxygen Icons project, both from the <a href="http://deviantdark.deviantart.com/art/Oxygen-Refit-70199755">Oxygen Refit</a> package and from Gentoo's <tt>oxygen-icons</tt> package. These icons supplemented or replaced icons that rEFIt used; however, many OS icons (such as those for Windows and Mac OS) are carried over from rEFIt. I've also used a handful of icons for individual Linux distributions from other sources&mdash;usually documentation associated with the distribution in question.</p>
232
233 <p>In addition to this default icon set, I've received word of two other rEFInd themes:</p>
234
235 <ul>
236
237 <li><a href="http://ecto-plazm.deviantart.com/art/rEFInd-Icon-Theme-296571397">ecto-plazm's theme</a></li>
238
239 <li><a href="http://opendesktop.org/content/show.php?content=153267">The Gris Theme</a> (also available as an <a href="https://aur.archlinux.org/packages.php?ID=61917">Arch Linux package</a>.)</li>
240
241 </ul>
242
243 <p>If you've created or discovered another rEFInd theme, please <a href="mailto:rodsmith@rodsbooks.com">tell me about it</a> so that I can provide a link to it from this page.</p>
244
245 <hr />
246
247 <p>copyright &copy; 2012&ndash;2013 by Roderick W. Smith</p>
248
249 <p>This document is licensed under the terms of the <a href="FDL-1.3.txt">GNU Free Documentation License (FDL), version 1.3.</a></p>
250
251 <p>If you have problems with or comments about this Web page, please e-mail me at <a href="mailto:rodsmith@rodsbooks.com">rodsmith@rodsbooks.com.</a> Thanks.</p>
252
253 <p><a href="index.html">Go to the main rEFInd page</a></p>
254
255 <p><a href="linux.html">Learn about methods of booting Linux with rEFInd</a></p>
256
257 <p><a href="http://www.rodsbooks.com/">Return</a> to my main Web page.</p>
258 </body>
259 </html>