code.delx.au - refind/blob - 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 6/18/2013, referencing rEFInd 0.6.12</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 $20.00</td>
  30 <td>Donate another value</td>
  31 </tr>
  32 <tr>
  33
  34 <td>
  35 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  36 <input type="hidden" name="cmd" value="_donations">
  37 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
  38 <input type="hidden" name="lc" value="US">
  39 <input type="hidden" name="no_note" value="0">
  40 <input type="hidden" name="currency_code" value="USD">
  41 <input type="hidden" name="amount" value="1.00">
  42 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
  43 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
  44 <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!">
  45 <img alt="Donate with PayPal" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  46 </form>
  47 </td>
  48
  49 <td>
  50 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  51 <input type="hidden" name="cmd" value="_donations">
  52 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
  53 <input type="hidden" name="lc" value="US">
  54 <input type="hidden" name="no_note" value="0">
  55 <input type="hidden" name="currency_code" value="USD">
  56 <input type="hidden" name="amount" value="2.50">
  57 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
  58 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
  59 <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!">
  60 <img alt="Donate with PayPal" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  61 </form>
  62 </td>
  63
  64
  65 <td>
  66 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  67 <input type="hidden" name="cmd" value="_donations">
  68 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
  69 <input type="hidden" name="lc" value="US">
  70 <input type="hidden" name="no_note" value="0">
  71 <input type="hidden" name="currency_code" value="USD">
  72 <input type="hidden" name="amount" value="5.00">
  73 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
  74 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
  75 <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!">
  76 <img alt="Donate with PayPal" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  77 </form>
  78 </td>
  79
  80 <td>
  81 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  82 <input type="hidden" name="cmd" value="_donations">
  83 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
  84 <input type="hidden" name="lc" value="US">
  85 <input type="hidden" name="no_note" value="0">
  86 <input type="hidden" name="currency_code" value="USD">
  87 <input type="hidden" name="amount" value="10.00">
  88 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
  89 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
  90 <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!">
  91 <img alt="Donate with PayPal" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  92 </form>
  93 </td>
  94
  95 <td>
  96 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  97 <input type="hidden" name="cmd" value="_donations">
  98 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
  99 <input type="hidden" name="lc" value="US">
 100 <input type="hidden" name="no_note" value="0">
 101 <input type="hidden" name="currency_code" value="USD">
 102 <input type="hidden" name="amount" value="20.00">
 103 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
 104 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
 105 <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!">
 106 <img alt="Donate with PayPal" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
 107 </form>
 108 </td>
 109
 110 <td>
 111 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
 112 <input type="hidden" name="cmd" value="_donations">
 113 <input type="hidden" name="business" value="rodsmith@rodsbooks.com">
 114 <input type="hidden" name="lc" value="US">
 115 <input type="hidden" name="no_note" value="0">
 116 <input type="hidden" name="currency_code" value="USD">
 117 <input type="hidden" name="item_name" value="rEFInd Boot Manager">
 118 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
 119 <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!">
 120 <img alt="Donate with PayPal" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
 121 </form>
 122 </td></tr>
 123 </table>
 124
 125 <hr />
 126
 127 <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>
 128
 129 <hr />
 130
 131 <div style="float:right; width:55%">
 132
 133 <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>
 134
 135 </div>
 136
 137 <div class="navbar">
 138
 139 <h4 class="tight">Contents</h4>
 140
 141 <ul>
 142
 143 <li class="tight"><a href="#basics">Theming Basics</li>
 144
 145 <li class="tight"><a href="#banners">Banner and Backgrounds</a></li>
 146
 147 <li class="tight"><a href="#icons">Icons</a></li>
 148
 149 <li class="tight"><a href="#icon_backgrounds">Icon Selection Backgrounds</a></li>
 150
 151 <li class="tight"><a href="#fonts">Fonts</a></li>
 152
 153 <li class="tight"><a href="#known_themes">Known Themes</a></li>
 154
 155 </ul>
 156
 157 </div>
 158
 159 <a name="basics">
 160 <h2>Theming Basics</h2>
 161 </a>
 162
 163 <p>Broadly speaking, rEFInd's graphical elements fall into four categories:</p>
 164
 165 <ul>
 166
 167 <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>
 168
 169 <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>
 170
 171 <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>
 172
 173 <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>
 174
 175 </ul>
 176
 177 <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>
 178
 179 <a name="banners">
 180 <h2>Banners and Backgrounds</h2>
 181 </a>
 182
 183 <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>
 184
 185     <br /><center><img src="refind-background.png" align="center"
 186     width="750" height="472" alt="rEFInd provides extensive theming
 187     options." border=2> </center><br />
 188
 189 <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>
 190
 191 <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>
 192
 193 <a name="icons">
 194 <h2>Icons</h2>
 195 </a>
 196
 197 <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>
 198
 199 <ul>
 200
 201 <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 (although you can substitute PNG for ICNS files, with a suitable filename change), 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>
 202
 203 <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>
 204
 205 <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>
 206
 207 <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>
 208
 209 <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>
 210
 211 </ul>
 212
 213 <a name="icon_backgrounds">
 214 <h2>Icon Selection Backgrounds</h2>
 215 </a>
 216
 217 <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>
 218
 219 <a name="fonts">
 220 <h2>Fonts</h2>
 221 </a>
 222
 223 <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>
 224
 225 <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>
 226
 227 <pre class="listing">
 228 $ <tt class="userinput">./mkfont.sh Liberation-Mono-Italic 14 -1 liberation-mono-italic-14.png</tt>
 229 </pre>
 230
 231 <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>
 232
 233 <pre class="listing">font liberation-mono-italic-14.png</pre>
 234
 235 <p>The <tt>mkfont.sh</tt> script takes four arguments:</p>
 236
 237 <ul>
 238
 239 <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>
 240
 241 <li><b>The font size in points</b></li>
 242
 243 <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>
 244
 245 <li><b>The output filename</b></li>
 246
 247 </ul>
 248
 249 <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>
 250
 251 <p>If you're not using Linux, or if you want to use some other method of
 252 generating fonts, you can do so. The font files must be in PNG format (the
 253 BMP format doesn't support an alpha layer, which is required for proper
 254 transparency). They must contain glyphs for the 95 characters between ASCII
 255 32 (space) and ASCII 126 (tilde, ~), inclusive, plus a 96th glyph that
 256 rEFInd displays for out-of-range characters. To work properly, the
 257 characters must be evenly spaced and the PNG image must be a multiple
 258 of 96 pixels wide, with divisions at appropriate points. In theory, you
 259 should be able to take a screen shot of a program displaying the relevant
 260 characters and then crop it to suit your needs. In practice, this is likely
 261 to be tedious.</p>
 262
 263 <a name="known_themes">
 264 <h2>Known Themes</h2>
 265 </a>
 266
 267 <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>
 268
 269 <p>In addition to this default icon set, I've received word of two other rEFInd themes:</p>
 270
 271 <ul>
 272
 273 <li><a href="http://ecto-plazm.deviantart.com/art/rEFInd-Icon-Theme-296571397">ecto-plazm's theme</a></li>
 274
 275 <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>
 276
 277 <li><a href="http://www.turnerharris.com/themes/refind.theme.mac.zip">The Mac theme</a> was created by Wesley Turner-Harris. See <a href="http://www.turnerharris.com/my-themes/">Wesley's Web site</a> if you want to contact the creator of this theme.</li>
 278
 279 </ul>
 280
 281 <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>
 282
 283 <hr />
 284
 285 <p>copyright &copy; 2012&ndash;2013 by Roderick W. Smith</p>
 286
 287 <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>
 288
 289 <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>
 290
 291 <p><a href="index.html">Go to the main rEFInd page</a></p>
 292
 293 <p><a href="linux.html">Learn about methods of booting Linux with rEFInd</a></p>
 294
 295   <p><a href="http://www.rodsbooks.com/">Return</a> to my main Web page.</p>
 296 </body>
 297 </html>