OroPlatform Forums

Covering OroPlatform topics, including community updates and company announcements.

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 Andrey Yatsenko 3 years, 1 month ago.

Starting from March 1, 2020 the forum has been switched to the read-only mode. Please head to StackOverflow for support.

  • Creator
  • #34685

    Stef Vossen

    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?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
  • #34686

    Stef Vossen

    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:

    - '@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:

    - '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.

    Mike Kudelya
    Mike Kudelya


    I want to show you other way to archive style overriding:

    Add custom css to Resources/public/css/customoro.css:

    Add it to Resources/views/layouts/first_theme/config/assets.yml:

    Run the following commands:


    Stef Vossen

    @ 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:

    It’s also possible to override a specific file via for example

    Ayman Hussein
    Ayman Hussein


    I got this error after cache:clear when apply your solution

    The child node “label” at path “oro_layout.themes.xngage” must be configured.




    Hello, am new to orocommerce, i want to customize the frontend, but where do I find the source codes above

    Andrey Yatsenko
    Andrey Yatsenko

    Hi nellybaz10,

    You can start from an installation guide,
    and the topic about customizing the frontend.

Viewing 6 replies - 1 through 6 (of 6 total)

The forum ‘OroPlatform – HTML, JavaScript, CSS, Design Questions’ is closed to new topics and replies.

You will be redirected to [title]. Would you like to continue?

Yes No