1

我正在尝试按照文档https://doc.oroinc.com/frontend/storefront/theming/创建自定义主题

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

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

所有其他更改都正常工作：徽标、图标和主要主色。

  1. 我的捆绑文件夹结构
# 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
  1. 主题扩展默认。徽标和网站图标加载正常

这是主题定义的代码：Resources/views/layouts/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 ]

这是资产配置的代码：Resources/views/layouts/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
  1. 我使用 CustomThemeBundle 作为参考，只更改了主要的原色。有用

这是global-settings.scss导入的颜色的代码：Resources/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);
  1. 现在我尝试覆盖顶部栏的颜色和字体大小，但它不起作用

这是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

这是顶部栏组件的代码：Resources/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
    ...

这是样式的代码：Resources/public/my_theme/scss/styles.scss

该文件由assets.yml导入

/* @theme: my_theme; */

@import './components/top-bar';
  1. 代码有什么问题？

用于部署主题包的命令：

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

2 回答 2

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

有关 主题构建的更多信息

于 2020-09-07T10:35:02.260 回答
0

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

    它涵盖了字体大小的修改。

  2. 还有一个关于自定义颜色模式的指南： https ://doc.oroinc.com/frontend/storefront/how-to/how-to-change-color-scheme/

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

于 2020-09-03T16:17:46.443 回答