第 4 章图形用户界面的品牌塑造和镀铬

Anaconda 用户界面的自定义可能包括自定义图形元素和自定义产品名称。

先决条件

您已下载并提取 ISO 镜像。
您已创建了自己的品牌资料。

有关下载和提取引导镜像的详情，请参考提取 Red Hat Enterprise Linux 引导镜像。

用户界面自定义涉及以下高级别任务：

完成先决条件。
创建自定义品牌资料（如果您计划自定义图形元素）。
自定义图形元素（如果您计划自定义它们）。
自定义产品名称（如果您计划自定义它）。
创建一个 product.img 文件。
创建一个自定义引导镜像。

注意

要创建自定义品牌塑造材料，首先参考默认的图形元素文件类型和尺寸。您可以相应地创建自定义资料。有关默认图形元素的详情，请查看自定义图形元素部分中提供的示例文件。

4.1. 定制图形元素
复制链接

要自定义图形元素，您可以使用自定义的品牌材料修改或替换可自定义的元素，并更新容器文件。

安装程序的可自定义图形元素存储在安装程序运行时文件系统的 /usr/share/anaconda/pixmaps/ 目录中。该目录包括以下可定制文件：

pixmaps
├─ anaconda-password-show-off.svg
├─ anaconda-password-show-on.svg
├─ right-arrow-icon.png
├─ sidebar-bg.png
├─ sidebar-logo.png
└─ topbar-bg.png

pixmaps
├─ anaconda-password-show-off.svg
├─ anaconda-password-show-on.svg
├─ right-arrow-icon.png
├─ sidebar-bg.png
├─ sidebar-logo.png
└─ topbar-bg.png

Copy to Clipboard

Toggle word wrap

此外，/usr/share/anaconda/ 目录包含一个名为 anaconda-gtk.css 的基本 CSS 风格表，它决定了主 UI 元素的文件名和参数 - 徽标以及侧边栏和顶部栏的徽标。特定于产品的风格表自定义位于一个单独的文件(/usr/share/anaconda/pixmaps/redhat.css)中，并覆盖 anaconda-gtk.css 文件中的默认值。对 CSS 自定义使用特定于产品的文件，因为它仅根据需要覆盖风格表的特定元素。

特定于产品的 redhat.css 文件具有以下内容，这些内容可根据您的要求进行自定义（关于完整的风格表规范，请查看 anaconda-gtk.css 文件的内容）：

/* theme colors/images */

@define-color product_bg_color @redhat;

/* logo and sidebar classes */

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

/* Add a logo to the sidebar */

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

/* This is a placeholder to be filled by a product-specific logo. */

.product-logo {
   background-image: none;
   background-color: transparent;
}

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

/* theme colors/images */

@define-color product_bg_color @redhat;

/* logo and sidebar classes */

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

/* Add a logo to the sidebar */

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

/* This is a placeholder to be filled by a product-specific logo. */

.product-logo {
   background-image: none;
   background-color: transparent;
}

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

Copy to Clipboard

Toggle word wrap

CSS 文件最重要的部分是根据分辨率处理缩放的方法。PNG 镜像背景无法扩展，它们始终以真实尺寸显示。相反，背景信息具有透明背景，样式表在 @define-color 行上定义了匹配的背景颜色。因此，背景图像 “淡出”为背景颜色，这意味着背景可以在所有分辨率下工作，而无需图像缩放。

您还可以更改 background-repeat 参数来平铺背景；或者，如果您确信将要安装的每个系统都具有相同的显示分辨率，则您可以使用填充整个栏的背景图像。

以上列出的任何文件都可以自定义。这样做之后，请按照创建 product.img 文件章节中的说明创建自己的带有自定义图形的 product.img，然后创建自定义引导镜像来创建一个包含您的更改的新的可引导 ISO 镜像。

第 4 章图形用户界面的品牌塑造和镀铬

4.1. 定制图形元素
复制链接

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

第 4 章 图形用户界面的品牌塑造和镀铬

4.1. 定制图形元素复制链接链接已复制到粘贴板!

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

第 4 章图形用户界面的品牌塑造和镀铬

4.1. 定制图形元素
复制链接