Search

4. Branding and Chroming the Graphical User Interface

download PDF
The following sections describe changing the appearance of the graphical user interface (GUI) of the Anaconda installer.
There are several elements in the graphical user interface of Anaconda which can be changed to customize the look of the installer. To customize the installer's appearance, you must create a custom product.img file containing a custom installclass (to change the product name displayed in the installer) and your own branding material. The product.img file is not an installation image; it is used to supplement the full installation ISO image by loading your customizations and using them to overwrite files included on the boot image by default.
See Section 2, “Working with ISO Images” for information about extracting boot images provided by Red Hat, creating a product.img file and adding this file to the ISO images.

4.1. Customizing Graphical Elements

Graphical elements of the installer which can be changed are stored in the /usr/share/anaconda/pixmaps/ directory in the installer runtime file system. This directory contains the following files:
pixmaps
├─ anaconda-selected-icon.svg
├─ dialog-warning-symbolic.svg
├─ right-arrow-icon.png
├─ rnotes
│  └─ en
│     ├─ RHEL_7_InstallerBanner_Andreas_750x120_11649367_1213jw.png
│     ├─ RHEL_7_InstallerBanner_Blog_750x120_11649367_1213jw.png
│     ├─ RHEL_7_InstallerBanner_CPAccess_CommandLine_750x120_11649367_1213jw.png
│     ├─ RHEL_7_InstallerBanner_CPAccess_Desktop_750x120_11649367_1213jw.png
│     ├─ RHEL_7_InstallerBanner_CPAccess_Help_750x120_11649367_1213jw.png
│     ├─ RHEL_7_InstallerBanner_Middleware_750x120_11649367_1213jw.png
│     ├─ RHEL_7_InstallerBanner_OPSEN_750x120_11649367_1213cd.png
│     ├─ RHEL_7_InstallerBanner_RHDev_Program_750x120_11649367_1213cd.png
│     ├─ RHEL_7_InstallerBanner_RHELStandardize_750x120_11649367_1213jw.png
│     └─ RHEL_7_InstallerBanner_Satellite_750x120_11649367_1213cd.png
├─ sidebar-bg.png
├─ sidebar-logo.png
└─ topbar-bg.png
Additionally, the /usr/share/anaconda/ directory contains a CSS stylesheet named anaconda-gtk.css, which determines the file names and parameters of the main UI elements - the logo and the backgrounds for the side bar and top bar. The file has the following contents:
/* vendor-specific colors/images */

@define-color redhat #021519;

/* logo and sidebar classes for RHEL */

.logo-sidebar {
    background-image: url('/usr/share/anaconda/pixmaps/sidebar-bg.png');
    background-color: @redhat;
    background-repeat: no-repeat;
}

.logo {
    background-image: url('/usr/share/anaconda/pixmaps/sidebar-logo.png');
    background-position: 50% 20px;
    background-repeat: no-repeat;
    background-color: transparent;
}

AnacondaSpokeWindow #nav-box {
    background-color: @redhat;
    background-image: url('/usr/share/anaconda/pixmaps/topbar-bg.png');
    background-repeat: no-repeat;
    color: white;
}

AnacondaSpokeWindow #layout-indicator {
    color: black;
}
The most imporant part of the CSS file is the way it handles scaling based on resolution. The PNG image backgrounds do not scale, they are always displayed in their true dimensions. Instead, the backgrounds have a transparent background, and the style sheet defines a matching background color on the @define-color line. Therefore, the background images "fade" into the background color, which means that the backgrounds work on all resolutions without a need for image scaling.
You could also change the background-repeat parameters to tile the background, or, if you are confident that every system you will be installing on will have the same display resolution, you can use background images which fill the entire bar.
The rnotes/ directory contains a set of banners. During the installation, banner graphics cycle along the bottom of the screen, approximately once per minute.
Any of the files listed above can be customized. Once you do so, follow the instructions in Section 2.2, “Creating a product.img File” to create your own product.img with custom graphics, and then Section 2.3, “Creating Custom Boot Images” to create a new bootable ISO image with your changes included.

4.2. Customizing the Product Name

Apart from graphical elements described in the previous section, you can also customize the product name displayed during the installation. This product name is shown in the top right corner in all screens.
To change the product name, you must create a custom installation class. Create a new file named custom.py with content similar to the example below:

Example 1. Creating a Custom Installclass

from pyanaconda.installclass import BaseInstallClass
from pyanaconda.product import productName
from pyanaconda import network
from pyanaconda import nm

class CustomBaseInstallClass(BaseInstallClass):
    name = "My Distribution"
    sortPriority = 30000
    if not productName.startswith("My Distribution"):
        hidden = True
    defaultFS = "xfs"
    bootloaderTimeoutDefault = 5
    bootloaderExtraArgs = []

    ignoredPackages = ["ntfsprogs"]

    installUpdates = False

    _l10n_domain = "comps"

    efi_dir = "redhat"

    help_placeholder = "RHEL7Placeholder.html"
    help_placeholder_with_links = "RHEL7PlaceholderWithLinks.html"

    def configure(self, anaconda):
        BaseInstallClass.configure(self, anaconda)
        BaseInstallClass.setDefaultPartitioning(self, anaconda.storage)

    def setNetworkOnbootDefault(self, ksdata):
        if ksdata.method.method not in ("url", "nfs"):
            return
        if network.has_some_wired_autoconnect_device():
            return
        dev = network.default_route_device()
        if not dev:
            return
        if nm.nm_device_type_is_wifi(dev):
            return
        network.update_onboot_value(dev, "yes", ksdata)

    def __init__(self):
        BaseInstallClass.__init__(self)
The file above determines the installer defaults (such as the default file system, etc.), but the part relevant to this procedure is the following block:
class CustomBaseInstallClass(BaseInstallClass):
    name = "My Distribution"
    sortPriority = 30000
    if not productName.startswith("My Distribution"):
        hidden = True
Change My Distribution to the name which you want to display in the installer. Also make sure that the sortPriority attribute is set to more than 20000; this makes sure that the new installation class will be loaded first.

Warning

Do not change any other attributes or class names in the file - otherwise you may cause the installer to behave unpredictably.
After you create the custom installclass, follow the steps in Section 2.2, “Creating a product.img File” to create a new product.img file containing your customizations, and the Section 2.3, “Creating Custom Boot Images” to create a new bootable ISO file with your changes included.
Red Hat logoGithubRedditYoutubeTwitter

Learn

Try, buy, & sell

Communities

About Red Hat Documentation

We help Red Hat users innovate and achieve their goals with our products and services with content they can trust.

Making open source more inclusive

Red Hat is committed to replacing problematic language in our code, documentation, and web properties. For more details, see the Red Hat Blog.

About Red Hat

We deliver hardened solutions that make it easier for enterprises to work across platforms and environments, from the core datacenter to the network edge.

© 2024 Red Hat, Inc.