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

  • Creator
    Topic
  • #34685

    Stef Vossen
    Participant

    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
    Replies
  • #34686

    Stef Vossen
    Participant

    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.

    #34687

    Mike Kudelya
    Participant

    Hi

    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:

    #34688

    Stef Vossen
    Participant

    @ 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

    #34689

    Ayman Hussein
    Participant

    Hi

    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

    #34691

    nellybaz10
    Participant

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

    #34693

    Andrey Yatsenko
    Moderator

    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.

Back to top