Important
You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.
See our Release Process documentation for more information on the currently supported and upcoming releases.
Styles Assets Organization¶
Files structure with styles should be the following:
1 MyBundle/
2 Resources/
3 public/
4 my-theme/
5 scss/
6 components/
7 input/input.scss
8 button/button.scss
9 settings/
10 global-settings.scss
11 variables/
12 input-config/input-config.scss
13 button-config/button-config.scss
14 styles.scss
All styles should be placed in components
folder with the same file name as a block name. For example: components/input/input.scss
:
1.input {
2 display: inline-block;
3 padding: $input-padding;
4 font-size: $font-size;
5 font-family: $input-font-family;
6 line-height: $input-line-height;
7 border: $border;
8 color: $input-color;
9}
Another example: components/button/button.scss
:
1.button {
2 display: inline-block;
3 padding: $button-padding;
4 font-size: $font-size;
5 font-family: $button-font-family;
6 line-height: $button-line-height;
7 border: $border;
8 color: $button-color;
9}
Global settings should contain global variables for blocks. For example: global-settings.scss
:
1$font-size: 12px;
2$font-family: 'Thamoma';
3$line-height: 1.1;
All block variables should be placed in variables
folder. Files should contain configs for blocks that can be reconfigured in my-custom-theme
.
For example, input-config.scss
:
1$input-padding: 8px 9px !default;
2$input-font-size: $font-size !default;
3$input-font-family: $font-family !default;
4$input-line-height: $line-height !default;
5$input-color: blue !default;
Another example: button-config.scss
:
1$button-padding: 18px 9px !default;
2$button-font-size: $font-size !default;
3$button-font-family: $font-family !default;
4$button-line-height: $line-height !default;
5$button-color: yellow !default;
To add blocks to resulting styles.css
file, include them into styles.scss
:
1@import: './components/input/input';
2@import: './components/button/button';
To include configs in the resulting styles.css
file, add them to the assets.yml
file located in MyBundle/Resources/views/layouts/my-theme/config/
:
1styles:
2 inputs:
3 - 'bundles/mybundle/my-theme/scss/settings/global-settings.scss'
4 - 'bundles/mybundle/my-theme/scss/variables/button-config.scss'
5 - 'bundles/mybundle/my-theme/scss/variables/input-config.scss'
6 - 'bundles/mybundle/my-theme/scss/styles.scss'
7 output: 'css/styles.css'
The resulting styles.css
file is the following:
1.input {
2 display: inline-block;
3 padding: 8px 9px;
4 font-size: 12px;
5 font-family: 'Thamoma';
6 line-height: 1.1;
7 color: blue;
8}
9.button {
10 display: inline-block;
11 padding: 18px 9px;
12 font-size: 12px;
13 font-family: 'Thamoma';
14 line-height: 1.1;
15 color: yellow;
16}
Theme Customization by Theme Extending¶
In custom themes you can change globals and settings for a particular component by changing the value of the variable under the same name. You can also make your own configs for new or existing components in the extended theme.
We use styles from my-theme
and configs from my-custom-theme
. For example: components/input/input.scss
:
1 .button {
2 border: $input-border;
3
4 &--full {
5 width: 100%;
6 }
7 }
Another example: global-settings.scss
1$font-size: 14px;
2$font-family: 'Arial';
Another example: input-config.scss
:
1$input-border: 1px solid red;
2$input-color: purple;
Assets.yml
for my-custom-theme
should be the following:
1styles:
2 inputs:
3 - 'bundles/mybundle/my-custom-theme/scss/settings/global-settings.scss'
4 - 'bundles/mybundle/my-custom-theme/scss/variables/input-config.scss'
5 - 'bundles/mybundle/my-custom-theme/scss/styles.scss'
6 output: 'css/styles.css'
The resulting styles.css
file are the following:
1.input {
2 display: inline-block;
3 padding: 8px 9px;
4 font-size: 14px;
5 font-family: 'Arial';
6 line-height: 1.1;
7 color: purple;
8 border: 1px solid red;
9}
10.button {
11 display: inline-block;
12 padding: 18px 9px;
13 font-size: 14px;
14 font-family: 'Arial';
15 line-height: 1.1;
16 color: yellow;
17}
18.button--full {
19 width: 100%
20}
Before dumps, all files are collected into one for each theme. For my-theme
- in file application/commerce/public/css/layout/my-theme/styles.css.scss
:
1@import 'my-theme/settings/global-settings';
2@import 'my-theme/variables/input-config';
3@import 'my-theme/variables/button-config';
4@import 'my-theme/styles';
For my-custom-theme
- in file application/commerce/public/css/layout/my-custom-theme/styles.css.scss
:
1@import 'my-theme/settings/global-settings';
2@import 'my-custom-theme/settings/global-settings';
3@import 'my-theme/variables/input-config';
4@import 'my-theme/variables/button-config';
5@import 'my-custom-theme/variables/input-config';
6@import 'my-custom-theme/variables/button-config';
7@import 'my-theme/styles';
8@import 'my-custom-theme/styles';