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 11/6/2014, referencing rEFInd 0.8.3</p>
  19
  20
  21 <p>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="514" alt="rEFInd provides extensive theming
 187     options." border=2> </center><br />
 188
 189 <p class="sidebar"><b>Tip:</b> If you use a laptop, you can create a banner or background that includes your contact information. If you lose your laptop and it's found by an honest person, this should facilitate your getting it back. Setting <tt>timeout 0</tt> in <tt>refind.conf</tt> will ensure that the message remains on the screen indefinitely.</p>
 190
 191 <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>
 192
 193 <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>
 194
 195 <p>Beginning with rEFInd 0.7.8, it's possible to stretch or shrink any image to fill the screen. To do so, you should use the <tt>banner_scale</tt> option in <tt>refind.conf</tt>: Set it to <tt>noscale</tt> (the default) to use small banners as such or to crop larger images; or set it to <tt>fillscreen</tt> to adjust your banner's size to exactly fill the screen. This should be particularly handy for theme developers who want to use a full-screen background image, since you can now do this with just one image file.</p>
 196
 197 <a name="icons">
 198 <h2>Icons</h2>
 199 </a>
 200
 201 <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>
 202
 203 <ul>
 204
 205 <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. The default size for OS tags is 128x128 pixels, tags for 2nd-row utilities are ordinarily 48x48 pixels, and drive-type badges are 32x32 pixels by default. 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>
 206
 207 <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>
 208
 209 <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>
 210
 211 <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>
 212
 213 <li>You can set a custom badge (the 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>
 214
 215 <li>You can adjust the sizes of icons by using the <tt>big_icon_size</tt> and <tt>small_icon_size</tt> tokens in <tt>refind.conf</tt>. These tokens adjust the size of the first-row OS and second-row tool icons, respectively. The <tt>big_icon_size</tt> option also indirectly sets the disk-type badge size; badges have sides that 1/4 the size of OS icons. The icons provided with rEFInd are 128x128 for OS icons, 48x48 for tools, and 32x32 for badges. The <tt>big_icon_size</tt> and <tt>small_icon_size</tt> tokens cause these icons to be scaled to the desired value; however, for best results you should replace your the default icons with ones generated natively in the desired size. (PNG and ICNS are both bitmap formats, and so will be degraded by scaling operations.) Because ICNS is limited in the sizes it supports, you're better off using PNG if you want to create larger icons.</li>
 216
 217 </ul>
 218
 219 <a name="icon_backgrounds">
 220 <h2>Icon Selection Backgrounds</h2>
 221 </a>
 222
 223 <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 scale your icons, you may want to adjust the selection tile images appropriately. The big image is 9/8 the size of its matching icons, while the small tile is 4/3 the size of its icons.) 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>
 224
 225 <a name="fonts">
 226 <h2>Fonts</h2>
 227 </a>
 228
 229 <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>
 230
 231 <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. (This script works properly for most fonts, but if a font is unusually thin or wide, you will have to adjust the <tt>let CellWidth=</tt> line near the end of the file.) You can use it like this:</p>
 232
 233 <pre class="listing">
 234 $ <tt class="userinput">./mkfont.sh Liberation-Mono-Italic 14 -1 liberation-mono-italic-14.png</tt>
 235 </pre>
 236
 237 <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>
 238
 239 <pre class="listing">font liberation-mono-italic-14.png</pre>
 240
 241 <p>The <tt>mkfont.sh</tt> script takes four arguments:</p>
 242
 243 <ul>
 244
 245 <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>
 246
 247 <li><b>The font size in points</b></li>
 248
 249 <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>
 250
 251 <li><b>The output filename</b></li>
 252
 253 </ul>
 254
 255 <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>
 256
 257 <p>If you're not using Linux, or if you want to use some other method of
 258 generating fonts, you can do so. The font files must be in PNG format (the
 259 BMP format doesn't support an alpha layer, which is required for proper
 260 transparency). They must contain glyphs for the 95 characters between ASCII
 261 32 (space) and ASCII 126 (tilde, ~), inclusive, plus a 96th glyph that
 262 rEFInd displays for out-of-range characters. To work properly, the
 263 characters must be evenly spaced and the PNG image must be a multiple
 264 of 96 pixels wide, with divisions at appropriate points. In theory, you
 265 should be able to take a screen shot of a program displaying the relevant
 266 characters and then crop it to suit your needs. In practice, this is likely
 267 to be tedious.</p>
 268
 269 <a name="known_themes">
 270 <h2>Known Themes</h2>
 271 </a>
 272
 273 <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>
 274
 275 <p>In addition to this default icon set, I've received word of a few other rEFInd themes:</p>
 276
 277 <ul>
 278
 279 <li><a href="http://ecto-plazm.deviantart.com/art/rEFInd-Icon-Theme-296571397">ecto-plazm's theme</a></li>
 280
 281 <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>
 282
 283 <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>
 284
 285 <li>Evan Purkhiser's <a href="https://github.com/EvanPurkhiser/rEFInd-minimal-theme">Minimal theme</a> uses black icons on a gray background of varied brightness.</li>
 286
 287 <li>Sean Gibbons' <a href="http://sdbinwiiexe.deviantart.com/art/rEFInd-Next-Theme-407754566">rEFInd Next</a> theme is "inspired by both iOS 7 and Windows 8 interfaces." It includes both a background image and a number of OS icons.</li>
 288
 289 <li>Zhu Qunying has created a <a href="http://zhu-qy.blogspot.com/2014/02/a-slackware-banner-logo-for-refind-boot.html">Slackware-themed banner logo</a> for rEFInd. Although it's not a full theme, I thought I'd mention it here.</li>
 290
 291 <li>naymlezwun has created an <a href="http://naymlezwun.deviantart.com/art/rEFInd-OS-X-Theme-469807750">OS X theme</a> for rEFInd.</li>
 292
 293 <li>jamaladdeen on deviantART has created an <a href="http://jamaladdeen.deviantart.com/art/rEFInd-OSX-Standard-Theme-1-0-492876132?ga_submit_new=10%253A1415269035&ga_type=edit&ga_changes=1&ga_recent=1">OS X theme</a> that resembles the OS X environment.</li>
 294
 295 </ul>
 296
 297 <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>
 298
 299 <hr />
 300
 301 <p>copyright &copy; 2012&ndash;2014 by Roderick W. Smith</p>
 302
 303 <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>
 304
 305 <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>
 306
 307 <p><a href="index.html">Go to the main rEFInd page</a></p>
 308
 309 <p><a href="linux.html">Learn about methods of booting Linux with rEFInd</a></p>
 310
 311   <p><a href="http://www.rodsbooks.com/">Return</a> to my main Web page.</p>
 312 </body>
 313 </html>