Forums › Forums › OroPlatform › OroPlatform – HTML, JavaScript, CSS, Design Questions › Override default front-end stylesheets or remove default stylesheets
This topic contains 6 replies, has 5 voices, and was last updated by Andrey Yatsenko 5 years, 7 months ago.
Starting from March 1, 2020 the forum has been switched to the read-only mode. Please head to StackOverflow for support.
- CreatorTopic
- May 2, 2017 at 8:47 am #34685
I’m working on an OroCommerce project as a front-end developer. I’d like to start with a clean slate concerning the stylesheets so I have full control over the CSS that is used and I can write CSS that is optimised to the design our client wishes. That leaves me with two options:
1) Remove all Scss/CSS assets that are loaded in a parent theme, and just include my self-written CSS file in my own theme.
2) Override all Scss/CSS assets that are loaded in a parent theme for customised versions in my own theme.So far, I didn’t manage to complete any of the two options. Could someone give me a hint how I can do this?
- CreatorTopic
- AuthorReplies
- May 5, 2017 at 3:15 am #34686
I managed to replace the default stylesheet for my own one with creating the file Resources/views/layouts/mycustomthemename/page/layout.yml in my custom bundle. In this file I’ve added the code:
layout:
actions:
- '@removeOption':
id: styles
optionName: src
- '@appendOption':
id: styles
optionName: src
optionValue: '/css/layout/mycustomthemename/mycustomthemename.css'
Then I created the file Resources/views/layouts/mycustomthemename/config/assets.yml in my custom bundle to setup the new stylesheet asset. The content of this file is:
mycustomthemename_styles:
inputs:
- 'bundles/mycustomfrontend/mycustomthemename/css/mycustomthemename.css'
filters: ['cssrewrite', 'cssmin']
output: 'css/layout/mycustomthemename/mycustomthemename.css'
Now I’m able to write the CSS from scratch since only the mycustomthemename.css stylesheet is loaded.
May 5, 2017 at 10:01 am #34687Hi
I want to show you other way to archive style overriding:
Add custom css to Resources/public/css/customoro.css:
CSS1234.main-menu__text {color: mediumblue;font-weight: bold;}Add it to Resources/views/layouts/first_theme/config/assets.yml:
YAML1234styles:inputs:- 'bundles/customoro/css/customoro.css'output: 'css/layout/first_theme/styles.css'Run the following commands:
Shell123app/console oro:assets:install --env=dev --symlinkapp/console assetic:dump --env=devapp/console oro:requirejs:build --env=devMay 8, 2017 at 1:27 am #34688@ Mike Kudelya, thank you for your reply. But your proposal only appends my custom CSS to the default CSS. I’m mostly interested in removing or overriding the default CSS assets.
I’ve had contact with the Oro Service Desk. Thanks to their help I came up with a more neatly solution:
Remove all style assets for a theme that has the parent base in Resources/views/layouts/mycustomthemename/config/assets.yml via:
YAML123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687styles:inputs:- 'bundles/orofrontend/default/vendors/slick/slick.css': ~- 'bundles/oroui/css/mcustomscrollbar/jquery.mCustomScrollbar-custome.css': ~- 'bundles/oroui/css/jquery-ui.grid.css': ~- 'bundles/oroui/css/jquery-ui.custom.css': ~- 'bundles/oroui/css/less/uniform.less': ~- 'bundles/oroui/css/less/font-awesome.less': ~- 'bundles/oroui/css/less/base.less': ~- 'bundles/oroui/css/less/desktop/form.less': ~- 'bundles/orodatagrid/css/less/base.less': ~- 'bundles/bowerassets/backgrid/lib/backgrid.css': ~- 'bundles/bowerassets/backgrid-paginator/backgrid-paginator.css': ~- 'bundles/orodatagrid/css/less/main.less': ~- 'bundles/orodatagrid/css/less/inline-editing-help.less': ~- 'bundles/orodatagrid/css/less/board/board.less': ~- 'bundles/orodatagrid/css/less/board/card.less': ~- 'bundles/oroaddress/css/less/address.less': ~- 'bundles/orofilter/css/less/oro.filter.less': ~- 'bundles/oroui/blank/scss/settings/global-settings.scss': ~- 'bundles/oroform/blank/scss/settings/global-settings.scss': ~- 'bundles/orofrontend/blank/scss/settings/global-settings.scss': ~- 'bundles/oroui/blank/scss/variables/base-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-container-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-header-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-main-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-content-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-footer-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-sidebar-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-title-wrapper-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-title-config.scss': ~- 'bundles/oroui/blank/scss/variables/page-subtitle-config.scss': ~- 'bundles/oroui/blank/scss/variables/title-config.scss': ~- 'bundles/oroui/blank/scss/variables/grid-config.scss': ~- 'bundles/oroui/blank/scss/variables/link-config.scss': ~- 'bundles/oroui/blank/scss/variables/notifications-config.scss': ~- 'bundles/oroui/blank/scss/variables/section-title-config.scss': ~- 'bundles/oroui/blank/scss/variables/copyright-config.scss': ~- 'bundles/oroui/blank/scss/variables/logo-config.scss': ~- 'bundles/oroui/blank/scss/variables/primary-menu-config.scss': ~- 'bundles/oroform/blank/scss/variables/button-config.scss': ~- 'bundles/oroform/blank/scss/variables/custom-checkbox-config.scss': ~- 'bundles/oroform/blank/scss/variables/input-config.scss': ~- 'bundles/oroform/blank/scss/variables/select-config.scss': ~- 'bundles/oroform/blank/scss/variables/textarea-config.scss': ~- 'bundles/oroform/blank/scss/variables/label-config.scss': ~- 'bundles/oroform/blank/scss/variables/form-row-config.scss': ~- 'bundles/orofrontend/blank/scss/variables/bootstrap4-variables-config.scss': ~- 'bundles/orofrontend/blank/scss/variables/btn-group-config.scss': ~- 'bundles/orofrontend/blank/scss/variables/bootstrap4-config.scss': ~- 'bundles/orofrontend/blank/scss/variables/notification-flash-container-config.scss': ~- 'bundles/orofrontend/blank/scss/variables/table-config.scss': ~- 'bundles/orocommercemenu/blank/scss/variables/main-menu-config.scss': ~- 'bundles/orocommercemenu/blank/scss/variables/top-bar-config.scss': ~- 'bundles/orocommercemenu/blank/scss/variables/main-menu-column-config.scss': ~- 'bundles/orocommercemenu/blank/scss/variables/quick-access-container-config.scss': ~- 'bundles/oroproduct/blank/scss/variables/product-view-attributes-config.scss': ~- 'bundles/oroproduct/blank/scss/variables/product-view-layout-config.scss': ~- 'bundles/oroproduct/blank/scss/variables/product-view-desc-config.scss': ~- 'bundles/oroproduct/blank/scss/variables/product-view-desc-list-config.scss': ~- 'bundles/oroproduct/blank/scss/variables/product-view-desc-title-config.scss': ~- 'bundles/oroproduct/blank/scss/variables/product-view-media-config.scss': ~- 'bundles/oroproduct/blank/scss/variables/product-view-quantity-config.scss': ~- 'bundles/oroproduct/blank/scss/variables/sku-config.scss': ~- 'bundles/orocustomer/blank/scss/variables/single-form-page-config.scss': ~- 'bundles/orocustomer/blank/scss/variables/check-email-config.scss': ~- 'bundles/orocms/blank/scss/variables/defaults-config.scss': ~- 'bundles/oropricing/blank/scss/variables/product-price-config.scss': ~- 'bundles/oropricing/blank/scss/variables/product-prices-config.scss': ~- 'bundles/oroui/blank/scss/reset.scss': ~- 'bundles/oroui/blank/vendors/font-awesome/font-awesome.scss': ~- 'bundles/oroui/blank/scss/styles.scss': ~- 'bundles/oroworkflow/blank/scss/styles.scss': ~- 'bundles/orofrontend/blank/scss/styles.scss': ~- 'bundles/orocommercemenu/blank/scss/styles.scss': ~- 'bundles/oroproduct/blank/scss/styles.scss': ~- 'bundles/orocatalog/blank/scss/styles.scss': ~- 'bundles/orocustomer/blank/scss/styles.scss': ~- 'bundles/orocms/blank/scss/styles.scss': ~- 'bundles/oropricing/blank/scss/styles.scss': ~- 'bundles/oroshoppinglist/blank/scss/styles.scss': ~- 'bundles/oroform/blank/scss/styles.scss': ~- 'bundles/bowerassets/font-awesome/css/font-awesome.css': ~- 'bundles/bowerassets/jquery-ui-multiselect-widget/jquery.multiselect.css': ~- 'bundles/bowerassets/jquery-ui-multiselect-widget/jquery.multiselect.filter.css': ~- 'bundles/bowerassets/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css': ~output: 'css/layout/mycustomthemename/styles.css'It’s also possible to override a specific file via for example
YAML123styles:inputs:- 'bundles/oroform/blank/scss/styles.scss': 'bundles/oroform/mycustomthemename/scss/styles.scss'September 6, 2017 at 1:29 am #34689Hi
I got this error after cache:clear when apply your solution
[Symfony\Component\Config\Definition\Exception\InvalidConfigurationException]
The child node “label” at path “oro_layout.themes.xngage” must be configured.arh922
August 21, 2018 at 2:05 am #34691Hello, am new to orocommerce, i want to customize the frontend, but where do I find the source codes above
August 27, 2018 at 2:47 am #34693Hi nellybaz10,
You can start from an installation guide,
and the topic about customizing the frontend. - AuthorReplies
The forum ‘OroPlatform – HTML, JavaScript, CSS, Design Questions’ is closed to new topics and replies.