Question

我正在尝试根据文档https://doc.oroinc.com/frontend/storefront/theming/

创建一个自定义主题

CustomThemeBundle和FrontendBundle内部的源代码也被用作参考实现。

我还没弄清楚：如何替换顶部栏的字体颜色和大小？

所有其他更改均正常运行：徽标，图标和主要原色。

我的捆绑包文件夹结构

# bundle
src/MyCompany/Bundle/ThemeBundle
src/MyCompany/Bundle/ThemeBundle/MyCompanyThemeBundle.php

# config
src/MyCompany/Bundle/ThemeBundle/Resources/config/oro/bundles.yml

# assets
src/MyCompany/Bundle/ThemeBundle/Resources/public/my_theme/favicons/favicon.ico
src/MyCompany/Bundle/ThemeBundle/Resources/public/my_theme/images/logo.svg

# styles
src/MyCompany/Bundle/ThemeBundle/Resources/public/my_theme/scss/components/top-bar.scss
src/MyCompany/Bundle/ThemeBundle/Resources/public/my_theme/scss/settings/_colors.scss
src/MyCompany/Bundle/ThemeBundle/Resources/public/my_theme/scss/settings/global-settings.scss
src/MyCompany/Bundle/ThemeBundle/Resources/public/my_theme/scss/variables/top-bar-config.scss
src/MyCompany/Bundle/ThemeBundle/Resources/public/my_theme/scss/styles.scss

# assets config
src/MyCompany/Bundle/ThemeBundle/Resources/views/layouts/my_theme/config/assets.yml

# theme definition
src/MyCompany/Bundle/ThemeBundle/Resources/views/layouts/my_theme/theme.yml

主题扩展了默认设置。徽标和网站图标加载正常

以下是主题定义的代码：资源/视图/布局/my_theme/theme.yml

parent: default
logo: bundles/mycompanytheme/my_theme/images/logo.svg
icon: bundles/mycompanytheme/my_theme/favicons/favicon.ico
label:  My Company Marketplace
description: My Company Marketplace Theme.
groups: [ commerce ]

以下是资产配置的代码：资源/视图/布局/my_theme/config/assets.yml

styles:
  inputs:
      - bundles/mycompanytheme/my_theme/scss/settings/global-settings.scss

      - bundles/mycompanytheme/my_theme/scss/variables/top-bar-config.scss
      - bundles/mycompanytheme/my_theme/scss/styles.scss
  output: css/styles.css

我使用CustomThemeBundle作为参考，并且仅更改了主要原色。它有效

这是 global-settings.scss 导入的颜色的代码：资源/public/my_theme/scss/settings/_colors.scss

/* @theme: my_theme; */

$custom-color-palette: (
    'primary': (
        'main': #0165AD, # that was the only color changed and it overrides the default as expected.
        'base': #fd302b,
        'light': #ff7a76,
        'dark': #ce0500
    ),
    'secondary': (
        # all the same from CustomTheme
    ),
    'additional': (
        # all the same from CustomTheme
    ),
    'ui': (
        # all the same from CustomTheme
    )
);

$color-palette: map_merge($color-palette, $custom-color-palette);

现在，我尝试覆盖顶部栏的颜色和字体大小，但它不起作用

以下是top-bar变量的代码： Resources / public / my_theme / scss / variables / top-bar-config.scss

此文件由 assets.yml

导入

/* @theme: my_theme; */

$top-bar-font-size: 14px; #it doens't change the font size
$top-bar-background: get-color('primary', 'main') !default; # it doenn't change the color

以下是顶部栏组件的代码：资源/public/my_theme/scss/components/top-bar.scss

此文件是通过 styles.scss

导入的

/* @theme: my_theme; */

.topbar {
    background: $top-bar-background; # this is the background color I am trying to override

    ...
    # the entiry file content is an exact copy of the default theme from the FrontendBundle
    ...

以下是样式的代码：资源/public/my_theme/scss/styles.scss

此文件由 assets.yml

导入

/* @theme: my_theme; */

@import './components/top-bar';

代码有什么问题？

用于部署主题包的命令：

php bin/console cache:clear
php bin/console assets:install --symlink
php bin/console oro:assets:build my_theme

Answer 1

首先，新自定义主题中的所有scss变量都必须没有!default后缀，例如：

/* @theme: my_theme; */

$top-bar-font-size: 14px;
$top-bar-background: get-color('primary', 'main');

使用以下命令构建主题：

bin/console oro:assets:build -- my_theme

有关的更多信息 themes build

Answer 2

在OroCommerce店面中，有关于自定义字体的单独指南： https://doc.oroinc.com/frontend/storefront/how-to/how-to-change-fonts/

它涵盖了字体大小的修改。
还有关于自定义颜色模式的指南： https://doc.oroinc.com/frontend/storefront/how-to/how-to-change-color-scheme/

它应该涵盖字体颜色的自定义。

OroCommerce 4.1默认主题自定义

2 个答案: