Sass OroCommerce 4.1默认主题自定义_Sass_Frontend_Themes_Customization_Orocommerce

Sass OroCommerce 4.1默认主题自定义

sass

Sass OroCommerce 4.1默认主题自定义,sass,frontend,themes,customization,orocommerce,Sass,Frontend,Themes,Customization,Orocommerce,我正在尝试创建一个自定义主题以下的文件 CustomThemeBundle和FrontendBundle中的源代码也用作参考实现我还没有弄明白：如何替换顶部栏的字体颜色和大小？所有其他变化都正常工作：徽标、favicon和主色调我的包文件夹结构主题扩展了默认设置。徽标和favicon正在加载正常以下是主题定义的代码：Resources/views/layouts/my_theme/theme.yml parent: default logo: bundles/mycompanythem

我正在尝试创建一个自定义主题以下的文件

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

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

所有其他变化都正常工作：徽标、favicon和主色调

我的包文件夹结构

主题扩展了默认设置。徽标和favicon正在加载正常

以下是主题定义的代码：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 ]

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

/* @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

/* @theme: my_theme; */

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

下面是资产配置的代码：Resources/views/layouts/my_theme/config/assets.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 ]

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

/* @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

/* @theme: my_theme; */

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

我使用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);

/* @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/variables/top bar config.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);

/* @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
    ...

此文件由assets.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 ]

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

/* @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

/* @theme: my_theme; */ @import './components/top-bar';
下面是顶栏组件的代码：Resources/public/my_theme/scss/components/top bar.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);

/* @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 ...
此文件由styles.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);

/* @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

/* @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);

/* @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 ...
此文件由assets.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 ]

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

/* @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

/* @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

OroCommerce店面上有一个关于自定义字体的单独指南：
它包括字体大小的修改

还有一个关于自定义颜色模式的指南：
它应该包括字体颜色定制

首先，新自定义主题中的所有
scs
变量都必须没有
！默认值
postfix，如：

/* @theme: my_theme; */ $top-bar-font-size: 14px; $top-bar-background: get-color('primary', 'main');
使用以下命令构建主题：

bin/console-oro:assets:build--my_主题
更多关于
我已经阅读了本文档，也阅读了有关CSS结构的部分：>此结构使我们能够更改捆绑包级别、组件级别和特定主题的组件样式。这种方法的主要思想是不重写父主题中的子主题中的样式。我们只需更改设置并添加额外的CSS（SASS）。如何更改组件级别上顶部栏的背景色？2.如果我改变调色板：“传统的”（“光”：#0165AD）与我的品牌原色相同，那么我也必须将“传统的”（“暗的”：#FFF）更改为我品牌的对比色。3.我是否必须重写顶部栏的全部代码才能更改背景色？4.更改顶栏颜色的唯一选项是更改全局调色板？5.我仍然不明白主题的扩展是如何工作的。文件对此问题不清楚。有关变量覆盖，请参阅Valerii的答案。